Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: JS Scroller

  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts

    Question JS Scroller

    HI

    Please consider the code below. Its a table containing images in rows and columns which is wrapped by a DIV tag. The width of the DIV tag is 300px and overflow set to hidden. Is there anyway I can scroll the contents of the DIV tag to right and left with the links Scroll Left and Scroll Right with javascript? Or is there any javascript that can do this trick for me?

    Many thanks



    Code:
    <a href="#">Scroll Left</a> | <a href="#">Scroll Right</a> 
    <BR><BR>
    <div style="width:300px; overflow:hidden; border:3px solid #000;">
    <table width="100%" border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
      <tr>
        <td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
    </table>
    </div>

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Use the scrollLeft property.
    Code:
    <script type="text/javascript">
       function scrollDiv(direction) {
          var theDiv = document.getElementById("imgs");
          theDiv.scrollLeft = (direction == "right") ? theDiv.scrollWidth : 0;
       }
    </script>
    
    <p><a href="#" onclick="scrollDiv('left');">Scroll Left</a> | <a href="#" onclick="scrollDiv('right');">Scroll Right</a></p>
    <br /><br />
    <div id="imgs" style="width:300px; overflow:hidden; border:3px solid #000;">
    <table width="100%" border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
      <tr>
        <td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
    </table>
    </div>

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Scroll(id,ud){
     var obj=document.getElementById(id);
     clearTimeout(obj.to);
     if (ud){
      obj.scrollLeft=obj.scrollLeft+ud;
      obj.to=setTimeout(function(){ Scroll(id,ud); },10);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <a onmousedown="Scroll('tst',1);" onmouseup="Scroll('tst');">Scroll Left</a> | <a  onmousedown="Scroll('tst',-1);" onmouseup="Scroll('tst');">Scroll Right</a>
    <BR><BR>
    <div id="tst" style="position:relative;width:300px; overflow:hidden; border:3px solid #000;">
    <table  width="100%" border="1" cellspacing="0" cellpadding="5"style="position:relative;">
      <tr>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
      <tr>
        <td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
    </table>
    </div></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/

  • #4
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    @Amphiluke,

    Hi

    Thanks for the quick reply.

    The script you provided scrolls either the extreme right or the extreme left. It misses the middle ones.

    Actually I am looking something similar to this

    Code:
    http://www.shopstyle.com/browse/dresses?feat=53873241

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    see post #3
    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/

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by vwphillips View Post
    see post #3
    Hi,

    I appreciate your quick help.

    The script you provided works fine. Can it be done (only if its ok for you) like once you click on the scroll left/right links, the first 4 images moves and the next 4 images scrolls.

    To be precise I am actually looking for a scroller like this

    Code:
    http://www.shopstyle.com/browse/dresses?feat=53873241
    Many thanks

  • #7
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    If you no need smooth scrolling, try this
    Code:
    <script type="text/javascript">
       function scrollDiv(direction) {
          var theDiv = document.getElementById("imgs");
          var scrollStep = theDiv.getElementsByTagName("td")[0].offsetWidth * 4;
          theDiv.scrollLeft += (direction == "right") ? scrollStep : -scrollStep;
       }
    </script>
    
    <p><a href="#" onclick="scrollDiv('left');">Scroll Left</a> | <a href="#" onclick="scrollDiv('right');">Scroll Right</a></p>
    <br /><br />
    <div id="imgs" style="width:300px; overflow:hidden; border:3px solid #000;">
    <table width="100%" border="1" cellspacing="0" cellpadding="5">
      <tr>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
      <tr>
        <td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
    </table>
    </div>

  • #8
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    I'd appreciate if it can be smooth scrolling


    Many thanks

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (14-May-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    //  parameter 0 = the mode(see Note 2).                                                                     (string)
    //  parameter 1 = the unique ID name or element object.                                                     (string or element object)
    //  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    //  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    //  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    //  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //  Note 6: parameters 2 and 3 must be different values to execute the script.
    //
    
    // **** Advanced Applications
    //
    //  Calling function 'zxcBAnimator' returns the instance of the script,
    //  this may be assigned to a variable and used to access the current value of the effect or to control the effect.
    //  alternatively the script instance by elementobject[mode.replace(/\W/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element [instance].data as fields 0, 1 and 2 respectively where [instance] is the instance of the script.
    //
    //  Once initialised the effect may be updated by calling function
    //  [instance].update([100,200])
    //  where:
    //   parameter 0 = an array defining the start and finish values.                                            (array)
    //                  field[0] =the start position of the effect.   (digits, for opacity minimum 0, maximum 100)
    //                  field[0] = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
    //   parameter 1 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //   parameter 2 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
    //                   field 0 the minimum. (digits)
    //                   field 1 the maximum. (digits)
    //   parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                  'sin' progression starts fast and ends slow.
    //                  'cos' progression starts slow and ends fast.
    //
    // ** Bounce
    //   A 'bounce' effect may be applied by assigning the script instance property 'Bounce' an array
    //   defining the 'bounce' properties.
    //   e.g.
    //   [instance].Bounce=[100,90,4,200];
    //   where:
    //    field[0] = the 'bounce' maximum.  (digits)
    //    field[1] = the 'bounce' minimum.  (digits)
    //    field[2] = the number of bounces. (digits)
    //    field[3] = the 'bounce' duration. (digits)
    //
    
    
    // **** General
    //
    // Function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code, about 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms,scale,curve);
     }
     else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
     return oop;
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     clearTimeout(this.to);
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.ms=this.mS;
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     this.ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
     this.apply();
     if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Bounce&&this.Bounce[2]>0) this.bounce();
     }
    }
    
    zxcBAnimatorOOP.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.bounce=function(){
     if (this.Bounce[2]%2==0)
     this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
     this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
     this.Bounce[2]--;
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Scroll(id,nu,ud,ms){
     var obj=document.getElementById(id);
     if (!obj.oop){
      obj.oop=zxcBAnimator('left',obj,5,0,10);
     }
     var inc=obj.getElementsByTagName('TD')[0].offsetWidth*nu*ud;
     obj.oop.update([obj.oop.data[0],Math.max(Math.min(obj.oop.data[2]+inc,0),obj.parentNode.offsetWidth-obj.offsetWidth)],ms||1000,[0,inc]);
    }
    /*]]>*/
    </script></head>
    
    <body>
    <a onmouseup="Scroll('tst',4,-1,1000);" >Scroll Left</a> | <a   onmouseup="Scroll('tst',4,1,1000);">Scroll Right</a>
    <BR><BR>
    <div style="position:relative;width:345px; overflow:hidden; border:3px solid #000;">
    <table  id="tst" width="100%" border="1" cellspacing="0" cellpadding="5"style="position:relative;">
      <tr>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
        <td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
      </tr>
    </table>
    </div>
    
    </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/

  • #10
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    911
    Thanks
    302
    Thanked 2 Times in 2 Posts
    Thanks so much phillips



    God Bless


  •  

    Posting Permissions

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