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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving with javascript

    Hello everyone. I am trying to make a flag with css and then move it with javascript.

    Code:
    <html>
    <head>
    <title>Flag</title>
    
    <link rel="stylesheet" type="text/css" href="flag3.css" />
    
    <script language="javascript">
    Hmove=-100;
    function moveObjRight(obj) 
    {    
           obj.style.left=Hmove;
           Hmove+=4;
           if(Hmove<900)
                 window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
            
    }
    
    </script>
    
    </head>
    <body>
    <h1>The flag of ___ by www</h1>
    
    <div id="bar3">
    <div id="bar2">
    <div id="bar1">
    </div>
    <br />
    <br />
    <br />
    <br />
    </div>
    <br />
    <br />
    <br />
    <br />
    </div>
    
    <script language="JavaScript">
    moveObjRight(bar3);
    </script>
        
    
    </body>
    </html>
    This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window.

    Any help will be appreciated. Thank you.

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    You could make a moveObjectLeft function and call it when the flag gets to the end like this:

    Code:
    function moveObjRight(obj) 
    {    
           obj.style.left=Hmove;
           Hmove+=4;
           if(Hmove<900)
                 window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
           else
                 moveObjLeft(obj);
    }
    
    function moveObjLeft(obj) 
    {    
           obj.style.left=Hmove;
           Hmove-=4;
           if(Hmove>0)
                 window.setTimeout("moveObjLeft(" +obj.id+ ");", 0);
           else
                 moveObjRight(obj);
    }
    Why are you using setTimeout with a time of 0? why not just call the function directly?

    Also I'm guessing you've only tested in internet explorer - HTML elements' ids are not usually global variables, so when you call moveObjxx you should really be explicit and use document.getElementById("bar3") (both at the bottom and in the setTimeout call)

    Edit - two more things - 1) language=javascript isn't really used any more, it's standard to use type="text/javascript" and 2) it's a good idea to always use some unit when setting CSS values (obj.style.left=Hmove+"px")
    Last edited by gusblake; 12-30-2010 at 08:47 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,418 Times in 4,383 Posts
    NO NO NO NO!!!

    The problem is that you are passing obj.id when you call the function via setTimeout:
    Code:
    window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
    But then the function is *EXPECTING* an ACTUAL OBJECT, *NOT* an ID!!!!

    Code:
    function moveObjRight(obj) 
    {    
           obj.style.left = Hmove;
    The fix is easy: Pass *AND EXPECT* the ID as a string!

    Code:
    <script type="text/javascript">
    Hmove=-100;
    function moveObjRight( id ) 
    {    
           var obj = document.getElementById(id);
           obj.style.left=Hmove+ "px"; // yes! without "px" all but MSIE barf
           Hmove+=4;
           if(Hmove<900)
                 window.setTimeout("moveObjRight('" + id+ "');", 0);
            
    }
    </script>
    and then start it off via
    Code:
    moveObjRight("bar3");
    Note the quotes around "bar3" !!!
    Last edited by Old Pedant; 12-30-2010 at 09:39 PM.
    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.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your answer. I made the changes and everything works. There's just one thing left.

    I do not want my code to rely on a fixed-width element surrounding it … can I make it bounce between the browser window edges?

    I think this method should help
    Code:
    document.body.offsetWidth
    It's just that i'm not sure where to put it and how to use it.

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Something like this:

    Code:
    var divw=document.getElementById("bar3").offsetWidth;
    var max_left=document.body.offsetWidth-divw;
    Then change 900 to max_left

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,418 Times in 4,383 Posts
    But there's no reason to have both a move left and move right.

    Code:
    var Hmove = 0;
    var Hmoveby = 4;
    function moveFlag( id ) 
    {    
           var obj = document.getElementById(id);
    
           obj.style.left=Hmove + "px";
    
           Hmove += Hmoveby;
    
           var max_left = document.body.offsetWidth - obj.offsetWidth;
           if( Hmove > max_left || Hmove < 0 ) {
               Hmoveby = - Hmoveby;
               Hmove += Hmoveby;
           }
    
           setTimeout('moveFlag("' + id + '");', 20);
    }
    
    ....
    <body onload="moveFlag('bar3');">
    ...
    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.


  •  

    Posting Permissions

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