Missing event targets with mouseover/mouseout in Firefox 2.0

**Bart Van der Donck** · Jun 27 '08, 07:09 PM

Re: Missing event targets with mouseover/mouseout in Firefox 2.0

markszla...@gma il.com wrote:

Could someone check out the following code and please help me
understand the problem and fix it. It seems like some events are not
firing when my mouse moves over the table cells to quickly causing
some table cells to stay yellow when you move out of them instead of
going back to blue.
>
(Note that I'm using DIV's inside this table because the lightyellow
one will contain an image that will be mousedowned on to start a cell
selection mode which table cells can be selected or deselected quickly
in a column by a drag-N-drop-type procedure). Here is the code.
>
<html>

Missing doctype declaration.

Useth ye W3 Validatour ande Thou shalt acquire Valid Pages:

The W3C Markup Validation Service

http://validator.w3.org/

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

#calendar {
background-color:lightblue ;
}
.calendarHeader {
background-color:lightgree n;
text-align:center

;

}
.calendarRow {
height:30;

height: 30px;

}
</style>
</head>
<body>
<table id='calendar' border='1' width='700' cellpadding='0'
cellspacing='0' >
<tr>
<td class="calendar Header">Jennie</td>
<td class="calendar Header">Mark</td>
</tr>
<tr class='calendar Row'>
<td id='1|Jennie'></td>

Pipe signs are not allowed in ID's:

Basic HTML data types

http://www.w3.org/TR/REC-html40/types.html

var calendar = document.getEle mentById('calen dar'),
slots = calendar.getEle mentsByTagName( 'td'),
slot;
>
function addDIVs(slot) {
var div = document.create Element('div');

I would avoid the name 'div' here.

div.style.posit ion = 'relative';
div.style.backg roundColor = 'transparent';
div.style.visib ility = 'visible';
div.style.top = 0;
div.style.left = 2;
div.style.heigh t = 24;
div.style.width = 342;

Those last four should be with 'px' behind.

slot.appendChil d(div);
var outerDIV = div;
>
div = document.create Element('div');
div.style.posit ion = 'absolute';
div.style.backg roundColor = 'lightyellow';
div.style.visib ility = 'hidden';
div.style.top = 0;
div.style.left = 0;
div.style.heigh t = 24;
div.style.width = 342;
outerDIV.append Child(div);
>
div = document.create Element('div');
div.style.posit ion = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.heigh t = 24;
div.style.width = 342;
div.style.backg roundColor = 'transparent';
div.style.visib ility = 'visible';
outerDIV.append Child(div);
>
}
>
function mouseoutHandler DIV(e) {
var el = getEventTarget( e);
if (el.nextSibling ) {
el.style.visibi lity = "hidden";
el.nextSibling. style.visibilit y = "visible";
}
>
}
>
function mouseoverHandle rDIV(e) {
var el = getEventTarget( e);
el.style.visibi lity = 'hidden';

'el' is empty or no object (MSIE).

el.previousSibl ing.style.visib ility = 'visible';
>
}
>
function addEvent(el, evtType, listener, captures) {
if (el.addEventLis tener) {
el.addEventList ener(evtType, listener, captures);
return true;
}
else if (el.attachEvent ) {
return el.attachEvent( 'on' + evtType, listener);
}
else {
el['on' + evtType] = listener;
}
>
}
>
function getEventTarget( e) {
if (window.event && window.event.sr cElement) { return
window.event.sr cElement; }
if (e && e.target) { return e.target; }
return null;
>
}
>
for (var i=0; i < slots.length; i++) {
if (slots[i].id.length 0) {
addDIVs(slots[i]);
slot = slots[i].firstChild;
addEvent(slot.f irstChild, 'mouseout', mouseoutHandler DIV, false);
addEvent(slot.l astChild, 'mouseover', mouseoverHandle rDIV, false);
}}
>
</script>
</body>
</html>

That's a large amount of code for a quite simple task. I would suggest
to take it one step at the time.

<table border="1">

<tr>
<td>Jennie</td>
<td>Mark</td>
</tr>

<tr>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.bac kgroundColor='l ightyellow';"
onMouseOut = "this.style.bac kgroundColor='l ightblue';"

>

 
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.bac kgroundColor='l ightyellow';"
onMouseOut = "this.style.bac kgroundColor='l ightblue';"

>

 
</td>

</tr>
</table>

Now you have a clear base to start working with your <DIV>s in the
cell. The (background-)image in the <DIV>s could have a transparent
back (.gif) as to keep the light yellow colour intact.

Hope this helps,

--
Bart

**markszlazak@gmail.com** · Jun 27 '08, 07:10 PM

Re: Missing event targets with mouseover/mouseout in Firefox 2.0

On Apr 29, 2:45 am, Bart Van der Donck <b...@nijlen.co mwrote:

