C Motion slide bar

**z8000783** · 02-03-2014, 12:43 PM

I am using the cmotion script which works well and looks great.

However, I now wish to add a slider bar to control the motion. I have found some slider code which can provide a number between 0 and 100 depending on where the slider has been moved to. From this I can deduce the direction of movement as well.

The problem I am having, though, is linking this to the cmotion javascript code in order the make the gallery move but the code in here is beyond my skill. Has anyone tried this and found a way to get it working?

Many thanks

John

**vwphillips** · 02-04-2014, 01:59 PM

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;left:100px;top:100px;width:600px;height:100px;background-Color:red;border:solid red 1px;
}

#tst .belt {
 position:absolute;left:0px;top:0px;width:600px;height:150px;
}

#tst .belt IMG{
 width:100px;height:100px;
}

#scrollbar {
 position:relative;overflow:hidden;left:100px;top:100px;width:600px;height:20px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}

.slide {
 position:absolute;left:0px;top:0px;width:50px;height:30px;background-Color:red;
}


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

<body>
 <div id="tst" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar" >
  <div class="slide" ></div>
 </div>


<script type="text/javascript">
/*<![CDATA[*/
// Mouse Belt Slider Scroll Bar (o4-Febuary-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/


var zxcMouseBeltSlider={

 init:function(o){
  var oop=this,id=o.ParentID,e=o.MoveEdge,s=o.MaxSpeed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,sb=document.getElementById(o.ScrollBarID),sbs=sb?sb.getElementsByTagName('*')[0]:null;
  if (b){
   b.style.width='30000px';
   b.style.textAlign='left';
   o.p=p;
   o.b=b;
   o.w=p.offsetWidth;
   o.h=p.offsetHeight;
   var lst=b.lastChild,lst=lst.nodeType==1?lst:lst.previousSibling;
   o.lst=lst;
   o.bm=o.w-(o.lst.offsetLeft+o.lst.offsetWidth);
   o.i=0;
   o.x=-1;
   o.s=typeof(s)=='number'&&s>=1?s:5;
   o.e=typeof(e)=='number'&&e>0&&e<o.w/2?e:o.w/4;
   p.style.overflow='hidden';
   this.addevt(document,'mousemove','move',o);
   setInterval(function(){ oop.scroll(o); },30);
   if (sbs){
    o.sbs=sbs;
    o.sbx=0;
    o.sbm=oop.css(sb,'width')-sbs.offsetWidth;
    sb.style.overflow='hidden';
    this.addevt(sbs,'mousedown','down',o);
    this.addevt(document,'mouseup','up',o);
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.p),xy=this.mse(e),x=xy[0]-p[0],y=xy[1]-p[1];
  o.bm=o.w-(o.lst.offsetLeft+o.lst.offsetWidth);
  o.i=(y>0&&y<o.h?x>0&&x<o.e?1-x/o.e:x>o.w-o.e&&x<o.w?-(x-o.w+o.e)/o.e:0:0)*o.s;
  o.sbs?this.sbmove(o,e):null;
 },

 scroll:function(o,e){
  var x=Math.max(Math.min(o.x+o.i,0),o.bm);
  if (x!=o.x){
   this.xy(o,x);
  }
  o.x=x;
 },

 xy:function(o,x){
  o.b.style.left=x+'px';
  o.sbs?o.sbs.style.left=o.sbm*x/o.bm+'px':null;
  typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
 },

 down:function(o,e){
  o.xy=this.mse(e);
  return this.ertn;
 },

 sbmove:function(o,e){
  if (o.xy){
   var xy=this.mse(e),x=Math.min(Math.max(parseInt(this.css(o.sbs,'left'))+xy[0]-o.xy[0],0),o.sbm),x=o.bm*x/o.sbm;
   this.xy(o,x);
   o.xy=xy;
   o.x=x;
   return this.ertn;
  }
 },

 up:function(o,e){
  o.xy=null;
 },

 ertn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 mse:function(e){
  var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
  return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
 },

 pos:function(o){
  var r=[0,0];
  while(o){
   r[0]+=o.offsetLeft;
   r[1]+=o.offsetTop;
   o=o.offsetParent;
  }
  return r;
 },

 css:function(o,p){
  return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
 },

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


}

zxcMouseBeltSlider.init({
 ParentID:'tst',           // the unique ID name of the belt parent DIV.        (string)
 MoveEdge:100,             //(optional) the edge distance to scroll the belt.   (number, default = parent size/4)
 MaxSpeed:5,               //(optional) the maximum scroll speed.               (number, default = 5)
 ScrollBarID:'scrollbar',  //(optional) the unique ID name of the scroll bar.   (string, default = no scroll bar)
 OnScroll:function(o,p,m){ //(optional) a function to call when the belt moves. (function, default = no function call)
  // o = the intance object
  // p = the belt position
  // m = the minimum belt position

 }
});


/*]]>*/
</script>
</body>

</html>

**z8000783** · 02-05-2014, 07:32 AM

Just the job.

Many thanks, Vic.

**z8000783** · 04-25-2014, 01:17 PM

Hi Vic, hope you are still around.

Just implementing the slider and need to set up to 4 up n the same page.

What's the easiest way of doing this?

Regards John

**Jay Dog** · 04-25-2014, 03:31 PM

Hi,

this looks like something I could do with myself... I was just about to post a question about how to create a slider similar to the one on the right of the video area:

http://dixonsta.com/index.php/hide-titles/29-mysentence

Could the slide menu be vertical instead of horizontal?

I'll have a play with this and see what I can come up with.

**vwphillips** · 04-25-2014, 03:34 PM

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[*/

.cmotion {
 position:relative;left:50px;top:10px;width:600px;height:100px;background-Color:red;border:solid red 1px;margin-Top:50px;
}

.cmotion .belt {
 position:absolute;left:0px;top:0px;;
}

.cmotion .belt IMG{
 width:100px;height:100px;
}

.scrollbar {
 position:relative;overflow:hidden;left:50px;top:10px;width:600px;height:20px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}

.slide {
 position:absolute;left:0px;top:0px;width:50px;height:30px;background-Color:red;
}


.cmotionV {
 position:absolute;left:700px;top:10px;width:100px;height:300px;background-Color:red;border:solid red 1px;margin-Top:50px;
}

.cmotionV .belt {
 position:absolute;left:0px;top:0px;;
}

.cmotionV .belt IMG{
 width:100px;height:100px;
}

.scrollbarV {
 position:absolute;overflow:hidden;left:810px;top:55px;width:20px;height:300px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}

.slideV {
 position:absolute;left:0px;top:0px;width:30px;height:30px;background-Color:red;
}

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

<body>
 <div id="tst" class="cmotion" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar" class="scrollbar" >
  <div class="slide" ></div>
 </div>

 <div id="tst2" class="cmotion" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar2" class="scrollbar" >
  <div class="slide" ></div>
 </div>

 <div id="tst3" class="cmotionV" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar3" class="scrollbarV" >
  <div class="slideV" ></div>
 </div>

 <div id="tst4" class="cmotionV" style="position:relative;left:100px;top:20px;margin:20" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar4" class="scrollbar"style="width:200px;top:20px;" >
  <div class="slide" ></div>
 </div>



<script type="text/javascript">
/*<![CDATA[*/
// Mouse Belt Slider Scroll Bar (25-April-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/


var zxcMouseBeltSlider={

 init:function(o){
  var oop=this,id=o.ParentID,e=o.MoveEdge,s=o.MaxSpeed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,sb=document.getElementById(o.ScrollBarID),sbs=sb?sb.getElementsByTagName('*')[0]:null;
  if (b){
   var w=p.offsetWidth,h=p.offsetHeight,m=h>w?[1,'top','height','offsetTop','offsetHeight']:[0,'left','width','offsetLeft','offsetWidth'];
   if (m[0]==0){
    b.style.width='30000px';
    b.style.textAlign='left';
   }
   o.p=p;
   o.m=m;
   o.b=b;
   o.w=w;
   o.h=h;
   var lst=b.lastChild,lst=lst.nodeType==1?lst:lst.previousSibling;
   o.lst=lst;
   o.bm=(o.m[0]==0?o.w:o.h)-(o.lst[o.m[3]]+o.lst[o.m[4]]);
   o.i=0;
   o.x=-1;
   o.s=typeof(s)=='number'&&s>=1?s:5;
   o.e=typeof(e)=='number'&&e>0&&e<(m[0]==0?o.w:o.h)/2?e:(m[0]==0?o.w:o.h)/4;
   p.style.overflow='hidden';
   this.addevt(document,'mousemove','move',o);
   setInterval(function(){ oop.scroll(o); },30);
   if (sbs){
    w=sb.offsetWidth,h=sb.offsetHeight,m=h>w?[1,'top','height','offsetTop','offsetHeight']:[0,'left','width','offsetLeft','offsetWidth'];
    o.sm=m;
    o.sbs=sbs;
    o.sbx=0;
    o.sbm=oop.css(sb,m[2])-sbs[m[4]];
    sb.style.overflow='hidden';
    this.addevt(sbs,'mousedown','down',o);
    this.addevt(document,'mouseup','up',o);
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.p),xy=this.mse(e),x=xy[0]-p[0],y=xy[1]-p[1],m=o.m[0]==0?x:y,s=o.m[0]==0?o.w:o.h;
  o.bm=(o.m[0]==0?o.w:o.h)-(o.lst[o.m[3]]+o.lst[o.m[4]]);
  o.i=(y>0&&y<o.h&&x>0&&x<o.w?m<o.e?1-m/o.e:m>s-o.e&&m<s?-(m-s+o.e)/o.e:0:0)*o.s;
  o.sbs?this.sbmove(o,e):null;
 },

 scroll:function(o,e){
  var x=Math.max(Math.min(o.x+o.i,0),o.bm);
  if (x!=o.x){
   this.xy(o,x);
  }
  o.x=x;
 },

 xy:function(o,x){
  o.b.style[o.m[1]]=x+'px';
  o.sbs?o.sbs.style[o.sm[1]]=o.sbm*x/o.bm+'px':null;
  typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
 },

 down:function(o,e){
  o.xy=this.mse(e)[o.sm[0]];
  return this.ertn;
 },

 sbmove:function(o,e){
  if (o.xy){
   var xy=this.mse(e)[o.sm[0]],x=Math.min(Math.max(parseInt(this.css(o.sbs,o.sm[1]))+xy-o.xy,0),o.sbm),x=o.bm*x/o.sbm;
   this.xy(o,x);
   o.xy=xy;
   o.x=x;
   return this.ertn;
  }
 },

 up:function(o,e){
  o.xy=null;
 },

 ertn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 mse:function(e){
  var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
  return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
 },

 pos:function(o){
  var r=[0,0];
  while(o){
   r[0]+=o.offsetLeft;
   r[1]+=o.offsetTop;
   o=o.offsetParent;
  }
  return r;
 },

 css:function(o,p){
  return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
 },

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


}

zxcMouseBeltSlider.init({
 ParentID:'tst',         // the unique ID name of the belt parent DIV.                 (string)
 MoveEdge:100,             //(optional) the edge distance to scroll the belt.            (number, default = parent size/4)
 MaxSpeed:5,               //(optional) the maximum scroll speed.                        (number, default = 5)
 ScrollBarID:'scrollbar',  //(optional) the unique ID name of the scroll bar.            (string, default = no scroll bar)
 OnScroll:function(o,p,m){ //(optional) a function to call when the belt moves.          (function, default = no function call)
  // o = the intance object
  // p = the belt position
  // m = the minimum belt position
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst2',
 MoveEdge:100,
 MaxSpeed:5,
 ScrollBarID:'scrollbar2',
 OnScroll:function(o,p,m){
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst3',
 MoveEdge:50,
 MaxSpeed:5,
 ScrollBarID:'scrollbar3',
 OnScroll:function(o,p,m){
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst4',
 MoveEdge:50,
 MaxSpeed:5,
 ScrollBarID:'scrollbar4',
 OnScroll:function(o,p,m){
 }
});



/*]]>*/
</script>
</body>

</html>

**z8000783** · 04-25-2014, 06:44 PM

Brilliant, thanks Vic

What would be a reasonable donation?

**vwphillips** · 04-26-2014, 12:58 PM

What would be a reasonable donation?

what ever you can afford, it is a good cause

I have added some additional options

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[*/

.cmotion {
 position:relative;left:50px;top:10px;width:600px;height:100px;background-Color:red;border:solid red 1px;margin-Top:50px;
}

.cmotion .belt {
 position:absolute;left:0px;top:0px;;
}

.cmotion .belt IMG{
 width:100px;height:100px;float:left;
}

.scrollbar {
 position:relative;overflow:hidden;left:50px;top:10px;width:600px;height:20px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}

.slide {
 position:absolute;left:0px;top:0px;width:50px;height:30px;background-Color:red;
}


.cmotionV {
 position:absolute;left:700px;top:10px;width:100px;height:300px;background-Color:red;border:solid red 1px;margin-Top:50px;
}

.cmotionV .belt {
 position:absolute;left:0px;top:0px;;
}

.cmotionV .belt IMG{
 width:100px;height:100px;
}

.scrollbarV {
 position:absolute;overflow:hidden;left:810px;top:55px;width:20px;height:300px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}

.slideV {
 position:absolute;left:0px;top:0px;width:30px;height:30px;background-Color:red;
}

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

<body>
 <div id="tst" class="cmotion" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar" class="scrollbar" >
  <div class="slide" ></div>
 </div>

 <div id="tst2" class="cmotion" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
  </div>
 </div>

 <div id="scrollbar2" class="scrollbar" >
  <div class="slide" ></div>
 </div>

 <div id="tst3" class="cmotionV" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
  </div>
 </div>

 <div id="scrollbar3" class="scrollbarV" >
  <div class="slideV" ></div>
 </div>

 <div id="tst4" class="cmotionV" style="position:relative;left:100px;top:20px;margin:20" >
  <div class="belt" >
   <img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
   <img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
   </div>
 </div>

 <div id="scrollbar4" class="scrollbar"style="width:200px;top:20px;" >
  <div class="slide" ></div>
 </div>


<script type="text/javascript">
/*<![CDATA[*/
// Mouse Belt Slider Scroll Bar (25-April-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/


var zxcMouseBeltSlider={

 init:function(o){
  var oop=this,id=o.ParentID,e=o.MoveEdge,s=o.MaxSpeed,ms=o.MinSpeed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,sb=document.getElementById(o.ScrollBarID),sbs=sb?sb.getElementsByTagName('*')[0]:null;
  if (b){
   var w=p.offsetWidth,h=p.offsetHeight,m=h>w?[1,'top','height','offsetTop','offsetHeight']:[0,'left','width','offsetLeft','offsetWidth'],c,lst,z0=1;
   if (m[0]==0){
    b.style.width='30000px';
    b.style.textAlign='left';
   }
   o.p=p;
   o.m=m;
   o.b=b;
   o.w=w;
   o.h=h;
   o.wr=o.Wrap===true;
   lst=b.lastChild,lst=lst.nodeType==1?lst:lst.previousSibling;
   o.lst=lst;
   o.sz=(o.lst[o.m[3]]+o.lst[o.m[4]])
   o.bm=(o.m[0]==0?o.w:o.h)-o.sz;
   b.style[m[2]]=o.sz+5+'px';
   if (o.wr){
    c=b.cloneNode(true);
    c.style.left=c.style.top='0px';
    for (;z0<Math.ceil(p[m[4]]/o.sz)+1;z0++){
     c=c.cloneNode(true);
     c.style[m[1]]=o.sz*z0+'px';
     b.appendChild(c);
    }
   }
   o.x=-1;
   o.s=typeof(s)=='number'?s:5;
   o.ms=typeof(ms)=='number'&&Math.abs(ms)<Math.abs(o.s)?ms:0;
   o.e=typeof(e)=='number'&&e>0&&e<(m[0]==0?o.w:o.h)/2?e:(m[0]==0?o.w:o.h)/4;
   p.style.overflow='hidden';
   this.addevt(document,'mousemove','move',o);
   o.i=o.ms;
   setInterval(function(){ oop.scroll(o); },30);
   if (sbs){
    w=sb.offsetWidth,h=sb.offsetHeight,m=h>w?[1,'top','height','offsetHeight']:[0,'left','width','offsetWidth'];
    o.sm=m;
    o.sbs=sbs;
    o.sbx=0;
    o.sbm=oop.css(sb,m[2])-sbs[m[3]];
    sb.style.overflow='hidden';
    this.addevt(sbs,'mousedown','down',o);
    this.addevt(document,'mouseup','up',o);
   }
  }
 },

 move:function(o,e){
  var p=this.pos(o.p),xy=this.mse(e),x=xy[0]-p[0],y=xy[1]-p[1],m=o.m[0]==0?x:y,s=o.m[0]==0?o.w:o.h;
  o.bm=(o.m[0]==0?o.w:o.h)-(o.lst[o.m[3]]+o.lst[o.m[4]]);
  o.i=y>0&&y<o.h&&x>0&&x<o.w?(m<o.e?1-m/o.e:m>s-o.e&&m<s?-(m-s+o.e)/o.e:0)*o.s:o.ms;
  o.i!=0?o.ms=Math.abs(o.ms)*(o.i>0?1:-1):null;
  o.sbs?this.sbmove(o,e):null;
 },

 scroll:function(o,e){
  var x=o.x+o.i;
  o.wr?x=x>0?x-o.sz:x<-o.sz?x+o.sz:x:x=Math.max(Math.min(o.x+o.i,0),o.bm);
  if (x!=o.x&&o.i!=0){
   o.b.style[o.m[1]]=x+'px';
   o.sbs?o.sbs.style[o.sm[1]]=o.sbm*(o.wr?Math.abs(x/o.sz):x/o.bm)+'px':null;
   typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
  }
  o.x=x;
 },

 down:function(o,e){
  o.xy=this.mse(e)[o.sm[0]];
  return this.rtn;
 },

 sbmove:function(o,e){
  if (o.xy){
   var xy=this.mse(e)[o.sm[0]],x=Math.min(Math.max(parseInt(this.css(o.sbs,o.sm[1]))+xy-o.xy,0),o.sbm);
   o.i=0;
   o.sbs.style[o.sm[1]]=x+'px';
   x=o.wr?x/o.sbm*-o.sz:o.bm*x/o.sbm;
   o.b.style[o.m[1]]=x+'px';
   o.xy=xy;
   o.ms=Math.abs(o.ms)*(x>o.x>0?1:-1);
   o.x=x;
   typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
   return this.rtn;
  }
 },

 up:function(o,e){
  o.xy=null;
 },

 rtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 mse:function(e){
  var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
  return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
 },

 pos:function(o){
  var r=[0,0];
  while(o){
   r[0]+=o.offsetLeft;
   r[1]+=o.offsetTop;
   o=o.offsetParent;
  }
  return r;
 },

 css:function(o,p){
  return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
 },

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


}

zxcMouseBeltSlider.init({
 ParentID:'tst',           // the unique ID name of the belt parent DIV.                 (string)
 MoveEdge:100,             //(optional) the edge distance to scroll the belt.            (number, default = parent size/4)
 MaxSpeed:5,               //(optional) the maximum scroll speed.                        (number, default = 5)
 MinSpeed:.5,               //(optional) the mouseout scroll speed.                       (number, default = 0)
 Wrap:true,                //(optional) true = the belt will wrap from first to last.    (boolean, default = false = the belt will not wrap)
 ScrollBarID:'scrollbar',  //(optional) the unique ID name of the scroll bar.            (string, default = no scroll bar)
 OnScroll:function(o,p,m){ //(optional) a function to call when the belt moves.          (function, default = no function call)
  // o = the intance object
  // p = the belt position
  // m = the minimum belt position
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst2',
 MoveEdge:100,
 MaxSpeed:5,
 ScrollBarID:'scrollbar2',
 OnScroll:function(o,p,m){
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst3',
 MoveEdge:50,
 MaxSpeed:5,
 Wrap:true,
 ScrollBarID:'scrollbar3',
 OnScroll:function(o,p,m){
 }
});

zxcMouseBeltSlider.init({
 ParentID:'tst4',
 MoveEdge:50,
 MaxSpeed:5,
 ScrollBarID:'scrollbar4',
 OnScroll:function(o,p,m){
 }
});



/*]]>*/
</script>
</body>

</html>

Thread: C Motion slide bar

Thread Tools

Search Thread

C Motion slide bar

Similar Threads

C Motion Gallery motion speed?

C Motion Gallery Help

C Motion Gallery Help

C Motion, CSS and IE on my site

Need help with C Motion Gallery

Bookmarks

Bookmarks

Posting Permissions