Advanced Search

Results 1 to 3 of 3

Thread: C Motion slide bar

  1. #1
    Join Date
    Nov 2011
    Posts
    7
    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,708
    Thanks
    2
    Thanked 388 Times in 383 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 04: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
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just the job.

    Many thanks, Vic.

Similar Threads

  1. C Motion Gallery motion speed?
    By metblack85 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-06-2009, 07:39 PM
  2. C Motion Gallery Help
    By Paldin in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-26-2009, 10:57 PM
  3. C Motion Gallery Help
    By moscarda in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 12-12-2008, 10: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, 10:30 AM
  5. Need help with C Motion Gallery
    By vmax29 in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 10-19-2005, 02: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
  •