SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling Div Problem

    Heya,

    I have the following code that scrolls text contained inside a div, but when I change the text to two images, the div only scrolls to the end of the first image, and doesn't display the second. Why is this?

    Code:
    <html>
    <head><title></title>
    <style>
    .Pictures
    {
      WIDTH: 71px;
      HEIGHT: 51px;
      MARGIN-LEFT: 12px;
      MARGIN-BOTTOM: 12px;
      BORDER: 2px solid RGB(255, 255, 255);
    }
    
    #clippedDiv
    {
      POSITION: relative;
      WIDTH: 71px;
      HEIGHT: 51px;
      OVERFLOW: hidden;
    }
    </style>
    
    <script language="JavaScript" type="text/javascript">
    // Scroll code
    var timeoutID; // global variable to hold the timer
    
    function scrollDiv(inc,dir) { /* inc(rement) is positive or negative, direction is v(ertical) or h(orizontal) */
    
      if (timeoutID) clearTimeout(timeoutID); // make sure we do not start another timer
      var theDiv=document.getElementById('clippedDiv'); // get the hardcoded div
      if (theDiv) { // does it exist?
        if (dir == "v") theDiv.scrollTop+=inc; /* if vertical scroll increment the scrollTop to move down or up */
        else theDiv.scrollLeft+=inc; // else increment scrollLeft to move right or left
        timeoutID = setTimeout("scrollDiv(" + inc + ",'" + dir + "')", 20); // do it again in 20 miliseconds
      }
    }
    
    function stopScroll() { //
      if (timeoutID) clearTimeout(timeoutID); // if we have a timerID clear it
    }
    </script>
    </head>
    <body>
    <div id="clippedDiv"><img class="Pictures" src="Images/1.bmp"><img class="Pictures"src="Images/2.bmp"></div>
    <img "../../images/nav/tri-lft.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(-4, 'h');" onmouseout="stopScroll();">
    <img "../../images/nav/tri-rt.gif" width="12" height="12" alt="" border="0" onmouseover="scrollDiv(4, 'h');" onmouseout="stopScroll();">
    </body>
    </html>
    Last edited by Salchester; Jul 24, 2007 at 09:52.

  2. #2
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any Help Appreciated!

  3. #3
    SitePoint Evangelist bradical1379's Avatar
    Join Date
    Feb 2007
    Posts
    443
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because you are only scrolling +/- 4 in either direction, 4 pixels is nothing.


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
  •