Log in

View Full Version : onmouseover not working in IE


4fit?
02-07-2007, 02:01 PM
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!



<!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>
jscheuer1
02-07-2007, 04:19 PM
Try this in IE and in FF, just to see the difference:


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:


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:


<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.
4fit?
02-07-2007, 04:28 PM
Thanks for the response!! I'll take a further look at the code when I get back to my primary PC. Thanks again!