Hello again.
Lol...Now that I finally got that part out of the way earlier. Here's the
real issue.
I'm suppose to create text that scrolls when you click start and stops when
you click stop.
The thought was that I could create text and insert it into a div and just
get the left property of the div and increment that over time....Not sure if
I'm right. But now nothing appears again...
Here's my attempt:
<html><head><title>Problem6</title>
<style type="text/css">
#space{position:absolute; left:10px; top:20px; width:200px; height:50px;
border:1px solid black;}
#mybuttons{position:absolute; left:10px; top:75px;}
</style>
<script type="text/javascript">
origin_x = my_div.style.left;
target_x = 200px;
x_rate = 25; //how fast it's moving...
x_duration = 5;// how long it should take to reach it's destination...
x_increment = (target_x - origin_x / x_rate * x_duration);
x_scroll = origin_x;
var the_timeout;
function inputText(){
var my_message="I love football";
var my_div=document.getElementById("text");
my_div.innerHTML=my_message;
}
function attachHandlers(){
var first_button=document.getElementById("start");
var second_button=document.getElementById("stop");
first_button.onclick=startScroll();
second_button.onclick=stopScroll();
}
function startScroll(){
x_scroll += x_increment;
if ((target_x origin_x && x_scroll target_x))
{
x_scroll = -target_x;
}
else
{
var the_timeout= setTimeout("startScroll()", 500/x_rate);
}
var text_div = document.getElementById("text");
text_div.style.left=Math.round(x_scroll)+"px";
}
function stopScroll(){
clearTimeout(the_timeout);
}
</script>
</head>
<body onLoad="inputText()";"attachHandlers()">
<div id="space">
<div id="text"></div>
</div>
<div id="mybuttons">
<input type="button" value="startscroll" id="start">
<input type="button" value="stopscroll" id="stop">
</div>
</body>
</html>
Please let me know what you think...
--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200809/1
