Results 1 to 5 of 5

Thread: Scrollable content script III

  1. #1
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default Scrollable content script III

    1) CODE TITLE: Scrollable content script II

    2) AUTHOR NAME/NOTES:
    the original script is so old, does not calculate the scroll hight correctly and is inflexible.

    3) DESCRIPTION:
    Rewrite
    4) URL TO CODE:

    or, ATTACHED BELOW (see #3 in guidelines below):

    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>
    </head>
    
    <body>
    
    
    <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
    <div id="container" style="position:absolute;width:170px;left:0;top:0">
    
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td>
    </table>
    
    <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
    <div id="container2" style="position:absolute;width:170px;left:0;top:0">
    
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td>
    </table>
    
    <script type="text/javascript">
    
    /******************************************
    * Scrollable content script II-  Dynamic Drive (www.dynamicdrive.com)
    * Visit http://www.dynamicdrive.com/ for full source code
    * This notice must stay intact for use
    ******************************************/
    
    // the original script is so old, does not calculate the scroll hight correctly and is inflexible.
    // modified 17-October-2011
    
    
    			function move(id,spd){
    			 var obj=document.getElementById(id),max,top;
                 if (obj&&typeof(spd)=='number'){
                   max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=obj.offsetTop;
    		       if ((spd>0&&top<spd)||(spd<0&&top>max+spd)){
    			    obj.style.top=top+spd+"px";
    			    move.to=setTimeout(function(){ move(id,spd); },20);
    			   }
    			   else {
    			    obj.style.top=(spd>0?0:max)+"px";
    			   }
                  }
    		     }
    
    </script>
    </body>
    
    </html>
    the code has been modified so the top position does not need to be defined by inline style
    Last edited by vwphillips; 10-18-2011 at 09:52 AM. Reason: the code has been modified so the top position does not need to be defined by inline style
    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/

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Thanks Vic, I've updated the original Scrollable Content script II with your version instead: http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
    DD Admin

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    please note the amendment of the posted script resulting from feedback from
    DD scripts help

    see http://www.dynamicdrive.com/forums/s...231#post263231
    Last edited by vwphillips; 10-19-2011 at 08:02 AM. Reason: added link
    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. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I have added vertical and horizontal applications

    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>
    </head>
    
    <body>
    
    
    <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
    <div id="container" style="position:absolute;width:170px;left:0;top:0">
    
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td>
    </table>
    
    <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
    <div id="container2" style="position:absolute;width:170px;left:0;">
    
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td>
    </table>
    
    
    <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
    <div id="container3" style="position:absolute;width:490px;left:0;">
    
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container3',1,'H')" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container3',-1,'H')" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td>
    </table>
    
    
    
    <script type="text/javascript">
    
    /******************************************
    * Scrollable content script II-  Dynamic Drive (www.dynamicdrive.com)
    * Visit http://www.dynamicdrive.com/ for full source code
    * This notice must stay intact for use
    ******************************************/
    
    // modified 19-October-2011
    
    // parameter id   = the unique ID name of the element to scroll.                               (string)
    // parameter spd  = the scroll speed and direction, > 0 down, > 0 = up.                        (number)
    // parameter mode = (optional) 'V' or 'vertical' = vertical, 'H' or 'horizontal' = horizontal. (string, default = 'V' = vertical)
    
    function move(id,spd,mode){
     var obj=document.getElementById(id),m,min,top;
     if (obj&&typeof(spd)=='number'){
      spd=Math.ceil(spd),m=typeof(mode)=='string'&&mode.charAt(0).toUpperCase()=='H'?['left','offsetWidth','offsetLeft']:['top','offsetHeight','offsetTop'],min=-obj[m[1]]+obj.parentNode[m[1]],top=obj[m[2]];
      if ((spd>0&&top<spd)||(spd<0&&top>min+spd)){
       obj.style[m[0]]=top+spd+'px';
       move.to=setTimeout(function(){ move(id,spd,mode); },20);
      }
      else {
       obj.style[m[0]]=(spd>0?0:min)+'px';
      }
     }
    }
    
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 10-20-2011 at 03:03 PM. Reason: oops
    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/

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Thanks for the update, I'll wait until next week before implementing this, in case there are any other changes you'd like to add to the script in the meantime.
    DD Admin

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
  •