Menu
Hi, I am new to the forum, I’m also not very efficient with Javascript, guess thats why I’m here ? , and I wouldn’t ask for help unless I’m really stuck on something. Basically, I need to scroll the text using javascript because the default scroll bar is a non-solution (ie: looks ugly and doesn’t match the layout of the webpage, a must go).
Basic function:
1)onmouseover ‘up arrow’ the text scrolls upwards
2)onmouseover ‘down arrow’ the text scrolls downwards
3)onmouseout ‘up or down arrow’ the text stops scrolling
The text <div> is contained within another <div> which acts as the container and which the scrolling of the text takes place in.
I’m stuck on the 3) part since I don’t know how to implement that in my code
The scrolling works fine overall, but still these minor issues, its inefficient basically. Any help is greatly appreciated, thank you in advance.
HTML FILE:
[code]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<script language=”JavaScript” type=”text/javascript” src=”javascript_new.js”>
</script>
</head>
<body bgcolor=”#333333″>
<div id=”up_arrow” onmouseover=”scroll_up();”> ARROW UP </div>
<div id= “textarea”>
<div id=”thetext” >
<h2>Header 1</h2>
<p>
Here is text
</p>
<br />
<br />
<p>
More text<br />
</p>
<br />
<p>
Much more text…
</p>
</div></div>
<div id=”down_arrow” onmouseover=”scroll_down();” > ARROW DOWN </div>
</body>
</html>
CSS FILE:
[code]
#textarea { position: relative; width: 300; overflow: hidden; left: 250; height: 200; background-color:#333333; }
#thetext { position: absolute; width: 280; left: 5; top: 100; }
#up_arrow { width: 20px; height: 20px; }
#down_arrow { width: 20px; height: 20px; }
JAVASCRIPT FILE:
[code]
var position = 100;
function scroll_up()
{
if(!document.getElementById) return;
text_object = document.getElementById(“thetext”);//get the text object
position-=1;//decrement and scroll up
if(position < 0-text_object.offsetHeight+150)
{
window.clearTimeout(“scroll_up();”, 300);
text_object.style.top = position;
}
else
{
text_object.style.top = position;
window.setTimeout(“scroll_up();”, 30);
}
}
function scroll_down()
{
if(!document.getElementById) return;
text_object = document.getElementById(“thetext”);
position+=1;//increment and scroll down
if(position > 0+((text_object.offsetHeight) – (text_object.offsetHeight – 150)))
{
window.clearTimeout(“scroll_down();”, 300);
text_object.style.top = position;
}
else
{
text_object.style.top = position;
window.setTimeout(“scroll_down();”, 30);
}
}
Anyways, any thoughts or input is again greatly appreciated. Thanks again!