Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Virtual Pagination script: jump to top next content

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default Virtual Pagination script: jump to top next content

    1) Script Title: Virtual Pagination script v2.1

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

    3) Describe problem: Very nice script, but when clicking on a link to the next content, when that link is placed at the bottom of the content, it would be nice if the next content is shown as from its top, and not that he next content is shown at the same height as where the link to that next content is shown. In other words: when clicking to see next content, it would be nice if that next content would be shown from its top.

    If you understand it, please let me know if this is possible and how to achieve it.
    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    OK, well there doesn't seem to be a situation like that on the demo page, so I created one by editing the markup for the first demo, adding id, height, and overflow-y to the container div:

    Code:
    <div id="listingpaginate" class="paginationstyle">
    <a href="#" rel="previous" class="imglinks"><img src="35.gif" /></a> <select></select> <a href="#" rel="next" class="imglinks"><img src="36.gif" /></a>
    </div>
    
    <div id="scroller1" style="max-width: 450px; border: 1px dashed gray; padding: 10px; height: 300px; overflow-y: scroll;">
    
    content paragraphs removed to save space
    
    </div>
    By giving it an explicit height less than the height of it contents and an overflow-y of scroll, it will have a scrollbar, and you can scroll it, and if you don't return it to its top and change the content, it will be somewhere other than the top when the next content appears. I added the id so I would have a way of accessing it. The paginate div already had an id. I then added code in the console, which you can add as this script as long as it comes after the markup for the pagination instance, it's holder and contents:

    Code:
    <script>
    (function(){
    	var pg = document.getElementById('listingpaginate'), pgls = pg.getElementsByTagName('a'), pgselect = pg.getElementsByTagName('select')[0];
    	function resettop(){document.getElementById('scroller1').scrollTop = 0;}
    	pgls[0].addEventListener('click', resettop, false);
    	pgls[1].addEventListener('click', resettop, false);
    	pgselect.addEventListener('change', resettop, false);
    })();
    </script>
    That way, each time a paginate link is clicked or the paginate select is changed, the content holder will scroll to the top. If you're using additional methods for loading content, additional code may be necessary, depending upon what you're doing.

    If you want more help, please post a link to the page on your site that has the problematic code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    A different solution occurred to me for this. Instead of what I was suggesting, you could just edit the script here (a little past half way down in the code), adding the highlighted line:

    Code:
    // -------------------------------------------------------------------
    // PRIVATE: showpage(pagenumber)- Shows a page based on parameter passed (0=page1, 1=page2 etc)
    // -------------------------------------------------------------------
    
    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
    	this.pieces[0].parentNode.scrollTop = 0;
    	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"
    	}
    	if (this.persist){ //if persistence enabled
    		virtualpaginate.setCookie("dd_"+this.piececlass, this.currentpage)
    	}
    	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
    	}
    }
    Save and use that version. That also worked for me on the demo page.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chechu (09-25-2017)

  5. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    Thanks for your support, John.
    It doesn't entirely work for me: see here.
    Would there be something else that needs to be added, please?

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Yes sure, in that setup it's the entire page which is scrolling. So instead of:

    Code:
    this.pieces[0].parentNode.scrollTop = 0;
    You would want:

    Code:
    window.scrollTo(0, 0);
    The (0, 0) there by the way are x, y coordinates. So if you don't want the page going all the way to the top, determine the y offset that you want and use that.

    For that particular page:

    Code:
    window.scrollTo(0, 500);
    seemed good.

    You can actually set different y coordinates for different pages and/or different pagination features on the same page, still using the same script. If you need to do either of those, let me know.
    Last edited by jscheuer1; 09-25-2017 at 04:26 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chechu (09-25-2017)

  8. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    Thanks, John, really works well.

    Just a few questions:
    - is it possible to change the y coordinates into an id that can be referred to at the title of that section, so that on all devices it will be at the same height
    - how can I place multiple paginations on the same page
    - is it possible to have a link f.ex. to page 6 into the pagination, or will it always be the url of the page no matter what page in the pagination I'm viewing

    Hopefully you can help me out with this; really appreciate it.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Yes, to the first. And since I see you already have jQuery on the page, it's easier. Select your anchor element and give it an id, say - paginatetop. Then change the code to:

    Code:
    window.scrollTo(0, $('#paginatetop').offset().top);
    Which will usually work. I'm not aware of any code which would work in all cases. Things that might trip it up are margins on the HTML element (which are usually absent) or the zoom state of the browser. The first is usually small if it exists at all and if not, you could manually correct for it by adding or subtracting to the $('#paginatetop').offset().top result. If the browser zooms. usually it will take into account everything for you. Sometimes though a browser may not.

    As for the second question, there are multiple paginations on the demo page, so just follow the instructions. If you need to set separate "tops", let me know.

    As for the third question, this page:

    http://www.dynamicdrive.com/dynamici...nation_ref.htm

    explains (among other things) how to call a particular pagination script's content via a URL parameter when linking to the page with the pagination script on it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    Hey John,
    This solution
    Code:
    window.scrollTo(0, $('#paginatetop').offset().top);
    doesn't seem to work, as the content is all gone now: http://croatia-luxury-villa.com/dalmatia/Aindex.php
    Thanks for the other input!

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    jQuery must be loaded before the pagination script. Sorry, forgot to check that. Means you have to put:

    Code:
      <script src="https://croatia-luxury-villa.com/js/jquery.min.js"></script>
    before:

    Code:
        <script src="http://croatia-luxury-villa.com/js/virtualpaginate.js"></script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    Switched it, but still doesn't work.
    And could this have something to do with it too: http://www.dynamicdrive.com/forums/s...nu-not-working

Similar Threads

  1. Virtual Pagination script v2.0
    By chas in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-01-2009, 02:23 AM
  2. Help with Merging Virtual Pagination & Scrollable Content Scripts
    By mmalik in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-02-2009, 06:08 PM
  3. Virtual Pagination within Tabbed Content
    By touchnova in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 09-13-2008, 03:31 PM
  4. Virtual pagination and run active content
    By orion3000 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-15-2008, 04:52 AM
  5. Altering a content loop script for Virtual Pagination
    By JBottero in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-03-2007, 07:20 PM

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
  •