Results 1 to 5 of 5

Thread: Virtualpaginate.js Help

  1. #1
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Virtualpaginate.js Help

    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:

    Code:
    <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

    Code:
    <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:

    Code:
    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!
    Last edited by omarkhan; 05-31-2010 at 07:47 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    I could not get this to work from the documentation but

    change

    Code:
    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

    Code:
    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"])
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    omarkhan (06-10-2010)

  4. #3
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

    When you say change
    Code:
    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'];?

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    the red line defines the text of the select list options

    Code:
    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

    Code:
    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
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #5
    Join Date
    May 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Great. Thanks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •