display characters in sequence

[dgiff33]

Hello

I am trying to display the characters |, /, - and \ one after the other in the
same spot, disappearing and being replaced by the next character
so that it looks like a spinning prompt. The spinning prompt should
spin continuously.

so far I have:

<script>
<!--
var i=0;
var flipArray=new Array(4);
flipArray[0]="|";
flipArray[1]="/";
flipArray[2]="-";
flipArray[3]="\\";
for(i=0; i <=3; i++){
document.write(flipArray[i]);
}
//-->
</script>

The result of this is:

|/-\

on my web page.

Just a note, in case anyone is wondering: I am writing in roller and for some
reason if I add the language='JavaScript' type='text/javascript' attributes to the
script tags I get a message that "for" is undefined. Also for some reason in
roller, I'm not allowed to have spaces or blank lines.

How do I get the characters to disappear and the next to appear in the same
spot?

I know that I need to add a setInterval() so that the script will run continuously.
I need to also use setInterval() so that flip()'s output displays in the web page. When I added setInterval() like this:

<script>
<!--
var i=0;
var flipArray=new Array(4);
flipArray[0]="|";
flipArray[1]="/";
flipArray[2]="-";
flipArray[3]="\\";
setInterval("flip()", 500);
function flip()
{
for(i=0; i <=3; i++){
document.write(flipArray[i]);
}
}
//-->
</script>

my characters don't display at all. When I put the setInterval() after the flip()
function, my web page disappears and then my characters display on a
blank screen.

I am working in Apache Roller v. 3 on Windows XP. My browser is Mozilla
but I will also have to have this work in IE.

This is not homework. I was given this task because I know a bit about HTML
although nothing (obviously) about javascript. Fittingly, I am running out to
purchase a "For Dummies" book. Any help anyone might lend would be
greatly appreciated.

[iam_clint]

Example i'm giving with notes for you

<script>
var speed = 100; // set the speed the lower the number the faster
var direction = "0"; //forward = 0 backwards = 1
var farray = ["|", "/", "-", "\\"]; // set the array
if (direction==0) { var i = 0; } else { var i = farray.length-1; } // set the variable i globally as 0 if its going forward and the length of the array - 1 if its going backwards
var spinTime = window.setInterval("doSpin()", speed); // make the interval
function doSpin() {
  var span = document.getElementById("spin"); // get the span by id.
  span.innerHTML = ""; // reset the innerHTML of the span to nothing
  span.innerHTML = "<font size=\"20\"><b>"+farray[i]+"</b></font>"; // set the innerHTML of the span to the next item in the array.. fonts to make it beuatiful.
  if (direction==0) { i++; if (i==4) { i = 0; } } else { i--; if (i==-1) { i = farray.length-1; } } // if forward then you add to i.. if backwards you subtract from i because your starting at the end of the array
}
</script>
<!--Made some buttons to show how you could swap the direction easily--><input type="button" value="Forward" onclick="direction=0;"><input type="button" value="Backward" onclick="direction=1;"><br>
<span id="spin"></span>
 

now i'm not sure why you are doing this but an animated cd or ajax logo looks nice good luck and please reply to my post.

[dgiff33]

Thank you, Clint, for the javascript.

It works beautifully when viewed in the Mozilla browser but only the Forward and
Backwards buttons display in IE. Why would it work in Mozilla and not in IE?
That's strange, isn't it?

Also I tried changing the font size but didn't get any change.

Thank you very much for your help.

[iam_clint]

<script>
var speed = 20; // set the speed the lower the number the faster
var direction = "0"; //forward = 0 backwards = 1
var fontsize = "50px"; // set the font size
var farray = ["|", "/", "-", "\\"]; // set the array
if (direction==0) { var i = 0; } else { var i = farray.length-1; } // set the variable i globally as 0 if its going forward and the length of the array - 1 if its going backwards
var spinTime = window.setInterval("doSpin()", speed); // make the interval
function doSpin() {
  var span = document.getElementById("spin"); // get the span by id.
  span.innerHTML = ""; // reset the innerHTML of the span to nothing
  span.innerHTML = "<font size=\""+fontsize+"\"><b>"+farray[i]+"</b></font>"; // set the innerHTML of the span to the next item in the array.. fonts to make it beuatiful.
  if (direction==0) { i++; if (i==4) { i = 0; } } else { i--; if (i==-1) { i = farray.length-1; } } // if forward then you add to i.. if backwards you subtract from i because your starting at the end of the array
}
function resetSpeed(val) {
  speed = val;
  clearInterval(spinTime);
  spinTime = window.setInterval("doSpin()", speed); // make the interval
}
</script>
<!--Made some buttons to show how you could swap the direction easily-->
<input type="button" value="Forward" onclick="direction=0;"><input type="button" value="Backward" onclick="direction=1;"><br>
Speed: <select onchange="resetSpeed(this.value)"><option value="1">1</option><option value="10">10</option><option value="20">20</option><option value="40">40</option><option value="80">80</option><option value="160">160</option><option value="320">320</option><option value="640">640</option><option value="1280">1280</option></select><br>
<span id="spin"></span>
 
 

this worked fine in firefox and ie... i made a small change to the buttons to make them work in firefox.. for some reason it needed a line break after <!-- -->

font changes work and I also made it a variable for you just try changing it by large values like from 5 to 20 or 20 to 40 you will see that it is changing.

Do you understand how the code is working I tried to leave as many comments as possible.

added in speed control just so you could see the kind of stuff you can do.

[dgiff33]

Thanks again for your help. I really appreciate it.

Here's what I'm seeing.

In IE with the default security settings set (I went under Tools, Internet Options,
Advanced, under the "Security" heading) trying to open the file with the
javascript I get the error message:

"To protect your security, Internet Explorer has restricted this file showing
active content that could access your computer."

and only the buttons "forward" "backward" and the "speed" dropdown show.
The spinning cursor does not show.

If I change the Security settings to "allow active content to run in files on my
computer" then everything displaces nicely.

In Mozilla Firefox everything displays perfectly without any complaints about
security.

As to understanding everything in the script, no, I don't, but I'm learning a lot!
Thanks for that! I think that my spin didn't show up with my setInterval because
I didn't use "window" (my script would close the window and then show the
elements of the flip array - not spinning or anything just the elements). That's
a pretty egregious or obvious error. I am trying to find out what I can about
"innerHTML" as I had never heard of it before and it's key to the script. I've
ordered a javascript book (Javascript Demystified by James Keogh) and am
hoping that cut down on my annoying questions!

Thanks for taking the time to help. I appreciate you sharing your expertise.