...

View Full Version : Scrolling inside a <td> div



sbguy
03-28-2012, 04:28 AM
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]

Mishu
03-28-2012, 04:39 AM
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?

sbguy
03-29-2012, 11:23 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum