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

Post by toasty2 »

Alright, I've revised it, Firefox error console says e is undefined on line 12, which is strange because I assigned it earlier.

Code: Select all

<html><head>
<script type="text/javascript" language="JavaScript"><!--
var effect = false; // global variable, right?...so that I can have a stop function??
function doEffect(id)
{
	effect = true;
	var e = document.getElementById(id);
	var c = new Array('|','/','-','\\');
	var cnum = 0;
	while(effect)
	{
		setTimeout("e.innerHTML = c[cnum];",1000); // line 12
		cnum++;
		if(cnum >= 4) cnum = 0;
	}
}
function stopEffect(id)
{
	effect = false;
	var e = document.getElementById(id);
	e.innerHTML = '';
}
//-->
</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 »

Hmm... Well, everything about this script just seems to be wrong to me.

The loop inside of the function seems like a bad idea for being able to end it, and the loop is bound to crash a lot of browsers. I'd take everything step by step... It seems like you're trying to do too much at once rather than taking it little by little.

As for setTimeout, I haven't used it before. The fact that it takes a string bothers me.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

Well, do you have a better idea for how to do this? I'm open to pretty much anything if it works.

I want to avoid the use of a gif..text only websites are awesome. :)
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

<html>
    <head>
        <script type="application/javascript">
            window.onload = function()
            {
                twiddle(document.getElementById('twiddle1'), 250);
                twiddle(document.getElementById('twiddle2'), 100);
            }
            var twiddle = function(dom, delayBetweenSteps)
            {
                var animation = ['-', '\\', '|', '/'];
                var i = 0;
                var frames = animation.length;

                var step = function()
                {
                    dom.firstChild.nodeValue = animation[i  % frames];
                    i++;
                    setTimeout(step, delayBetweenSteps);
                }
                step();
            }
        </script>
    </head>
    <body style="font-family:courier;font-weight:bold">
        <span id="twiddle1">-</span><br />
        Twiddling in progress...<span id="twiddle2">-</span>
    </body>
</html>
works in firefox.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Doesn't IE6 and lower require a string in setTimeout? I haven't verified this, but I've heard rumors to that extent.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

superdezign wrote:Doesn't IE6 and lower require a string in setTimeout? I haven't verified this, but I've heard rumors to that extent.
Could be. Not sure.
Post Reply