Lucifrex Posted December 16, 2005 Share Posted December 16, 2005 This is supposed to make "HELLO" bounce around. It's not working though. What's wrong with it? <html> <head> <script type="text/javascript"> <!-- var y = 1 var x = 1 var ud = true var lr = true function scroll() { if(y > 1300) ud = false if(y < 0) ud = true if(x > 700) lr = false if(x < 0) lr = true if(ud == true)?y=y+1:y=y-1 if(lr == true)?x=x+1:x=x-1 document.getElementById('head').innerHTML="<h1 style=\"position:absolute; left:"+x+"px; top:"+(y+150)+"px; z-index:-1\"><b>HELLO</b></h1>" t = setTimeout('scroll()',20) } //--> </script> </head> <body> <div id="head"> <script type="text/javascript"> <!-- scroll() //--> </script> </div> </body></html> Link to comment Share on other sites More sharing options...
hacknsack Posted December 16, 2005 Share Posted December 16, 2005 I would highly recommend that you get in the habit of using ";" at the end of your lines.One of the original problems was in the way you built your div content string.Also, you don't need 'if' with the Conditional Operatorhttp://www.w3schools.com/js/js_operators.aspAnother recommendation is to not re-write the innerHTML but just use the "style" properties "top" and "left" to move the object.And z-index: -1 kills it in Mozilla. <html> <head> <script type="text/javascript"> <!-- var y = 60; var x = 150; var ud = true; var lr = true; function scroll() { if(y > 600) ud = false; if(y < 0) ud = true; if(x > 700) lr = false; if(x < 0) lr = true; (ud == true)? y++ : y--; (lr == true)? x++ : x--; //alert(x + ' ' + y); document.getElementById('head').innerHTML= '<h1 style="position:absolute; left:' + x + 'px; top:' +(y)+ 'px; z-index: 1"><b>HELLO</b></h1>'; t = setTimeout('scroll()',20); } function scrollb() { document.getElementById('div2').style.top = x + 'px'; document.getElementById('div2').style.left = y + 'px'; t2 = setTimeout('scrollb()',20); } function init(){ scroll(); scrollb(); } window.onload = init; //--> </script> </head> <body> <div id="head"> </div> <div id="div2" style="position: absolute;"> Moving text without re-writing the innerHTML </div> </body></html> Let us know if you need more.Thanks, Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now