SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouse movement not working in Firefox

    So I'm working on a breakout game, and this is a test I found online and I did some editing in it. The red square should follow the cursor, and it does in Safari and IE, but it doesn't in Firefox. Any clue what has to be done to make it work?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code is hard to read. Do you have to have it all in such long lines?

    Consider using variables to store references to html elements, so you don't repeat your code again and again.

    You are using IE only properties, such as posLeft. Use the top and left properties instead. They will return a String though, so you need to use parseInt to cast to a Number.
    Last edited by Pepejeria; Aug 12, 2006 at 00:51.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New source/reference

    I tried using variables to store things like
    var paddleLeft = document.getElementById("paddle");
    paddleLeft.style.left = X;

    But I get null or paddleLeft has no properties errors (depending on the browser).

    I got my test to work in Firefox (with top and left), but it's still not working in the real thing, even when I had the full document.getElementById. Won't work at all anymore. Any ideas?

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reason paddleLeft is null is because the html node is not found. The JavaScript is triggered before the html node is loaded, therefore null.

    You need to create the reference to it after the HTML has loaded

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, of course. Got that fixed. Although for some reason with this file it still won't work at all with .left, it only works with .posLeft (although not in Firefox obviously). I can't find what's making it do that...

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See what the JavaScript console is saying in Firefox. It's very helpful.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I know, but that's the problem. It doesn't say anything. Neither does Safari.

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link you provided still shows the old error, how about updating that url and lets take it from there?

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having problems with uploading stuff (the connection where I'm at right now is awful), so I'll post the code.

    I somewhat fixed the problem. When the doctype is not there, it works fine. When it's in, there's no movement. Very strange...and that's not the solution I want, since I kinda want the doctype.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="content-language" content="en"/>
    <style>
    #board
    {
    	background-color:#000000;
    	position:absolute:
    	top:100px;
    	bottom:100px;
    	width:500px;
    	height:400px;
    	overflow:hidden;
    }
    
    #paddle
    {
    	background-color:#ffffff;
    	position:absolute;
    	top:370px;
    	left:220px;
    	width:80px;
    	height:15px;
    }
    
    #ball
    {
    	background-color:#ffffff;
    	position:absolute;
    	top:200px;
    	left:100px;
    	width:12px;
    	height:12px;
    }
    </style>
    </head>
    <body onunload = "stopGame();">
    <div id="board" onMouseMove = "X = event.clientX;movePaddle();">
    <!-- this onMouseMove could be moved to the body if necessary -->
    	<div id="paddle"></div>
    	<div id="ball"></div>
    </div>
    <form action="">
    <input type="button" value="New Game" onclick="newGame();"/>
    </form>
    <script language="javascript" type="text/javascript">
    var ballLeft, ballTop;
    var gameTimerOn = false;
    var gameTimerId = null;
    var paddlePos;
    var paddleInfo = document.getElementById("paddle").style;
    var ballInfo = document.getElementById("ball").style;
    
    function newGame()
    {
    	ballInfo.posLeft = 100;
    	ballInfo.posTop = 200;
    	gameTimerOn = true;
    	loopIt();
    }
    
    function loopIt()
    {
    	if (gameTimerOn)
    	{
    		gameTimerId = setTimeout("loopIt()", 10);
    	}
    }
    
    function movePaddle()
    {
    	paddlePos = X - 40;
    	if(paddlePos < 8) { paddlePos = 8; }
    	if(paddlePos > 430) { paddlePos = 430; }
    	paddleInfo.left = paddlePos;
    }
    
    function stopGame()
    {
    	clearTimeout(gameTimerId);
    	gameTimerOn = false;
    	return true;
    }
    </script>
    </body>
    </html>

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page will be rendered in standard compliance mode if you use a proper DOCTYPE. What you need to do then is to also provide the unit:
    Code:
    myElement.style.left = iLeft + "px";


Bookmarks

Posting Permissions

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