Results 1 to 3 of 3

Thread: onmouseover not working in IE

  1. #1
    Join Date
    Jul 2006
    Location
    Graham, NC
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onmouseover not working in IE

    I'm working on a required project for a scripting course I am currently taking. I am supposed to write a script that will cause a button to move around the screen when the user tries to click on it. The example in the book shows this huge drawn out array of left and top positions. I did this a totally different way by generating random numbers to use for the positions. This works perfectly in FireFox and Netscape, but does not work in IE.

    So, I put it in DreamWeaver and ran a browser check on it and the only error that came back was on the onmouseover event of the button. Does anyone know a way to make this work in IE? Thanks in advance for any help you can provide!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<title>Moving Button</title>
    		<style type="text/css">
    			.btnmove {
    				position:absolute;
    				left:5px;
    				top:50px;
    				width:75px;
    			}
    		</style>
    		<script type="text/javascript">
    			<!--
    			//fuction to create a random rounded number between a determined
    			//start and end number
    			function rand(start, end) {
    				return Math.round(Math.random()*(end-start)) + start;
    			}
    			//variables for left and top attributes of the button
    			var l = 0, t = 0
    			//the button move function
    			function buttonMove() {
    				//get the button
    				var button = document.getElementById("button");
    				//generate random number to use for left style
    				if (l <= (window.innerWidth / 2)) 
    					l = (rand((window.innerWidth / 2), (window.innerWidth)-75));
    				else 
    					l = (rand(5, (window.innerWidth / 2)));
    				//apply left style
    				button.style.left = l + "px";
    				//generate random number to use for top style		
    				if (t <= (window.innerHeight / 2))
    					t = (rand((window.innerHeight / 2), (window.innerHeight)-25));
    				else
    					t = (rand(50, (window.innerHeight / 2)));
    				//apply top style
    				button.style.top = t + "px";
    			}
    			-->
    		</script>
    	</head>
    	<body>
    		<h2>Catch Me If You Can!!!</h2>
    		<input onmouseover="buttonMove();" class="btnmove" id="button"
    			name="mover" value="Click Me!" type="button">
    	</body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try this in IE and in FF, just to see the difference:

    Code:
    alert(typeof window.innerWidth)
    Anyways, the innerWidth and innerHeight properties of the window object are not supported in IE. In modern versions of IE and with the DOCTYPE that you are using, these expressions will get you an equivalent value:

    document.documentElement.clientWidth

    and:

    document.documentElement.clientHeight

    In modern FF, these properties can be used but, in Opera and in older Mozilla based browsers, they will not generate the desired values. Also, in older IE versions, the document.body, not the document.documentElement must be used.

    Oddly, your script should work in Opera 9.01 as is. However, it doesn't. The button does move but, you cannot see this until you bring another window into focus and then return to the Opera browser window. I am not sure what causes this odd behavior.

    Without solving that last bit, at least not yet, here is a rewrite of your function buttonMove() that should be compatible with most browsers:

    Code:
    			function buttonMove() {
    var truebody=document.compatMode && document.compatMode!="BackCompat"? document.documentElement : document.body;
    window.innerWidth=window.innerWidth? window.innerWidth : truebody.clientWidth;
    window.innerHeight=window.innerHeight? window.innerHeight : truebody.clientHeight;
    				//get the button
    				var button = document.getElementById("button");
    				//generate random number to use for left style
    				if (l <= (window.innerWidth / 2)) 
    					l = (rand((window.innerWidth / 2), (window.innerWidth)-75));
    				else 
    					l = (rand(5, (window.innerWidth / 2)));
    				//apply left style
    				button.style.left = l + "px";
    				//generate random number to use for top style		
    				if (t <= (window.innerHeight / 2))
    					t = (rand((window.innerHeight / 2), (window.innerHeight)-25));
    				else
    					t = (rand(50, (window.innerHeight / 2)));
    				//apply top style
    				button.style.top = t + "px";
    			}
    Ahh, the problem in Opera appears to be just a rendering bug, if an actual button element is used, the effect works seamlessly:

    HTML Code:
    		<button onmouseover="buttonMove();" class="btnmove" id="button"
    			name="mover">Click Me!</button>
    This does not affect modern IE or FF but, the button element was unsupported at some point in the past for Mozilla based and other browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Location
    Graham, NC
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the response!! I'll take a further look at the code when I get back to my primary PC. Thanks again!

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
  •