Virtual Pagination Script -- embed a jscript scroll ?

**darkus** · 12-11-2010, 03:37 AM

1) Script Title: Virtual Pagination Script

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

3) Describe problem:
I have this script running on a very long page with the pagination tabs above and below the content div. When a user clicks on one of the tabs at the bottom of the page, it would be great if at the same time, the page would scroll back up to the top so that the user doesnt have to keep scrolling up manually each time he changes the virtual page.

Thanks!!

**vwphillips** · 12-11-2010, 11:21 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/virtualpaginate.js">

/***********************************************
* Virtual Pagination script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">
/*<![CDATA[*/
.hidepiece {
  width:400px;height:1500px;background-Color:red;
}

/*]]>*/
</style>
</head>

<body>
<!-- Virtual Pagination Demo 1  -->
<h3>Demo 1:</h3>

<!-- Additional Pagination DIV for Demo 1 (should be an empty DIV)-->
<div id="gallerypaginate2" class="paginationstyle"></div>

<div style="width: 300px;">

<div class="virtualpage hidepiece">
<img src="http://img25.imageshack.us/img25/8442/castlei.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>

</div>

<!-- Pagination DIV for Demo 1 -->
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next???</a>
</div>

<!-- Initialize Demo 1 -->
<script type="text/javascript">

var gallery=new virtualpaginate({
	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.
	wraparound: false,
	persist: false //Remember last viewed page and recall it when user returns within a browser session?
})

gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])

</script>

<a href="javascript:gallery.navigate(2)">Go to 3rd page within "gallery"</a>

<hr style="margin-top: 35px; color: red" />

<script type="text/javascript">
/*<![CDATA[*/


function ScrollTop(id,top){
 var obj=document.getElementById(id);
 var span=obj.getElementsByTagName('SPAN')[0];
 var lks=span.getElementsByTagName('A')
 for (var ary=[],z0=0;z0<lks.length;z0++){
  ary[z0]=lks[z0];
 }
 for (var a,z1=0;z1<ary.length;z1++){
  a=document.createElement('A');
  span.insertBefore(a,ary[z1]);
  a.appendChild(ary[z1]);
  this.addevt(a,'mouseup','scroll');
 }
 this.top=top||0;
}

ScrollTop.prototype={

 scroll:function(){
  window.scrollTo(0,this.top);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}


new ScrollTop('gallerypaginate',0);
/*]]>*/
</script>










</body>

</html>

**darkus** · 12-11-2010, 02:49 PM

Excellent, it not jumps to the top of the screen, exactly what I was looking for, but one problem, this does seem to interfere with the highlighting of the current tab on the bottom row. So when I click on the 3rd item, the 3rd tab highlights on the top bar, but the 1st one highlights on the bottom tab set.

**vwphillips** · 12-11-2010, 03:20 PM

try

Code:

function ScrollTop(id,top){
 var obj=document.getElementById(id);
 var span=obj.getElementsByTagName('SPAN')[0];
 var lks=span.getElementsByTagName('A')
 for (var ary=[],z0=0;z0<lks.length;z0++){
  ary[z0]=lks[z0];
 }
 for (var a,z1=0;z1<ary.length;z1++){
  a=document.createElement('SPAN');
  span.insertBefore(a,ary[z1]);
  a.appendChild(ary[z1]);
  this.addevt(a,'mouseup','scroll');
 }
 this.top=top||0;
}

or posta link to your page

**darkus** · 12-11-2010, 07:16 PM

Same result unforunatly

The updated code in the post above looks identical to the original reply tho?

If it matters, i'm using the Virtual pagination script with custom names for the tab titles.

ie. gallery.buildpagination(["gallerypaginate", "gallerypaginate2"], ['Dog','Cat','House'])

**darkus** · 12-11-2010, 07:25 PM

Sorry, im an idiot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! i copy pasted the wrong thing.

It works now, big thanks man!!

Thread: Virtual Pagination Script -- embed a jscript scroll ?

Thread Tools

Search Thread

Virtual Pagination Script -- embed a jscript scroll ?

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

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

Bookmarks

Bookmarks

Posting Permissions