Page 1 of 2
Javascript text loading effect?
Posted: Fri Jun 01, 2007 11:14 pm
by toasty2
I'm not really sure what to call this, so I'll call it a text loading effect. I want to make an animation that uses the characters:
|, /, -, \, |, /, -, ...etc (repeats)
I know this has been done before, I want to make an effect where it uses those characters in that order to make what looks like a spinning line, you may get what I mean if you've ever seen this done when a certain program loads (I can't remember any specifics though).
I'm not really sure how to do this, so far I have:
Code: Select all
function effect()
{
if(c=='/')
{
var c = '--';
}
else if(c=='--')
{
var c = '\\';
}
else if(c=='\\')
{
var c = '|';
}
else if(c=='|')
{
var c = '/';
}
return c;
}
Something like that is what I'm trying to do, but I need to have timing and a way to actually change the character being shown.
I hope you can understand what I'm trying to do.
Posted: Sat Jun 02, 2007 1:08 am
by nickvd
What about storing each "frame" in an array and step through it....
Posted: Sat Jun 02, 2007 9:40 am
by toasty2
Sounds good, but I still don't know how to do the effect.
Here we have the array:
Posted: Sat Jun 02, 2007 9:51 am
by superdezign
Well, you could simplify the process using an element's innerHTML property and changing it through a loop that traverses the array using setTimeout.
Posted: Sat Jun 02, 2007 10:52 am
by toasty2
Ok, but when it gets to the end of the array how do I get it to start over?
So far I have this:
Code: Select all
<html>
<head>
<script type="text/javascript" language="JavaScript"><!--
function doEffect(id)
{
var c = new Array('|','/','-','\\');
boolean a = true; // Is that right?
while(a)
{
if(!cnum){int cnum = 0;}
e = document.getElementById(id);
setTimeout(e.innerHTML = c[cnum],750); // changes about every .75 seconds?
int cnum = cnum + 1;
}
}
//-->
</script>
</head>
<body onLoad="doEffect('stuff')">
<div id="stuff">
<!-- This is where its supposed to do it -->
</div>
</body>
</html>
It doesn't work. I know something is wrong, but I don't know what.
Posted: Sat Jun 02, 2007 11:43 am
by superdezign
What's happening? By the look of your code, looks as though it traverses the array once, and then you try accessing array elements that don't exist.
Also, you can just write while(true) for infinite loops, although, I think you should be more interested in creating a variable corresponding with whether or not the function or whatever that you are waiting for has completed or not.
And two suggestions:
1) Only declare e = document.getElementById(id) once before the loop starts. It'll save some computing time.
2) Don't call the function onLoad... I think you'd rather have the function called directly after the 'stuff' div loads.
Posted: Sat Jun 02, 2007 12:34 pm
by toasty2
Ok.
Can I not have a integer called cnum and use it like an array key to show a value from an array like this?:
Here's the updated code:
Code: Select all
<html><head>
<script type="text/javascript" language="JavaScript"><!--
function doEffect(id)
{
e = document.getElementById(id);
var c = new Array('|','/','-','\\');
int cnum = 0;
while(true)
{
setTimeout(e.innerHTML = c[cnum],750);
cnum = cnum + 1;
}
}
//-->
</script></head>
<body>
<div id="stuff"> </div>
<script type="text/javascript" language="JavaScript"><!--
doEffect('stuff')
//-->
</script>
</body>
</html>
Posted: Sat Jun 02, 2007 12:50 pm
by superdezign
toasty2 wrote:Can I not have a integer called cnum and use it like an array key to show a value from an array like this?:
Yes you can. However, once cnum increments beyond 3, it's attempting to access indexes that don't exist.
Posted: Sat Jun 02, 2007 2:15 pm
by toasty2
I know, but I'm not worried about that yet. I can do a simple if and set it back to 0.
Right now my concern is that it isn't working...
Posted: Sat Jun 02, 2007 3:34 pm
by superdezign
Well, you are supposed to do the if statement. It shouldn't be something you do later... It's generally essential to the script and not throwing errors (especially in IE... an error in IE oftentimes halts all JavaScript).
And what about it isn't working? Is the div completely unpopulated? Or is it not changing?
Posted: Sat Jun 02, 2007 3:50 pm
by toasty2
The div is completely unpopulated. Here's the most recent code:
Code: Select all
<html><head>
<script type="text/javascript" language="JavaScript"><!--
function doEffect(id)
{
e = document.getElementById(id);
var c = new Array('|','/','-','\\');
int cnum = 0;
while(true)
{
setTimeout(e.innerHTML = c[cnum],750); // changes about every .75 seconds?
if(cnum==4){cnum = -1;} // set to -1 because otherwise it will completely skip #0, right?
cnum = cnum + 1;
}
}
//-->
</script></head>
<body>
<div id="stuff"> </div>
<script type="text/javascript" language="JavaScript"><!--
doEffect('stuff');
//-->
</script>
</body>
</html>
The Firefox error console says:
Code: Select all
Error: missing ; before statement
Source File: http://localhost/effect.html
Line: 7, Column: 5
Source Code:
int cnum = 0;
Error: doEffect is not defined
Source File: http://localhost/effect.html
Line: 20
Posted: Sat Jun 02, 2007 4:02 pm
by superdezign
I don't believe JavaScript supports the int keyword for creating variables. Try var cnum.
Posted: Sat Jun 02, 2007 5:08 pm
by toasty2
Now the browser tries to freeze when I run the script.

Posted: Sat Jun 02, 2007 5:48 pm
by Ollie Saunders
without the var keyword before e you are defining an implicit global. Add var.
Code: Select all
var c = new Array('|','/','-','\\');
the param here should be an integer defining the number of elements. You want c to store, pretty useless tho really. You probably want to use the array literal which looks like this:
int doesn't exist in javascript, use var
Code: Select all
while(true)
{
setTimeout(e.innerHTML = c[cnum],750); // changes about every .75 seconds?
if(cnum==4){cnum = -1;} // set to -1 because otherwise it will completely skip #0, right?
cnum = cnum + 1;
}
you have no exit condition nor are you breaking from the loop
Posted: Sat Jun 02, 2007 7:20 pm
by superdezign
Change this:
Code: Select all
if(cnum==4){cnum = -1;} // set to -1 because otherwise it will completely skip #0, right?
cnum = cnum + 1;
To this:
Makes more sense.
And I hope your while loop is going to be dependent on some sort of $isFinished variable.