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.

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.

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.

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?

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.

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.

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.

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!

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>

---

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