Results 1 to 8 of 8

Thread: C Motion slide bar

  1. #1
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default C Motion slide bar

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
    Last edited by vwphillips; 02-05-2014 at 05:58 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just the job.

    Many thanks, Vic.

  4. #4
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Brilliant, thanks Vic

    What would be a reasonable donation?

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. C Motion Gallery motion speed?
    By metblack85 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-06-2009, 08:39 PM
  2. C Motion Gallery Help
    By Paldin in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-26-2009, 11:57 PM
  3. C Motion Gallery Help
    By moscarda in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 12-12-2008, 11:23 PM
  4. C Motion, CSS and IE on my site
    By buzuc in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-13-2005, 11:30 AM
  5. Need help with C Motion Gallery
    By vmax29 in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 10-19-2005, 03:22 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •