Results 1 to 3 of 3

Thread: Scrollable content script - Hiding arrows on start and end of Div Content

  1. #1
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Scrollable content script - Hiding arrows on start and end of Div Content

    Hello everyone,

    I have been referring this script http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

    It works perfect, just want to hide the up and down arrows when they reach the top and the bottom of the Div contents respectively.

    Awaiting solutions,

    Regards,
    -harleyy.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 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>
    </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> DHTML is the
    combination of HTML, JavaScript, and CSS</p>
    <p>- DOM stands for Document Object Model</p>
    <p>- DHTML allows
    content on a page to change on the fly, without reloading the page</p>
    <p>- CSS allows for the separation between content
    definition and formatting</p>
    <p>- CSS stands for Cascading style sheet</p>
    <p>- <a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)"><img id="containerUp" src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)"><img id="containerDown" 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>- DHTML is the
    combination of HTML, JavaScript, and CSS</p>
    <p>- DOM stands for Document Object Model</p>
    <p>- DHTML allows
    content on a page to change on the fly, without reloading the page</p>
    <p>- CSS allows for the separation between content
    definition and formatting</p>
    <p>- CSS stands for Cascading style sheet</p>
    <p>- <a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</p>
    <!--END CONTENT-->
    
    </div></div>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img id="container2Up" src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img id="container2Down" 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),up=document.getElementById(id+'Up'),down=document.getElementById(id+'Down');
     if (up&&spd<0){
      up.style.visibility='visible';
     }
     if (down&&spd>0){
      down.style.visibility='visible';
     }
     if ((spd>0&&top<=0)||(spd<0&&top>=max)){
      obj.style.top=top+spd+"px";
      move.to=setTimeout(function(){ move(id,spd); },20);
     }
     else {
      top=(spd>0?0:max)
      obj.style.top=top+"px";
      if (up&&top==0){
       up.style.visibility='hidden';
      }
      if (down&&top==max){
       down.style.visibility='hidden';
      }
     }
    }
    
    </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/

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

    Harleyy (10-18-2012)

  4. #3
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thank you Sir.

Similar Threads

  1. Problem combining Accordion Content script v1.9 with Scrollable Content II
    By emeraldsentinel in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 11-02-2010, 10:00 AM
  2. Replies: 9
    Last Post: 04-02-2007, 12:35 AM
  3. Scrollable content script II & switch content not working together?!
    By mistermod in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-02-2007, 11:09 PM
  4. Replies: 1
    Last Post: 10-02-2006, 04:27 PM
  5. Scrollable content script II Content printing
    By JohnHow in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-16-2005, 06:28 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
  •