JavaScript Forum

**LayneMitch** · 10-01-2008, 09:34 AM

Hello.

I have to create a page where you click a button and the text scrolls the length of the input text line and repeats from the beginning continuously until you hit a button to stop it.

I'm still working on it but may need a little boost since I'm a beginner.

Here's my attempt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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">

var my_div = document.getElementById("text");
var origin_x = eval(my_div.style.left);
var target_x = 200px;
var x_rate = 25; //how fast it's moving...
var x_duration = 5;// how long it should take to reach it's destination...
var x_increment = (target_x - origin_x / x_rate * x_duration);
var x_scroll = origin_x;
var the_timeout;

onload=function(){
inputText();
attachHandlers();
}

function inputText(){
var my_message="I love football";
var the_div=document.getElementById("text");
the_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);
  }

  var text_div = document.getElementById("text");
  text_div.style.left=Math.round(x_scroll)+"px";

}

function stopScroll(){

clearTimeout(the_timeout);

}

</script>
</head>
<body>
<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>

I feel as though I'm a little close, but not quite. Any suggestions?

**wayfarer07** · 10-01-2008, 10:14 AM

What is the script doing now? Are there any errors?

The one thing I would suggest is using setInterval instead of setTimeout, and once the button is hit, clearing the interval. It looks like you're basically trying to create a setInterval functionality with setTimeout, and doing extra work.

**LayneMitch** · 10-01-2008, 11:00 AM

Quote:

Originally Posted by wayfarer07

What is the script doing now? Are there any errors?

The one thing I would suggest is using setInterval instead of setTimeout, and once the button is hit, clearing the interval. It looks like you're basically trying to create a setInterval functionality with setTimeout, and doing extra work.

Well.. the first thing is that the text isn't displaying in the first place..let alone moving. I did consider using setInterval, but thought that setTimeout was the more recent way of animating objects.

**wayfarer07** · 10-01-2008, 11:40 AM

Quote:

var my_div = document.getElementById("text");
var origin_x = eval(my_div.style.left);

is meaningless. eval() is for evaluating strings as code. In other words, everything within an eval() needs to be within quotes, or else be a variable that contains a string that can be evaluated as JS.

**amikael** · 10-01-2008, 12:57 PM

You probably meant
var origin_x = parseInt(my_div.style.left);

**LayneMitch** · 10-02-2008, 10:46 AM

Quote:

Originally Posted by amikael

You probably meant
var origin_x = parseInt(my_div.style.left);

Okay...

So I've made some updates and text still isn't displaying...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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">

var my_div = document.getElementById("text");
var origin_x = parseInt(my_div.style.left);
var target_x = 200px;
var x_rate = 25; //how fast it's moving...
var x_duration = 5;// how long it should take to reach it's destination...
var x_increment = eval("target_x - origin_x / x_rate * x_duration");
var x_scroll = origin_x;
var the_timer=null;

onload=function(){
inputText();
attachHandlers();
}

function inputText(){
var my_message="I love football";
var the_div=document.getElementById("text");
the_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_timer= setInterval('startScroll()', 500);
  }

  var text_div = document.getElementById("text");
  text_div.style.left=Math.round(x_scroll)+"px";

}

function stopScroll(){

clearTimeout(the_timer);

}

</script>
</head>
<body>
<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>

anyone see any reason why text isn't showing?...