...

View Full Version : firefox doesn't do onmouseover event when holding mouse on a div



crazygamer
09-17-2005, 01:47 AM
Here's the source for reference: http://www.reallycoolspace.com/rearrange.html

In IE, everything works perfectly fine. In Firefox, when you hold your mouse on one of the images you'll also see that it's printing out the id of the div that it's in (it's doing it with a document.onmouseover event). However, if you hold your mouse somewhere in the div (inside the border) but NOT on the image, it won't print out the div name.

The question... Is there ANY way for me to be able to tell which div the user has their mouse over as they're moving their mouse (not on mousedown or mouseup, because I'll need to be changing certain properties of the divs as the mouse moves over them while the mouse button is down)?

thanks for any help

martin_narg
09-17-2005, 02:40 AM
Much cleaner example for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<base href="http://www.reallycoolspace.com/">
<style type="text/css">
.wrap {
width: 480px;
}

.wrap div {
margin:5px;
width:80px;
height:80px;
float:left;
border:1px solid black;
text-align:center;
overflow:hidden;
}

.wrap div img {
margin-top: 5px;
}

.selected {
background-color: #FFFFCC;
}
</style>
<script type="text/javascript">
function divOver(e) {
var objDiv = e ? e.target : window.event.srcElement;
document.getElementById("divTest").innerHTML = objDiv.id;
}

function divOut(e) {
document.getElementById("divTest").innerHTML = "";
}

function divClick(e) {
var objDiv = e ? e.target : window.event.srcElement
objDiv.className = "selected";
var a = document.getElementById("divWrap").getElementsByTagName("div");
for(var i=0; a[i]; i++) {
if(a[i] != objDiv) {
a[i].className = "";
}
}
}

window.onload = function() {
var a = document.getElementById("divWrap").getElementsByTagName("div");
for(var i=0; a[i]; i++) {
a[i].onmouseover = divOver;
a[i].onmouseout = divOut;
a[i].onclick = divClick;
}
}
</script>
</head>

<body>
<div id="divWrap" class="wrap">
<div id="div1"><img src="1.gif"></div>
<div id="div2"><img src="2.gif"></div>
<div id="div3"><img src="3.gif"></div>
<div id="div4"><img src="4.gif"></div>
<div id="div5"><img src="5.gif"></div>
<div id="div6"><img src="6.gif"></div>
<div id="div7"><img src="7.gif"></div>
<div id="div8"><img src="8.gif"></div>
<div id="div8"><img src="9.gif"></div>
<div id="div10"><img src="10.gif"></div>
</div>
<div id="divTest"></div>
</body>
</html>

Hope this helps to solve the task you are trying to achieve.

m_n

crazygamer
09-17-2005, 02:52 AM
Your code has the same bug. If you hold down your mouse on one of the divs and then start moving it, it stops showing you what div you're on. Thanks for the help though!

martin_narg
09-17-2005, 01:02 PM
... Is there ANY way for me to be able to tell which div the user has their mouse over as they're moving their mouse (not on mousedown or mouseup


Your code has the same bug. If you hold down your mouse on one of the divs and then start moving it, it stops showing you what div you're on.

Not a bug mate, ambiguous brief :rolleyes:

Will post up an update shortly.

m_n

crazygamer
09-17-2005, 11:53 PM
Don't worry about it... already solved. Thanks for the help :thumbsup:

rm-f
09-18-2005, 12:02 AM
If you have a solution, please let other people know (with a small example). It would benefit community.

crazygamer
09-18-2005, 05:33 AM
Sure thing, here's the code I made for firefox:

Obviously, ie is boolean found by var ie=document.all;
dragImgDivs is an array of divs.



document.onmousemove=mousemove;
function mousemove(e) {
if(!ie) { //firefox bug, dragging after mousedown on div doesn't refresh any event handlers
for(i = 0; i < dragImgDivs.length; i++) {
mouseX = e.pageX;
mouseY = e.pageY;
curDiv = dragImgDivs[i];
divLeft = curDiv.offsetLeft;
divRight = divLeft + curDiv.offsetWidth;
divTop = curDiv.offsetTop;
divBottom = divTop + curDiv.offsetHeight;

if(mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom) {
//THE MOUSE IS INSIDE OF THE OBJECT THAT WE'RE CHECKING FOR
}
}
mouseoverDiv = null;
clearDragDecors();
}
return false;
}

felgall
09-18-2005, 10:58 PM
var ie=document.all;

doesn't just identify IE because there are other browsers (eg. Opera) that also recognise document.all



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum