Featured Content Glider Separating Back/Next

[meganp]

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:
I'm trying to separate the Back and Next links so they are on either side of the glider content. I'd like the Back to appear on the left of the content and the Next to appear on the right. I tried placing the p-select div in both areas, but because there is only one id specified for the toggler id, it's not working. Any ideas on how this can be done?
Thanks!

[ddadmin]

Doesn't the first demo on the script page already have the "back" and "next" button on opposite ends of the content, or am I misunderstanding your question? You can position the pagination buttons anywhere you want on the page, as long as they are added within the single p-select DIV. In other words, you can't have multiple p-select DIVs for each Glider Content instance on the page, but rarely do you ever need to actually. You can have multiple duplicate pagination links within this DIV.

[meganp]

Hello, here is what I am looking for.
I want to have a arrow graphic to the left (when clicked goes to previous). Then, the content and then on the right will be another arrow graphic (when clicked goes to next). I want the controls in the same line as the content, not underneath the content. It sounds like what I want to do is not possible because you cannot have two p-select divs on the pages, but let me know what you think.
Thanks!

[ddadmin]

It seems what you're really asking is just how to position the pagination links so they're part of the content itself? Since you can only have one "p-select" DIV per Glider on the page, with that said, you can probably use some relative positioning to move the "p-select" DIV upwards, so it actually overlaps the bottom of the content area. Something like:

<div id="p-select" class="glidecontenttoggler" style="position:relative; top: -50px">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

You'll have to play with the values and perhaps add additional CSS properties, but that's the general idea anyway.