Javascript text loading effect?

JavaScript and client side scripting.

Moderator: General Moderators

toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Javascript text loading effect?

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

What about storing each "frame" in an array and step through it....
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

Sounds good, but I still don't know how to do the effect.

Here we have the array:

Code: Select all

var c=new Array('|','/','-','\\')
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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?:

Code: Select all

c[cnum]
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>
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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?:

Code: Select all

c[cnum]
Yes you can. However, once cnum increments beyond 3, it's attempting to access indexes that don't exist.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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?
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

I don't believe JavaScript supports the int keyword for creating variables. Try var cnum.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

Now the browser tries to freeze when I run the script. 8O
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

Code: Select all

e = document.getElementById(id);
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:

Code: Select all

var c = ['|', '/', '-', '\\'];

Code: Select all

int cnum = 0;
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
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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:

Code: Select all

cnum++;
if(cnum >= 4) cnum = 0;
Makes more sense.


And I hope your while loop is going to be dependent on some sort of $isFinished variable.
Post Reply