" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
Sometime back we created a feature of highlight text(each word is inside a div) when user moves mouse while keeping left button pressed.A few days ago firefox has launched its new version 8.0,and we are getting the complain of breaking the highlight functionality in firefox 8 while in all other versions it was runing fine .
After digging into code i found that firefox 8 is preventing the mouseover event to fire on subseuent divs when a user left clicks and start draging from a div with its overflow set to hidden or auto.
To better understand it lets have an example :-
<html>
<head>
<Script language="javascript">
function doMouseover(e,obj)
{
if (!e) var e = window.event;
obj.style.backgroundColor = 'yellow';
}
function doMouseout(e,obj)
{
if (!e) var e = window.event;
obj.style.backgroundColor = '#ffffcc';
}
function doMove(e)
{
if (!e) var e = window.event;
return false;
}
</script>
<style>
body {
background-color: #ccddee;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
div.box {
margin-left: 100px;
margin-top: 30px;
background-color: #ffffcc;
color: black;
border: solid black 1px;
width: 200px;
height: 40px;
}
div.dragstart {
position: absolute;
left: 400px;
top: 50px;
width: 200px;
height: 100px;
border: solid black 1px;
color: black;
background-color: #ddeeff;
overflow: auto;
padding: 5px;
}
div.dragstart2 {
position: absolute;
left: 400px;
top: 200px;
width: 200px;
height: 100px;
border: solid black 1px;
color: black;
background-color: #ddeeff;
overflow: hidden;
padding: 5px;
}
div.dragstart3 {
position: absolute;
left: 400px;
top: 350px;
width: 200px;
height: 100px;
border: solid black 1px;
color: black;
background-color: #ddeeff;
overflow: visible;
padding: 5px;
}
</style>
<script type='text/javascript' src='drag.js'></script>
</head>
<body onmousemove='doMove(event)'>
<div class='dragstart'>
<span>overflow:auto in this DIV</span>
</div>
<div class='dragstart2'>
<span>overflow:hidden in this DIV</span>
</div>
<div class='dragstart3' >
<span>overflow:visible in this DIV</span>
</div>
<div class='box' onmouseover='doMouseover(event,this)' onmouseout='doMouseout(event,this)'>
</div>
<div class='box' onmouseover='doMouseover(event,this)' onmouseout='doMouseout(event,this)'>
</div>
<div class='box' onmouseover='doMouseover(event,this)' onmouseout='doMouseout(event,this)'>
</div>
<div class='box' onmouseover='doMouseover(event,this)' onmouseout='doMouseout(event,this)'>
</div>
</html>
go to the top blue div on the right, and “click & drag” from there to the yellow divs ( press the mouse button while on the blue div then move the mouse to the yellow divs without releasing the button).The mouseover event appears to not fire – the brighter yellow does not show up.
Same is true for the second blue div from top having overflow as hidden.
what happens here is that when you click on the div with overflow:auto/hidden AND , it prevents mouseover events on OTHER divs from firing.
Workaround for the problem:-
Just set the overflow of divs having text inside as visible,you wil see that mouseover events starts firing
Example :- Click & drag from the bottom blue div, and you should see the brighter yellow of the mouseover