Scroll table upwards or downwards using up and down button
Question
I want to create a banner scrolling function for my homepage. I am not too sure of which programming language to use here. I want to code something similar to: http://www.squidfaceandthemeddler.com/ . But I want the footer to remain at the same position while the user scroll the table. Is it possible to get that result? I have create a simple tables and 2 images for the user to click on
here is my code for the tables:
<div id="banner" style="height:750px; width:600px; overflow:scroll;" >
<table width="750px" height="600px">
<tr>
<td><a href="sale_1.php"><img src="banner1.png"/></a></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><a href="sale_2.php"><img src="banner2.png"/></a></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><a href="sale_3.php"><img src="banner3.png"/></a></td>
</tr>
</table>
</div>
and this is the upwards and downwards button for the scrolling:
<table width="750px" height="30px">
<tr>
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td>
</tr>
</table>
2 answers
solution1
0 ACCPTED 2012-06-12 10:20:58
If you put the contents inside two div tags you can use CSS to clip the outer div and "scroll" the inner div by scripting its CSS "top" value, thus:
<html><head><style>
#contents{
position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td><a href="javascript:void(0)" onclick="up()">up</a></td>
<td rowspan="2"><div id="scrollable">
<div id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div>
</td></tr><tr><td>
<a href="javascript:void(0)" onclick="down()">down</a></td></tr></table>
</body></html>
take the help of this edit your code
solution2
0 2012-06-12 10:40:02
Have a look at jquery scrolltop: http://api.jquery.com/scrollTop/ . I would fix the tables width to a certain height, like you already did and then:
$('#buttonUpID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop + 600);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.