PDA

View Full Version : Multiple occurrences of Virtual Pagination script v2.1



spardacus
01-07-2010, 04:23 PM
1) Script Title: Virtual Pagination script v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm

3) Describe problem: Placing two occurrences of the code on one web page causes the second pagination content box to be empty - pushing the content to the first navigation set.

How can I place two unique and independent occurrences of the pagination tool to control multiple editorial sections?

Thank you for your help ... the tool is AWESOME!

jscheuer1
01-07-2010, 05:00 PM
Follow the step by step instructions on the demo page. They will give you 5 on one page. You should see a pattern emerge. Certain things in each pagination's markup and its accompanying initialization must be unique. Otherwise, you will get what you are describing.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

spardacus
01-14-2010, 01:45 PM
Thank you for jumping in jscheuer1 ...

I am trying to use multiple occurrences of the text box option (of course with independent data displayed in each set). I tried to simply drop copies of the code one after another, but ... well, here is the sample ...

http://www.williamsfire.com/resources/finalpages/DSSpagination.html

I appreciate your help.

jscheuer1
01-14-2010, 03:52 PM
Well, as I said, if you look at the demo code you are supposed to copy from the page (not the demo page's source code) you will see certain things that have to be unique. They are:


The variable name used to hold the value of of each new virtualpaginate instance.
The piececlass.
The id used for the buildpagination command.


These must be reflected both in your on page script code, as well as in the markup for each virtualpaginate instance. For example:


<body>
<!-- Beginning of unit 1 -->


<div id="listingpaginate1" class="paginationstyle">
<a href="#" rel="previous" class="imglinks"><img alt="" src="http://img293.imageshack.us/img293/8643/roundleftig4.gif"></a> <select><option value=""></option></select> <a href="#" rel="next" class="imglinks"><img alt="" src="http://img183.imageshack.us/img183/3816/roundrightat5.gif"></a>
</div>

<div style="width: 450px; border: 1px dashed gray; padding: 10px;">

<p class="virtualpage1 hidepiece">
<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.
</p>

<p class="virtualpage1 hidepiece">
<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.
</p>

<p class="virtualpage1 hidepiece">
<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.
</p>

<p class="virtualpage1 hidepiece">
<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!
</p>

<p class="virtualpage1 hidepiece">
<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.

</p>

<p class="virtualpage1 hidepiece">
<b><a href="#">Featured Content Slider</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.
</p>

</div>

<script type="text/javascript">

var whatsnew1=new virtualpaginate({
piececlass: "virtualpage1",
piececontainer: 'p', //Let script know you're using "p" tags as separator (instead of default "div")
pieces_per_page: 2,
defaultpage: 0,
persist: true
})

whatsnew1.buildpagination(["listingpaginate1"])

</script>

<!-- End of unit 1 -->
<br>


<!-- Beginning of unit 2 -->


<div id="listingpaginate2" class="paginationstyle">
<a href="#" rel="previous" class="imglinks"><img alt="" src="http://img293.imageshack.us/img293/8643/roundleftig4.gif"></a> <select><option value=""></option></select> <a href="#" rel="next" class="imglinks"><img alt="" src="http://img183.imageshack.us/img183/3816/roundrightat5.gif"></a>
</div>

<div style="width: 450px; border: 1px dashed gray; padding: 10px;">

<p class="virtualpage2 hidepiece">
<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.
</p>

<p class="virtualpage2 hidepiece">
<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.
</p>

<p class="virtualpage2 hidepiece">
<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.
</p>

<p class="virtualpage2 hidepiece">
<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!
</p>

<p class="virtualpage2 hidepiece">
<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.

</p>

<p class="virtualpage2 hidepiece">
<b><a href="#">Featured Content Slider</a></b> <span class="credits">Credits: Dynamic Drive</span><br>
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.
</p>

</div>

<script type="text/javascript">

var whatsnew2=new virtualpaginate({
piececlass: "virtualpage2",
piececontainer: 'p', //Let script know you're using "p" tags as separator (instead of default "div")
pieces_per_page: 2,
defaultpage: 0,
persist: true
})

whatsnew2.buildpagination(["listingpaginate2"])

</script>

<!-- End of unit 2 -->


</body>

spardacus
01-14-2010, 04:20 PM
OUTSTANDING!

'Preciate your help and your patience ... I am trying to learn and this has been a helpful exercise.

Thank you.