markszla...@gma il.com wrote:

Could someone check out the following code and please help me
understand the problem and fix it. It seems like some events are not
firing when my mouse moves over thetablecellsto quickly causing
sometablecellst o stay yellow when you move out of them instead of
going back to blue.

>

(Note that I'm using DIV's inside thistablebecaus e the lightyellow
one will contain an image that will be mousedowned on to start a cell
selection mode whichtablecells can be selected or deselected quickly
in acolumnby a drag-N-drop-type procedure). Here is the code.

>

<html>

>
Missing doctype declaration.
>
Useth ye W3 Validatour ande Thou shalt acquire Valid Pages:http://validator.w3.org/
>

>
<style type="text/css">
>

#calendar {
background-color:lightblue ;
}
.calendarHeader {
background-color:lightgree n;
text-align:center

>
;
>

}
.calendarRow {
height:30;

>
height: 30px;
>

}
</style>
</head>
<body>
<tableid='calen dar' border='1' width='700' cellpadding='0'
cellspacing='0' >
<tr>
<td class="calendar Header">Jennie</td>
<td class="calendar Header">Mark</td>
</tr>
<tr class='calendar Row'>
<td id='1|Jennie'></td>

>
Pipe signs are not allowed in ID's:http://www.w3.org/TR/REC-html40/types.html
>
>
>

>
<script type="text/javascript">
>

var calendar = document.getEle mentById('calen dar'),
slots = calendar.getEle mentsByTagName( 'td'),
slot;

>

function addDIVs(slot) {
var div = document.create Element('div');

>
I would avoid the name 'div' here.
>

div.style.posit ion = 'relative';
div.style.backg roundColor = 'transparent';
div.style.visib ility = 'visible';
div.style.top = 0;
div.style.left = 2;
div.style.heigh t = 24;
div.style.width = 342;

>
Those last four should be with 'px' behind.
>
>
>

slot.appendChil d(div);
var outerDIV = div;

>

div = document.create Element('div');
div.style.posit ion = 'absolute';
div.style.backg roundColor = 'lightyellow';
div.style.visib ility = 'hidden';
div.style.top = 0;
div.style.left = 0;
div.style.heigh t = 24;
div.style.width = 342;
outerDIV.append Child(div);

>

div = document.create Element('div');
div.style.posit ion = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.heigh t = 24;
div.style.width = 342;
div.style.backg roundColor = 'transparent';
div.style.visib ility = 'visible';
outerDIV.append Child(div);

>

}

>

function mouseoutHandler DIV(e) {
var el = getEventTarget( e);
if (el.nextSibling ) {
el.style.visibi lity = "hidden";
el.nextSibling. style.visibilit y = "visible";
}

>

}

>

function mouseoverHandle rDIV(e) {
var el = getEventTarget( e);
el.style.visibi lity = 'hidden';

>
'el' is empty or no object (MSIE).
>
>
>

el.previousSibl ing.style.visib ility = 'visible';

>

}

>

>

}

>

function getEventTarget( e) {
if (window.event && window.event.sr cElement) { return
window.event.sr cElement; }
if (e && e.target) { return e.target; }
return null;

>

}

>

for (var i=0; i < slots.length; i++) {
if (slots[i].id.length 0) {
addDIVs(slots[i]);
slot = slots[i].firstChild;
addEvent(slot.f irstChild, 'mouseout', mouseoutHandler DIV, false);
addEvent(slot.l astChild, 'mouseover', mouseoverHandle rDIV, false);
}}

>

</script>
</body>
</html>

>
That's a large amount of code for a quite simple task. I would suggest
to take it one step at the time.
>
<tableborder="1 ">
>
<tr>
<td>Jennie</td>
<td>Mark</td>
</tr>
>
<tr>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.bac kgroundColor='l ightyellow';"
onMouseOut = "this.style.bac kgroundColor='l ightblue';"

>

 
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.bac kgroundColor='l ightyellow';"
onMouseOut = "this.style.bac kgroundColor='l ightblue';"

>

 
</td>
>
</tr>
</table>
>
Now you have a clear base to start working with your <DIV>s in the
cell. The (background-)image in the <DIV>s could have a transparent
back (.gif) as to keep the light yellow colour intact.
>
Hope this helps,
>
--
Bart

Thanks Bart. I started over before reading your post and got rid of
all those DIV's. But I needed an image in each cell to make a button.
The problem which got me going with all those DIV's was a flickering
effect with mouseover/mouseout between the images and their table
cells background color. That's been fixed simple handlers that
determine whether these moves are from child-to-parent or parent-to-
child.

Missing event targets with mouseover/mouseout in Firefox 2.0

Missing event targets with mouseover/mouseout in Firefox 2.0

Comment

Comment