PDA

View Full Version : 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/dynamicindex17/virtualpagination.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
<!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


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!!