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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Scrolling inside a <td> div

    Hi,

    I have the following scrolling table where I do not want the table headers to scroll. I want only the data inside <td></td> to scroll. For some reason that is not happening. Can someone help ? Really appreciate that.

    Regards, sbguy

    [CODE]
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    var div, scrollTop, scrollID, direction, imgDirection, scrollID1;

    window.onload = function() {
    div1 = document.getElementById("div1");
    scrollTop = div1.scrollTop;
    };
    function scrollOnImage() {
    if (imgDirection ==1 ) {
    if (scrollTop != 0)
    scrollTop--;
    }
    else if (imgDirection == 2) {
    if (scrollTop != (div1.scrollHeight - 300))
    scrollTop++;
    }
    div1.scrollTop = scrollTop;
    scrollID1 = setTimeout("scrollOnImage()", 10);

    }
    </script>

    </head>
    <body>
    <br />
    <div style="border: solid 1px red; float: left; height:300px; max-height:300px; width:200px; overflow: hidden;" >
    <table>
    <tr>
    <th style="height:20px;"><input type="image" src="images/LGbtn_off.png" alt="img1" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /></th>
    <th>1A</th>
    <th ><input type="image" src="images/RRbtn_off.png" alt="img2" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" /></th>
    </tr>
    <tr>
    <td colspan="3" style="height:280px; max-height:280px;">
    <div id="div1">
    <ul id="ulR_1A" class="ulli">
    <li><span class="li_head">PCode:</span> 1234</li>
    <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
    <li><span class="li_head">Qty:</span> 256</li>
    <li><span class="li_head">Batch No:</span> 01AC950</li>
    <li><span class="li_head">Manf Date:</span> 11/08/2012</li>
    <li><span class="li_head">SS Date:</span>11/07/2013</li>
    <li><span class="li_head">Total Pals:</span> 60</li>
    <li><span class="li_head">Pals Occupied:</span> 59</li>
    <li><span class="li_head">Bin Occupancy:</span> 89%</li>
    <li><span class="li_head">Trn No:</span> 1234567890</li>
    <li><span class="li_head">Bin Status:</span> Part Full</li>
    </ul>
    <ul id="ulR_1A" class="ulli">
    <li><span class="li_head">PCode:</span> 1235</li>
    <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
    <li><span class="li_head">Qty:</span> 256</li>
    <li><span class="li_head">Batch No:</span> 01AC950</li>
    <li><span class="li_head">Manf Date:</span> 11/08/2012</li>
    <li><span class="li_head">SS Date:</span>11/07/2013</li>
    <li><span class="li_head">Total Pals:</span> 60</li>
    <li><span class="li_head">Pals Occupied:</span> 59</li>
    <li><span class="li_head">Bin Occupancy:</span> 89%</li>
    <li><span class="li_head">Trn No:</span> 1234567890</li>
    <li><span class="li_head">Bin Status:</span> Part Full</li>
    </ul>
    <ul id="ulR_1A" class="ulli">
    <li><span class="li_head">PCode:</span> 1236</li>
    <li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
    <li><span class="li_head">Qty:</span> 256</li>
    <li><span class="li_head">Batch No:</span> 01AC950</li>
    <li><span class="li_head">Manf Date:</span> 11/08/2012</li>
    <li><span class="li_head">SS Date:</span>11/07/2013</li>
    <li><span class="li_head">Total Pals:</span> 60</li>
    <li><span class="li_head">Pals Occupied:</span> 59</li>
    <li><span class="li_head">Bin Occupancy:</span> 89%</li>
    <li><span class="li_head">Trn No:</span> 1234567890</li>
    <li><span class="li_head">Bin Status:</span> Part Full</li>
    </ul>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <div style="border: solid 1px red; float: left">
    <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /><br /><br />
    <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" />
    </div>
    </body>
    </html>
    [CODE]

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by sbguy View Post
    I have the following scrolling table where I do not want the table headers to scroll.
    Then why have you put your onmouseover functions on the th's?

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The mousovers are on the image buttons contained inside the <th>s

    The script works fine when I scroll a normal div, but does not function when the <div> that needs to scroll is inside a <td></td>

    Regards


  •  

    Posting Permissions

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