PDA

View Full Version : Virtual Pagination script v2.1 list in text displays incorrectly



Zephyr22
01-21-2010, 03:47 PM
1) Script Title: Virtual Pagination script v2.1

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

3) Describe problem:
I downloaded this script to paginate a large text file into multiple pages. In the demo, I added an unordered list to on of the paragraphs in item one. The proble is the list display on all pages show.
Here is a link to the file: http://www.macomblegalservices.com/vd_demo.html

Is there a way to include a list in the text area of this script an have it properly display?

Thanks in advance

jscheuer1
01-21-2010, 04:28 PM
Looks fine to me:



list item 1
list item 2
list item 3



What's it look like there? Or, if the above is not what you were expecting, what were you expecting?

Zephyr22
01-21-2010, 04:37 PM
It displays fine, but the list should only appear one page 1. If you click page2, 3,4,5 or 6 it shows up on each page.

jscheuer1
01-21-2010, 06:07 PM
Aha! I see. Use div instead of p:


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

<div 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.
</div>

<div 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.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>

<div 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.
</div>

<div 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!
</div>

<div 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.
</div>

<div 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.
</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>



Don't forget to change it in the script part too (highlighted):


<!-- Initialize Demo 2 -->
<script type="text/javascript">

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

newscripts.buildpagination(["scriptspaginate", "scriptspaginate2"])

</script>

The reason why p won't work is that of all the block level elements, p is the only one that self closes. It will self close if there is nothing more, or if it encounters another block level element like a ul, another p, a div, etc.

Zephyr22
01-21-2010, 11:42 PM
Thanks.

That did the trick.:)