Virtual Pagination script v2.0 - scroll to #top

[harrykitten]

1) Script Title: Virtual Pagination script v2.0

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

3) Describe problem: The script works great, I'd just like a little modification that try as I might I've not managed to implement.

When you have a large enough "page" and click the pagination links (which I have under my content) I'd like it to scroll to the top of the new "page". Instead the browser either jumps around kinda randomly or just stays at the bottom at the pagination links. It'd be so much better if it automatically went to the top of the new page content.

Thanks.

[ddadmin]

One easy way is simply to give the outermost DIV that contains the paginated contents a unique ID, for example:

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

//paginated contents defined here

</div>

Then at the end of function showpage() inside the .js file, add the 3 line in red that when run scrolls the page back up to the desired location on the page:

	if (this.cpspan.length>0){ //if <span class="paginateinfo> element is present, update it with the most current info (ie: Page 3/4)
		for (var p=0; p<this.cpspan.length; p++)
			this.cpspan[p].innerHTML='Page '+(this.currentpage+1)+'/'+this.pagecount
	}
	var contentArea=document.getElementById(config.divid)
	if (contentArea && contentArea.scrollIntoView)
		document.getElementById(config.divid).scrollIntoView()
}

Before the above can work though, you need to tell the script when initializing it the ID you've given the outermost DIV:

<script type="text/javascript">

var pagecontent=new virtualpaginate({
 divid: "contentarea",
 piececlass: "virtualpage", //class of container for each piece of content
 piececontainer: "div", //container element type (ie: "div", "p" etc)
 pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
 defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
 persist: false //Remember last viewed page and recall it when user returns within a browser session?
})

pagecontent.buildpagination(["paginatediv"])

</script>

Note that I've yet to test the above, but it should work.

[harrykitten]

Wonderful, thanks so much!

Was actually missing

this.divid = config.divid // Container div to scroll to top

in the top function so that the config could be read later.

[dcmiltown]

Wonderful, thanks so much!

Was actually missing

this.divid = config.divid // Container div to scroll to top

in the top function so that the config could be read later.

I tried to implement this but for some reason it breaks the pagination...

I'm using the version with the drop down, so my script looks like this:

whatsnew.buildpagination(["listingpaginate"], ["1: Introduction", "2: What is BMS?","3: Leveraging the Existing ALM Environment", "4: Borland TeamDemand: Collaborative Alignment", "5: Borland TeamAnalytics: ALM Intelligence", "6: TeamFocus", "7: Traditional vs. Agile Project Management", "8: TeamFocus Basics", "9: Exercise: Using TeamFocus Views", "10: Creating a Project", "11: Exercise: Creating a Project", "12: What's Next?"])

I've implemented the solution above, adding

this.divid=config.divid

into the main virtualpaginate(config) function, as well as adding the previous code into the showpage function.

When I try to load the page the menu clears, so I must be doing something incorrectly. I'm not a java expert, just beginning, but I'm curious if using the drop down is going to change the way this code functions or should it work correctly?

Any ideas what I'm doing wrong? Let me know if I should post anything else. Much appreciated!