473,289 Members | 1,953 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,289 software developers and data experts.

display characters in sequence

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.
May 16 '07 #1
4 1912
iam_clint
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>
  16.  

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

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

Similar topics

2
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...
43
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...
14
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,...
2
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...
6
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...
19
by: many_years_after | last post by:
Hi,everyone: Have you any ideas? Say whatever you know about this. thanks.
198
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...
9
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: $...
3
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...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

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.