...

View Full Version : Animation Nullification Consternation



Hermetic
11-11-2010, 11:26 PM
I'm attempting to write a function that will cause a small red dot to slide from off-screen, to it's position, 15 px into the page. However every time I run it, it does nothing, and I get a message on Firebug reading "dot 1 is null" on line 4 of the function.

Below is the function:


function openingAnim() {
var dot1 = null;

dot1 = document.getElementById('m-dot1');
dot1.style.left = '0px';
doMove();


function doMove() {
while (dot1.style.left < 15) {
setTimeout("dot1.style.left = parseInt(dot1.style.left)+1+'px';",20);
}
}
}


And here is the id of the dot graphic from my CSS file:


#m-dot1 {
position:absolute;
background:url(../images/m-dot1.png);
width:50px;
height:50px;
outline:none;
left:-50px;
top:89px;
z-index:15
}


Can anyone tell me what I'm doing wrong?

Old Pedant
11-11-2010, 11:45 PM
hyphen isn't a legal character for an ID. It certainly won't work in CSS.

Use an underline, instead.

Now...using it as an id with document.getElementById should have worked.

So...

Show us the actual code for the dot? The <div> or <img> code?
And show us how/when you invoke that function?

As a minor point: Your "slide" will take place in 15*20 milliseconds. More than likely, most people are going to miss something that takes place in less than a third of a second.

Hermetic
11-11-2010, 11:54 PM
hyphen isn't a legal character for an ID. It certainly won't work in CSS.

Use an underline, instead.

Now...using it as an id with document.getElementById should have worked.

So...

Show us the actual code for the dot? The <div> or <img> code?
And show us how/when you invoke that function?

Odd...It worked when I just had it sitting on the screen. I'll change it to see if that helps, though.

Anyway, here's the tag that generates the dot (it also does some other things, but those all work fine.):


<a id="m-dot1" onmouseover="document.getElementById('m-portfolio').style.visibility='visible'" onmouseout="document.getElementById('m-portfolio').style.visibility='hidden'" onmouseup="document.getElementById('wrapper1').style.display='inline-block';document.getElementById('wrapper2').style.display='none'"><span></span></a>


For clarity's sake, here's the dot without the extra mouseover/out crap:


<a id="m-dot1""><span></span></a>


And I call the function by starting my .js file with good ol'


window.onload=openingAnim();



As a minor point: Your "slide" will take place in 15*20 milliseconds. More than likely, most people are going to miss something that takes place in less than a third of a second.

It's only the first part of the animation. I'm going to be expanding from there, so the rapidity will probably be fine. Thanks for thinking of it, though :D

Old Pedant
11-12-2010, 01:06 AM
Hmmm...durned if I see it. document.getElementById() wouldn't care about the hyphen.

But humor me and try a different ID?

I don't suppose it's possible you've got something else with the same id?? (Or name, if this is MSIE you are testing with.)

Old Pedant
11-12-2010, 01:07 AM
By the way, I assume by "line 4" you meant this line

dot1.style.left = '0px';

Hermetic
11-12-2010, 01:56 AM
Hmmm...durned if I see it. document.getElementById() wouldn't care about the hyphen.

But humor me and try a different ID?

I don't suppose it's possible you've got something else with the same id?? (Or name, if this is MSIE you are testing with.)

I already tried different IDs and variable names. The only thing I can think of is that the HTML, CSS and Javascript are all in different files (.html, .css and .js, respectively.) Could that be stopping getElementByID from working?


By the way, I assume by "line 4" you meant this line

dot1.style.left = '0px';


Yes it was

Old Pedant
11-12-2010, 02:11 AM
The only way I see it happening is if the object in question isn't *created* until after the <body onload> time.

Or perhaps it is created as part of the <body onload> but *after* the openingAnim() function runs?

Hermetic
11-12-2010, 02:19 AM
The only way I see it happening is if the object in question isn't *created* until after the <body onload> time.

Or perhaps it is created as part of the <body onload> but *after* the openingAnim() function runs?

I'm not using body onload, I have "window.onload =" at the top of my .js file.

Should I be using a body onload?

Old Pedant
11-12-2010, 02:40 AM
I'm not using body onload, I have "window.onload =" at the top of my .js file.


Same difference, honest. Entirely equivalent.

I meant "at the time the onload event happens".

Hermetic
11-12-2010, 03:09 AM
It worked!

...kinda.

Now I'm no longer getting "variable is null" errors. Or any errors at all. But my dot is still absent.

For some reason, it's not incrementing the left style of the dot's ID.

Here's the function:


function openingAnim() {
var dot1 = null;

dot1 = document.getElementById('mdot1');
dot1.style.left = -50;

while (dot1.style.left < 15) {
setTimeout(doMove1,20);
}


function doMove1() {
dot1.style.left = parseInt(dot1.style.left)+1+'px';
}
}


That tends to lock up the browser.

glenngv
11-12-2010, 08:18 AM
Try this:


dot1.style.left = "-50px";
while (parseInt(dot1.style.left) < 15)

Old Pedant
11-12-2010, 06:57 PM
NO NO NO! That code makes no sense. And Glenn's answer makes it worse, if anything!

Will put JS into an INFINITE LOOP!


while (dot1.style.left < 15) {
setTimeout(doMove1,20);
}

You will set an INFINITE number of timeouts, sitting in that tight little loop. Well, not infinite, because JS will run out of memory. But still...KABLOOEY!



function openingAnim() {

var dot1 = document.getElementById('mdot1');
if ( dot1 == null )
{
alert("mdot1 not found....no animation");
return;
}
dot1.style.left = -50;

setTimeout(doMove1,20);

function doMove1() {
var curleft = parseInt( dot1.style.left );
if ( curleft < 15 )
{
dot1.style.left = (curleft + 1) + 'px';
setTimeout(doMove1,20);
}
}
}

glenngv
11-12-2010, 07:53 PM
I didn't bother to analyze the logic. I was just pointing out that the left property is not numeric and need to be converted. And it needs to be always set with 'px' too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum