Results 1 to 4 of 4

Thread: Virtual Pagination script v2.0 - scroll to #top

  1. #1
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Virtual Pagination script v2.0 - scroll to #top

    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.
    Last edited by ddadmin; 02-17-2009 at 07:48 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

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

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

    Code:
    <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.
    DD Admin

  3. #3
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by harrykitten View Post
    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!

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
  •