473,373 Members | 1,407 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,373 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 1913
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

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

Similar topics

by: lkrubner | last post by:
What I need to do is find out what characters in a string are not supported by the UTF-8 encoding. The problem arises when someone logs in and uses my php script to create a weblog post. They are...
by: Vladimir | last post by:
Method UnicodeEncoding.GetMaxByteCount(charCount) returns charCount * 2. Method UTF8Encoding.GetMaxByteCount(charCount) returns charCount * 4. But why that? Look: /* Each Unicode character...
by: nic977 | last post by:
I am asked to write a simple program to displays the last n lines from a given text file. But I have no ideas how C defines a "line" in a text file. How does it tell if it is the end of the line,...
by: s.chelliah | last post by:
We have an input field which allows the user to enter a string of (up to 62) ASCII printable characters. We have a need to allow the user to be able to specify any sequence of characters he/she...
by: Bill Nguyen | last post by:
I'm getting data from a mySQL database (default char set = UTF-8). I need to display data in Unicode but got only mongolian characters like this: Phạm Thị Ngọc I changed the textbox font to...
by: many_years_after | last post by:
Hi,everyone: Have you any ideas? Say whatever you know about this. thanks.
by: Antoninus Twink | last post by:
Or, just how low has this group sunk? Twice in the past couple of days, Default Loser has accused Chris Hills, member of the ISO C committee, of being a troll (though given that the former's...
by: TP | last post by:
Hi everybody, I am new to Python, I try to understand how Python treats special characters. For example, if I execute the following line in a shell console, I obtain a colored string: $...
by: yuanyun.ken | last post by:
hi,dear all js gurus. In my app, server responses some text like: '&nbsp;&nbsp; ' and I need display these content in textarea. But Html would convert specail characters to space, and ignore line...
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.