2 Vertical scroller in same page

**orhun** · 08-20-2009, 12:59 PM

I am using http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm ths script for vertical scroller..

but when i try to make 2 div area in same page.. the second one doesnt work..

could someone revise/update/rewrite the motiongallery2.js script for me?

**orhun** · 08-20-2009, 06:36 PM

could someone help me?

**vwphillips** · 08-21-2009, 09:02 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>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;overflow:hidden;width:255px;height:400px;border:solid black 1px;
}
#tst1 {
  position:absolute;overflow:hidden;left:300px;;top:320px;width:255px;height:400px;border:solid black 1px;
}

#tst3 {
  position:absolute;overflow:hidden;left:300px;;top:20px;width:400px;height:100px;border:solid black 1px;
}

.slide {
  position:absolute;height:135px;
}

.slide IMG{
  position:relative;left:0px;
}
/*]]>*/
</style>
<script  type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (21-August-2009)
function SS(mde,id,tb,spd){
 this.obj=document.getElementById(id);
 var slide=this.obj.getElementsByTagName('DIV')[0];
 var imgs=slide.getElementsByTagName('IMG');
 this.mde=mde.charAt(0).toUpperCase()=='V'?['top','offsetHeight','height','offsetTop',1]:['left','offsetWidth','width','offsetLeft',0];
 for (var top=0,z0=0;z0<imgs.length;z0++){
  imgs[z0].style.position='absolute';
  imgs[z0].style[this.mde[0]]=(top)+'px';
  top+=imgs[z0][this.mde[1]];
 }
 slide.style[this.mde[2]]=top+'px';
 this.slide=slide;
 this.max=top-this.obj[this.mde[1]];
 this.spd=spd||5;
 this.tb=tb||100;
 this.to=null;
 this.addevt(this.obj,'mousemove','Slide');
 this.addevt(this.obj,'mouseout','Stop');
}

SS.prototype.Slide=function(e){
 clearTimeout(this.to);
 var top=zxcMse(e)[this.mde[4]]-zxcPos(this.obj)[this.mde[4]],inc=0;
 if (top>this.obj[this.mde[1]]-this.tb){
  inc=-(this.tb-(this.obj[this.mde[1]]-top))/this.tb;
 }
 else if (top<this.tb){
  inc=(this.tb-top)/this.tb;
 }
  this.UD(inc);
}

SS.prototype.UD=function(inc){
 var oop=this;
 var top=Math.max(Math.min(this.slide.offsetTop+(this.spd*inc),0),-this.max);
 this.slide.style[this.mde[0]]=Math.max(Math.min(this.slide[this.mde[3]]+(this.spd*inc),0),-this.max)+'px';
 this.to=setTimeout(function(){ oop.UD(inc); },10)
}


SS.prototype.Stop=function(e){
 clearTimeout(this.to);
}

function zxcEventAdd(o,f,e,p) {
 if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return o[f](ev,p);}, false); }
 else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return o[f](ev,p); }); }
 else {
  var prev=o['on'+e];
  if (prev){ o['on'+e]=function(ev){ prev(ev); o[f](ev,p); }; }
  else { o['on'+e]=o[f]; }
 }
}

SS.prototype.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); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
  else o['on'+t]=o[f];
 }
}

function zxcMse(ev){
 if(!ev) var ev=window.event;
 if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
 return [ev.pageX,ev.pageY];
}

function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft;
  rtn[1]+=objp.offsetTop;
  obj=objp;
 }
 return rtn;
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}



/*]]>*/
</script>
</head>

<body>
<div id="tst">
 <div class="slide">
  <img src="http://casadomani.com/images/slideshow/IMG_0907.jpg">'
  <img src="http://casadomani.com/images/slideshow/IMG_0916.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0934.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0928.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0989.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0998.jpg">
 </div>
</div>
<div id="tst1">
 <div class="slide">
  <img src="http://casadomani.com/images/slideshow/IMG_0907.jpg">'
  <img src="http://casadomani.com/images/slideshow/IMG_0916.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0934.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0928.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0989.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0998.jpg">
 </div>
</div>
<div id="tst3">
 <div class="slide">
  <img src="http://casadomani.com/images/slideshow/IMG_0907.jpg">'
  <img src="http://casadomani.com/images/slideshow/IMG_0916.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0934.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0928.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0989.jpg">
  <img src="http://casadomani.com/images/slideshow/IMG_0998.jpg">
 </div>
</div>
<div style="height:2000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
 S=new SS('V','tst',120,5);
 S=new SS('V','tst1',120,10);
 S=new SS('H','tst3',120,10);
/*]]>*/
</script>
</body>

</html>

Thread: 2 Vertical scroller in same page

Thread Tools

Search Thread

2 Vertical scroller in same page

Bookmarks

Bookmarks

Posting Permissions