Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry Animation Nullification Consternation

    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:
    Code:
    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:
    Code:
    #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?
    Last edited by Hermetic; 11-11-2010 at 11:37 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Hermetic (11-12-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.):
    Code:
    <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:
    Code:
    <a id="m-dot1""><span></span></a>
    And I call the function by starting my .js file with good ol'
    Code:
    window.onload=openingAnim();
    Quote Originally Posted by Old Pedant View Post
    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
    Last edited by Hermetic; 11-12-2010 at 12:25 AM. Reason: Forgot to show how I invoke the function!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    By the way, I assume by "line 4" you meant this line
    Code:
    	dot1.style.left = '0px';
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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?

    Quote Originally Posted by Old Pedant View Post
    By the way, I assume by "line 4" you meant this line
    Code:
    	dot1.style.left = '0px';
    Yes it was

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Quote Originally Posted by Hermetic View Post
    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".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try this:
    Code:
    dot1.style.left = "-50px";
    while (parseInt(dot1.style.left) < 15)
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,212
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    NO NO NO! That code makes no sense. And Glenn's answer makes it worse, if anything!

    Will put JS into an INFINITE LOOP!
    Code:
    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!

    Code:
    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);
                    }        
    	}
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •