Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: use Page Scroller in div, not body

  1. #1
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default use Page Scroller in div, not body

    1) Script Title: Page Scroller (aka Custom Scrollbar)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...gescroller.htm

    3) Describe problem: I want to apply this script to a div instead of the body. I have tried placing this script in the div that I want to scroll, instead of the recommended placement (just above </body>). this places the scroll buttons in the div, but they still control the main scrollbar in the body.

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

    Default

    There's no easy way to scroll a DIV with this script unfortunately. You may want to check out the following script instead: http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    pithyus (10-17-2011)

  4. #3
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you.

    'Scrollable content script' looks like it'll do what I want.


    Pithyus

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

    Default

    that script is so old, does not calculate the scroll hight correctly and is inflexible.

    suggest it is updated to

    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
    ******************************************/
    
    // modified 17-October-2011
    
    
    function move(id,spd){
     var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
     if ((spd>0&&top<=0)||(spd<0&&top>=max)){
      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>
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    pithyus (10-17-2011)

  7. #5
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default suggested updated

    vwphillips,
    This script works too. Thanks.

    I agree that it should be updated. It is easier for a noob (like me) to understand and manipulate.

  8. #6
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default scroll issue with new script

    Quote Originally Posted by vwphillips View Post
    that script is so old, does not calculate the scroll hight correctly and is inflexible.

    suggest it is updated to

    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
    ******************************************/
    
    // modified 17-October-2011
    
    
    function move(id,spd){
     var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
     if ((spd>0&&top<=0)||(spd<0&&top>=max)){
      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>
    I am having one issue with this script. after page load when I first hover the down arrow it will jump to the bottom. After that it works as expected.
    Also, if I hover the top arrow before the bottom arrow, it works fine.

    This is the site.
    http://geekosystems.net/sandbox/

    Any suggestions?

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

    Default

    the script needs the top position to be defined by inline style

    this modification does not

    Code:
    <html>
    	<head>
    		<title>Pithyus.com</title>
    		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    		<meta name="robots" content="index, follow" />
    		<meta name="keywords" content="Linux,Ubuntu,Gnome,compiz,kiba,kiba-dock,kibadock,kiba dock,akamaru,akamaru dock,Windows,malware,spyware,malware removal,virus,virii,viruses" />
    		<meta name="description" content="" />
    		<link rel="stylesheet" type="text/css" href="default.css" />
    
    		<link href='http://fonts.googleapis.com/css1?family=Delius' rel='stylesheet' type='text/css'>
    <style type="text/css">
    /*<![CDATA[*/
    
    .container {
      position:relative;overflow:hidden;width:400px;height:200px;border:solid red 1px;
    }
    
    #content {
     position:relative;top:0px;
    }
    
    /*]]>*/
    </style>	</head>
    	<body>
     <div class="container">
       <div id="content">
    
    <!--INSERT CONTENT HERE-->
    <p class="first">Ubuntu is a Free computer Operating System (OS) based on Linux (an open-source alternative to Windows and Mac), built by a worldwide team of expert developers. It contains all the applications you need: a web browser, office suite, media apps, instant messaging and much more.</p>
    
    <p>You can do anything in Ubuntu that you can do with Mac & Windows, you just have different tools.</p>
    
    <p>They have IE & Safari, Ubuntu has Firefox.
    <br>They have Photoshop, Ubuntu has Gimp.
    <br>They have MS Office, Ubuntu has Libre Office & Open Office.
    <br>They have several different Chat/IM applications, Ubuntu has Empathy for them all.
    <br>Not only does Ubuntu have an application similar to the other guys, but Ubuntu's applications can open files created by their applications.</p>
    
    <p>If you're looking for the perfect desktop, customized just the way you like it - from where or IF you want the gnome panel task bar, to what color fire your windows burn up in when you close them. Thanks to compiz, Ubunutu's composie manager, your desktop will do things you never imagined, like wobbly windows, desktop cube, & exploding windows! Things Arrow, Windows 7 composite manager, is not capable of doing.</p>
    
    <p>Are you tired of viruses? With Ubuntu, you don't have to worry about them anymore.</p>
    <!--END CONTENT-->
       </div><!--#content-->
      </div>
    						<div class="circlebr">
    							<a href="#" onMouseover="move('content',5)" onMouseout="clearTimeout(move.to)"><img src="http://geekosystems.net/sandbox/up.png" border=0></a>
    							<br>
    							<br>
    							<a href="#" onMouseover="move('content',-5)" onMouseout="clearTimeout(move.to)"><img src="http://geekosystems.net/sandbox/down.png" border=0></a></p></td>
    
    						</div>
    
    			<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 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>
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    pithyus (10-18-2011)

  11. #8
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    the script needs the top position to be defined by inline style

    this modification does not
    Vic,
    Thanks for all your help/time!
    So far this works exactly as expected.
    My site still has a long way to go before it is ready. One of the plans is to make the content window size dynamic. Will this script work or does it need further modification?

    Pithyus

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

    Default

    all calculations are made in the function so there should not be a problem

    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=typeof(mode)=='string'&&mode.charAt(0).toUpperCase()=='H'?['left','offsetWidth']:['top','offsetHeight','offsetTop'],max,top;
     if (obj&&typeof(spd)=='number'){
      max=-obj[m[1]]+obj.parentNode[m[1]],top=parseInt(obj.style[m[0]]),top=isFinite(top)?top:obj[m[2]];
      if ((spd>0&&top<spd)||(spd<0&&top>max+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:max)+'px';
      }
     }
    }
    
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 10-19-2011 at 03:56 PM.
    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/

  13. The Following User Says Thank You to vwphillips For This Useful Post:

    pithyus (10-20-2011)

  14. #10
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    It works great!

    Thanks again.

    Pithyus

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
  •