Problem Fix in Virtual Pagination Script

[Strangeplant]

1) Script Title: Virtual Pagination Script

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

3) Describe problem: When calling the showpage() function, it takes you where you want, but leaves the menu in disarray.

This is a really great script, and I'm one of many people who really appreciate it. The use of the showpage() function permits me to have menu links imbeded in any of the menu's virtual pages of the entire virtual page menu. (I can't understand what I just wrote, but you will see.) I'm using it to display many parts to a page, with a flatview menu that looks basically like this:

var pagecontent=new virtualpaginate("virtualpage", 1)
pagecontent.buildpagination("paginatediv", ["intro", "styles", "1", "2", "3", "4", "5", "6", "info"])

Now, in page 1 ("styles"), there are six bullet topic paragraphs that pertain to the various pages, and if you click on the <li>, you should go to the expected page, like this example to go to page 3:

<li class="c0"><a onclick="javascript:pagecontent.showpage(3)">A very long bunch of descriptive text goes here about some topic.</a></li>

To prompt the user to click on the text, I change the hover color by defining a css style like this:

tr.c0:hover, li.c0:hover {
  background-color: #F0C0F0;
}

(Its used elsewhere for the <tr>)
Ok, the problem is that when you use showpage(), and this is discussed in the documentation page at: http://www.dynamicdrive.com/dynamici...nation_ref.htm , it leaves the menu previous page still highlighted, and doesn't highlight the menu page you are going to, in otherwords, the menu is not refreshed and is bogus for further navigation.

Anyway, I was in the middle of writing about the problem, and I fixed it! (I actually just used lines of code that were somewhere else.) so here is my fix to my problem, and if someone could validate that it doesn't otherwise mess things up, it should go to improve the existing most excellent script:

virtualpaginate.prototype.showpage=function(pagenumber){
var totalitems=this.pieces.length //total number of broken up divs
var showstartindex=pagenumber*this.chunksize //array index of div to start showing per pagenumber setting
var showendindex=showstartindex+this.chunksize-1 //array index of div to stop showing after per pagenumber setting
if (this.flatviewpresent)
this.flatviewlinks[this.currentpage].className="" //"Unhighlight" previous page (before this.currentpage increments)
for (var i=0; i<totalitems; i++){
if (i>=showstartindex && i<=showendindex)
this.pieces[i].style.display="block"
else
this.pieces[i].style.display="none"
}
this.currentpage=parseInt(pagenumber)
if (this.cpspan) //if <span class="paginateinfo> element is present, update it with the most current info (ie: Page 3/4)
this.cpspan.innerHTML='Page '+(this.currentpage+1)+'/'+this.pagecount

if (this.flatviewpresent)
this.flatviewlinks[this.currentpage].className="selected" //"Highlight" current page
}

[ddadmin]

Is what you're trying to accomplish basically something similar to what was discussed in this thread, towards the end? http://www.dynamicdrive.com/forums/s...ad.php?t=28380

[Strangeplant]

No, not at all - that other thread is for external page jump into the pagination script (which is a really great thing, but the menu shown is wrong without this fix.) My intent is to contribute a useful fix to a problem that someone else will need, that is, to update the index whenever the showpage() function is invoked and still work correctly for all other uses. This makes the script synchronize the menu with the displayed page.

I cannot see where showpage() would be used without needing to update the menu, so I thought this would be a contribution - whatever.

[ddadmin]

Ah yes I see what you mean now. You're right, showpage() right now when invoked explicitly won't update the selected pagination link to match. Thanks for the code. I'll probably be adding a fix to this the next time the script is updated.