471,872 Members | 1,367 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,872 software developers and data experts.

display characters in sequence


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:

var i=0;
var flipArray=new Array(4);
for(i=0; i <=3; i++){

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

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:

var i=0;
var flipArray=new Array(4);
setInterval("flip()", 500);
function flip()
for(i=0; i <=3; i++){

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.
May 16 '07 #1
4 1716
1,208 Expert 1GB
Example i'm giving with notes for you
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var speed = 100; // set the speed the lower the number the faster
  3. var direction = "0"; //forward = 0 backwards = 1
  4. var farray = ["|", "/", "-", "\\"]; // set the array
  5. 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
  6. var spinTime = window.setInterval("doSpin()", speed); // make the interval
  7. function doSpin() {
  8.   var span = document.getElementById("spin"); // get the span by id.
  9.   span.innerHTML = ""; // reset the innerHTML of the span to nothing
  10.   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.
  11.   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
  12. }
  13. </script>
  14. <!--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>
  15. <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.
May 16 '07 #2
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.
May 16 '07 #3
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var speed = 20; // set the speed the lower the number the faster
  3. var direction = "0"; //forward = 0 backwards = 1
  4. var fontsize = "50px"; // set the font size
  5. var farray = ["|", "/", "-", "\\"]; // set the array
  6. 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
  7. var spinTime = window.setInterval("doSpin()", speed); // make the interval
  8. function doSpin() {
  9.   var span = document.getElementById("spin"); // get the span by id.
  10.   span.innerHTML = ""; // reset the innerHTML of the span to nothing
  11.   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.
  12.   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
  13. }
  14. function resetSpeed(val) {
  15.   speed = val;
  16.   clearInterval(spinTime);
  17.   spinTime = window.setInterval("doSpin()", speed); // make the interval
  18. }
  19. </script>
  20. <!--Made some buttons to show how you could swap the direction easily-->
  21. <input type="button" value="Forward" onclick="direction=0;"><input type="button" value="Backward" onclick="direction=1;"><br>
  22. 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>
  23. <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.
May 16 '07 #4
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

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.
May 17 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

43 posts views Thread by Vladimir | last post: by
6 posts views Thread by Bill Nguyen | last post: by
19 posts views Thread by many_years_after | last post: by
198 posts views Thread by Antoninus Twink | last post: by
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.