PDA

View Full Version : 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
<!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, 12: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, 02: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, 02:34 PM
<!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, 05:44 PM
Brilliant, thanks Vic

What would be a reasonable donation?

vwphillips
04-26-2014, 11:58 AM
What would be a reasonable donation?

what ever you can afford, it is a good cause

I have added some additional options


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