Virtualpaginate.js Help

[omarkhan]

Hi,

I'm using the virtualpaginate.js script on a web page to display product information for my employer. Since the website is still under development, I am experimenting with the Javascript, CSS and JQuery to make it visually appealing.

Now I've used the virtualpaginate.js script on our products page which will show multiple products on the same page via <DIV> tags. I setup the script and its working perfectly fine and looks good on the page too. Now that the script is up and running, I want to change a few things around to make it easy for the user to find information on the products they are interested in.

I planning on adding direct links to the virtual page above the information tab so users can directly jump to their product of choice and link it from another page also. Anyway, that is a different case, My dilemma comes in when I want to have custom names in the <select></select> menu.

Currently, the drop down menu show's "Page 1 of XX" as a default, I checked the documentation and there is a way of changing that and adding my own custom names which would by synced so the drop down menu changes if the user clicks on the Next or Previous arrows. As a function of the script, the names in the drop down change and the menu can be used to jump to a page directly also.

I hope I've explained everything enough for you guys to understand what I'm trying to achieve here. I read the virtualpaginate.js documentation and there is a way of adding custom lists in the drop down menu but the problem is I don't understand how to use it. Since I'm not a professional developer, I have limited knowledge of JS etc. The documentation gives the following example

By default if your Pagination DIV contains the "flatview" SPAN element, or the SELECT menu element, the script will dynamically create sequential numbers ("1", "2", "3") inside that SPAN as pagination links:


<div id="paginatediv" class="paginationstyle">
<a href="#" rel="previous" style="margin-right: 100px">Prev</a> <span class="flatview"></span><a href="#" rel="next">Next</a>
</div>

OR


<div id="paginatediv" class="paginationstyle">
<a href="#" rel="previous" style="margin-right: 100px">Prev</a> <select><//select><a href="#" rel="next">Next</a>
</div>

To specify your own custom text in place of those numbers, when calling pagecontent.buildpagination() above, pass in an array of your own custom text for its optional 2nd parameter:


pagecontent.buildpagination(["paginatediv"], ["horses", "cows", "rabbits", "donkeys"])

Here's the link to the page I have the script running on: http://demo.t3-interactive.com/bld/products.html

I would REALLY appreciate help with this as my boss will be asking me the progress in a few days and I really want to give him something workable.

Thanks!

[vwphillips]

I could not get this to work from the documentation but

change


virtualpaginate.prototype.paginate_build_selectmenu=function(paginatedropdown, divpos, anchortext){
var instanceOfBox=this
var anchortext=anchortext || new Array()
this.selectmenupresent=1
for (var i=0; i<this.pagecount; i++){
if (this.selecttext&&this.selecttext[i]) //if custom anchor text for this link exists, use anchor text as each OPTION's text
paginatedropdown.options[i]=new Option(this.selecttext[i], i)
else //else, use auto incremented, sequential numbers
paginatedropdown.options[i]=new Option("Page "+(i+1)+" of "+this.pagecount, i)
}
paginatedropdown.selectedIndex=this.currentpage
setTimeout(function(){paginatedropdown.selectedIndex=instanceOfBox.currentpage}, 500) //refresh currently selected option (for IE's sake)
paginatedropdown.onchange=function(){
instanceOfBox.navigate(this.selectedIndex)
}
this.selectmenu[divpos]=paginatedropdown
this.selectmenu[divpos].selectedIndex=this.currentpage //"Select" current page's corresponding option
}


and


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

whatsnew.selecttext=['text 1','text 2','text 3'];
whatsnew.buildpagination(["listingpaginate"])

[omarkhan]

Thanks for your reply Vic. I'd appreciate it if you could clarify something since I'm not a coder.

When you say change

if (this.selecttext&&this.selecttext[i]) //if custom anchor text for this link exists, use anchor text as each OPTION's text
paginatedropdown.options[i]=new Option(this.selecttext[i], i)

What exactly am I supposed to change? Should I change the text 1 parts to the names of my individual products in whatsnew.selecttext=['text 1','text 2','text 3'];?

[vwphillips]

the red line defines the text of the select list options


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

whatsnew.selecttext=['text 1','text 2','text 3'];
whatsnew.buildpagination(["listingpaginate"])



find the function virtualpaginate.prototype.paginate_build_selectmenu

and replace it with


virtualpaginate.prototype.paginate_build_selectmenu=function(paginatedropdown, divpos, anchortext){
var instanceOfBox=this
var anchortext=anchortext || new Array()
this.selectmenupresent=1
for (var i=0; i<this.pagecount; i++){
if (this.selecttext&&this.selecttext[i]) //if custom anchor text for this link exists, use anchor text as each OPTION's text
paginatedropdown.options[i]=new Option(this.selecttext[i], i)
else //else, use auto incremented, sequential numbers
paginatedropdown.options[i]=new Option("Page "+(i+1)+" of "+this.pagecount, i)
}
paginatedropdown.selectedIndex=this.currentpage
setTimeout(function(){paginatedropdown.selectedIndex=instanceOfBox.currentpage}, 500) //refresh currently selected option (for IE's sake)
paginatedropdown.onchange=function(){
instanceOfBox.navigate(this.selectedIndex)
}
this.selectmenu[divpos]=paginatedropdown
this.selectmenu[divpos].selectedIndex=this.currentpage //"Select" current page's corresponding option
}

[omarkhan]

Great. Thanks