Help with the virtual pagination

[cz231]

I am using the first example in the virtual pagination code for my site. I am trying to replace the numbers on the top with actual title like home, link, contact us, site map, etc. Any help would be very much appreciated. I saw an older discussion but it remained unanswered.

Edit: Sorry I didn't include the link here is the script I am asking about

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Sure, try using the modified virtualpaginate.js file attached. Then, in the first demo, where you had:

<!-- Initialize Demo 1 -->
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage", 1)
gallery.buildpagination("gallerypaginate")
</script>

You can now pass an optional 2nd parameter into buildpagination(), like so:

<!-- Initialize Demo 1 -->
<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage", 1)
gallery.buildpagination("gallerypaginate", ["home", "contact", "gallery", "discover"])
</script>

[cz231]

Thanks!
I have some other questions now though-
Now that I have replaced the numbers with names the Previous and Next want to go above and below the names. I've been trying to fix this but nothing will work. Its probably a simple fix and I am just not thinking of it.

Also do I need to whole js file if I am only using demo number 1 or can I delete someone of it that only pertains to demos 2 and 3. I apologize for my limited knowledge of Javascript.

Another problem I ran into was I kind of would like to have the names below and above the place where it shows the content. But the way the code set up it will only show up once. Is their a solution to this as well.

I apologize for all of these questions and thank you for just taking the time for reading this. Again, I would appreciate any help to any question.

[ddadmin]

Hi:
For the 1st question, all you need to do is tweak the CSS for the DIV that houses the pagination links so it's wide enough:

.paginationstyle{ /*Style for demo pagination divs*/
width: 450px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

Set the width in red to be just enough to contain your links- too long, and there will be unsightly margins on the left.

For #2, if I understood you correctly, you don't have to delete anything within the attached .js file. The only difference from the original is the "custom pagnation text" feature added.

For #3, unfortunately there's currently no quick way to have the pagination links show up more than once per instance.

[cz231]

Thankyou very much. #1 worked perfectly!

[cz231]

Hi
another question about the same thing,
For what I am using virtual pagination for, in one of the sections I want to paginate that as well. So if you go to say the third section I want to have another virtual pagination thing pop up inside. I have tried this but it gets all messed up. It works but it doesn't paginate into seperate pages and it displayes it all in one. And when you click on a sub paginate link it doesn't do anything and it has the color of the Next and Previous buttons.
Thanks in advance for any help

[ddadmin]

Nesting another virtual pagination instance within some DIV that's part of another virtual pagination instance does work, but you will run into problems if your main pagination content are divided using the <P> tag. To avoid this problem, use a DIV tag to divide both the main pagination contents, and the sub contents.

Below is the full HTML for an example of nested virtual pagination:

<h3>Demo 2:</h3>

<div style="width: 450px; height: 200px; border: 1px dashed gray; padding: 10px; background-color: #EEFFAA">

<div class="virtualpage2">
<b><a href="#">RSS Display Boxes</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.

<div style="width: 300px; height: 230px;">

<div class="virtualsub">
<img src="http://img184.imageshack.us/img184/1159/castleyi6.gif" />
</div>

<div class="virtualsub">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>

<div class="virtualsub">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>

<div class="virtualsub">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>

</div>

<!-- Pagination DIV for Demo sub -->
<div id="subpaginate" class="paginationstyle" style="width: 300px; text-align: left">
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">
var galleryx=new virtualpaginate("virtualsub", 1)
galleryx.buildpagination("subpaginate")
</script>


</div>

<div class="virtualpage2">
<b><a href="#">Interstitial Content Box</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses <b>Ajax</b> to fetch and display the contents of external pages on your server as an interstitial.
</div>

<div class="virtualpage2">
<b><a href="#">Omni Slide Menu</a></b> <span class="credits">Credits: John Scheuer</span><br>
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.
</div>

<div class="virtualpage2">
<b><a href="#">Custom Cursor Script II (Crosshair mouse cursor)</a></b> <span class="credits">Credits: Webtoolkit.info</span><br>
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!
</div>

<div class="virtualpage2">
<b><a href="#">Drop Down Tab Menu</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.
</div>


</div>

<!-- Pagination DIV for Demo 2 -->
<div id="scriptspaginate" class="paginationstyle" style="width: 400px">
<a href="#" rel="first">F</a> <a href="#" rel="previous">Prev</a> <span class="paginateinfo" style="margin: 0 30px; font-weight: bold"></span> <a href="#" rel="next">Next</a> <a href="#" rel="last">L</a>
</div>

<!-- Initialize Demo 2 -->
<script type="text/javascript">
var newscripts=new virtualpaginate("virtualpage2", 1, "div") //Let script know you're using "p" tags as separator (instead of default "div")
newscripts.buildpagination("scriptspaginate")
</script>

[cz231]

I don't know why but in my browser (IE and FF) it still appears mashed together and unpaginated. Any suggestions?

[ddadmin]

Did you modify the default CSS that came with this script? Sounds like a CSS height issue.

[cz231]

Sorry it was a stupid mistake. I tried it in Firefox it didn't work but in IE it did. For some reason before in IE it didn't work I don't know why, but now it does so thanks. (The people who will view the site will probably view it in IE so I don't think Firefox matters unless its a quick fix)