Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    firefox doesn't do onmouseover event when holding mouse on a div

    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

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Much cleaner example for you:
    Code:
    <!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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by crazygamer
    ... 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
    Quote Originally Posted by crazygamer
    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

    Will post up an update shortly.

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry about it... already solved. Thanks for the help

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you have a solution, please let other people know (with a small example). It would benefit community.
    rm -f /

  • #7
    New Coder
    Join Date
    Sep 2005
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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;
    }

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    var ie=document.all;

    doesn't just identify IE because there are other browsers (eg. Opera) that also recognise document.all
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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