Missing event targets with mouseover/mouseout in Firefox 2.0

markszlazak

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>
<head>
<title></title>
<style>
#calendar {
background-color:lightblue;
}
.calendarHeader {
background-color:lightgreen;
text-align:center
}
.calendarRow {
height:30;
}
</style>
</head>
<body>
<table id='calendar' border='1' width='700' cellpadding='0'
cellspacing='0'>
<tr>
<td class="calendarHeader">Jennie</td>
<td class="calendarHeader">Mark</td>
</tr>
<tr class='calendarRow'>
<td id='1|Jennie'></td>
<td id='1|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='2|Jennie'></td>
<td id='2|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='3|Jennie'></td>
<td id='3|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='4|Jennie'></td>
<td id='4|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='5|Jennie'></td>
<td id='5|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='6|Jennie'></td>
<td id='6|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='7|Jennie'></td>
<td id='7|Mark'></td>
</tr>
</table>
<script>
var calendar = document.getElementById('calendar'),
slots = calendar.getElementsByTagName('td'),
slot;

function addDIVs(slot) {
var div = document.createElement('div');
div.style.position = 'relative';
div.style.backgroundColor = 'transparent';
div.style.visibility = 'visible';
div.style.top = 0;
div.style.left = 2;
div.style.height = 24;
div.style.width = 342;
slot.appendChild(div);
var outerDIV = div;

div = document.createElement('div');
div.style.position = 'absolute';
div.style.backgroundColor = 'lightyellow';
div.style.visibility = 'hidden';
div.style.top = 0;
div.style.left = 0;
div.style.height = 24;
div.style.width = 342;
outerDIV.appendChild(div);

div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.height = 24;
div.style.width = 342;
div.style.backgroundColor = 'transparent';
div.style.visibility = 'visible';
outerDIV.appendChild(div);
}

function mouseoutHandlerDIV(e) {
var el = getEventTarget(e);
if (el.nextSibling) {
el.style.visibility = "hidden";
el.nextSibling.style.visibility = "visible";
}
}

function mouseoverHandlerDIV(e) {
var el = getEventTarget(e);
el.style.visibility = 'hidden';
el.previousSibling.style.visibility = 'visible';
}

function addEvent(el, evtType, listener, captures) {
if (el.addEventListener) {
el.addEventListener(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.srcElement) { return
window.event.srcElement; }
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.firstChild, 'mouseout', mouseoutHandlerDIV, false);
addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, false);
}
}
</script>
</body>
</html>

Jun 27 '08 #1

Subscribe Post Reply

2256

Bart Van der Donck

markszla...@gmail.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:
http://validator.w3.org/

<head>
<title></title>
<style>

* * * * #calendar {
* * * * * * * * background-color:lightblue;
* * * * }
* * * * .calendarHeader {
* * * * * * * * background-color:lightgreen;
* * * * * * * * 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="calendarHeader">Jennie</td>
* * * * * * * * <td class="calendarHeader">Mark</td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='1|Jennie'></td>

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

* * * * * * * * <td id='1|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='2|Jennie'></td>
* * * * * * * * <td id='2|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='3|Jennie'></td>
* * * * * * * * <td id='3|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='4|Jennie'></td>
* * * * * * * * <td id='4|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='5|Jennie'></td>
* * * * * * * * <td id='5|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='6|Jennie'></td>
* * * * * * * * <td id='6|Mark'></td>
* * * * </tr>
* * * * <tr class='calendarRow'>
* * * * * * * * <td id='7|Jennie'></td>
* * * * * * * * <td id='7|Mark'></td>
* * * * </tr>
</table>
<script>

var calendar = document.getElementById('calendar'),
* * * * slots = calendar.getElementsByTagName('td'),
* * * * slot;

function addDIVs(slot) {
* * * * var div = document.createElement('div');

I would avoid the name 'div' here.

* * * * div.style.position = 'relative';
* * * * div.style.backgroundColor = 'transparent';
* * * * div.style.visibility = 'visible';
* * * * div.style.top = 0;
* * * * div.style.left = 2;
* * * * div.style.height = 24;
* * * * div.style.width = 342;

Those last four should be with 'px' behind.

* * * * slot.appendChild(div);
* * * * var outerDIV = div;

* * * * div = document.createElement('div');
* * * * div.style.position = 'absolute';
* * * * div.style.backgroundColor = 'lightyellow';
* * * * div.style.visibility = 'hidden';
* * * * div.style.top = 0;
* * * * div.style.left = 0;
* * * * div.style.height = 24;
* * * * div.style.width = 342;
* * * * outerDIV.appendChild(div);

* * * * div = document.createElement('div');
* * * * div.style.position = 'absolute';
* * * * div.style.top = 0;
* * * * div.style.left = 0;
* * * * div.style.height = 24;
* * * * div.style.width = 342;
* * * * div.style.backgroundColor = 'transparent';
* * * * div.style.visibility = 'visible';
* * * * outerDIV.appendChild(div);

}

function mouseoutHandlerDIV(e) {
* * * * var el = getEventTarget(e);
* * * * if (el.nextSibling) {
* * * * * * * * el.style.visibility = "hidden";
* * * * * * * * el.nextSibling.style.visibility = "visible";
* * * * }

}

function mouseoverHandlerDIV(e) {
* * * * var el = getEventTarget(e);
* * * * el.style.visibility = 'hidden';

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

* * * * el.previousSibling.style.visibility = 'visible';

}

function addEvent(el, evtType, listener, captures) {
* * * * if (el.addEventListener) {
* * * * * * * * el.addEventListener(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.srcElement) { return
window.event.srcElement; }
* * * * 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.firstChild, 'mouseout', mouseoutHandlerDIV, false);
* * * * * * * * addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, 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.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"

>

 
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"

>

 
</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

Jun 27 '08 #2

markszlazak

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

markszla...@gmail.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
sometablecellsto stay yellow when you move out of them instead of
going back to blue.

(Note that I'm using DIV's inside thistablebecause the lightyellow
one will contain an image that will be mousedowned on to start a cell
selection mode whichtablecellscan 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/

<head>
<title></title>
<style>

<style type="text/css">

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

;

}
.calendarRow {
height:30;

height: 30px;

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

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

<td id='1|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='2|Jennie'></td>
<td id='2|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='3|Jennie'></td>
<td id='3|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='4|Jennie'></td>
<td id='4|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='5|Jennie'></td>
<td id='5|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='6|Jennie'></td>
<td id='6|Mark'></td>
</tr>
<tr class='calendarRow'>
<td id='7|Jennie'></td>
<td id='7|Mark'></td>
</tr>
</table>
<script>

<script type="text/javascript">

var calendar = document.getElementById('calendar'),
slots = calendar.getElementsByTagName('td'),
slot;

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

I would avoid the name 'div' here.

div.style.position = 'relative';
div.style.backgroundColor = 'transparent';
div.style.visibility = 'visible';
div.style.top = 0;
div.style.left = 2;
div.style.height = 24;
div.style.width = 342;

Those last four should be with 'px' behind.

slot.appendChild(div);
var outerDIV = div;

div = document.createElement('div');
div.style.position = 'absolute';
div.style.backgroundColor = 'lightyellow';
div.style.visibility = 'hidden';
div.style.top = 0;
div.style.left = 0;
div.style.height = 24;
div.style.width = 342;
outerDIV.appendChild(div);

div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.height = 24;
div.style.width = 342;
div.style.backgroundColor = 'transparent';
div.style.visibility = 'visible';
outerDIV.appendChild(div);

}

function mouseoutHandlerDIV(e) {
var el = getEventTarget(e);
if (el.nextSibling) {
el.style.visibility = "hidden";
el.nextSibling.style.visibility = "visible";
}

}

function mouseoverHandlerDIV(e) {
var el = getEventTarget(e);
el.style.visibility = 'hidden';

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

el.previousSibling.style.visibility = 'visible';

}

function addEvent(el, evtType, listener, captures) {
if (el.addEventListener) {
el.addEventListener(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.srcElement) { return
window.event.srcElement; }
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.firstChild, 'mouseout', mouseoutHandlerDIV, false);
addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, 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.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"
>
 
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"
>
 
</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.

Jun 27 '08 #3

Similar topics

Tricky mouseover event for row

by: Colin Steadman | last post by:

Help! I'm a stupid HTML bod and I dont do Javascript! I have a grey coloured table that displays certain columns in either red, green or orange to give meaning and emphasis to certain data. ...

Javascript

Multiple onmouseout events in IE when returning false to the onDrag event.

by: Tom | last post by:

Hi, In the following code I have reproduced a problem in IE that is extremely annoying for my application. <html> <head> <script type="text/javascript">

Javascript

loop mouseover event?

by: giloosh | last post by:

Hello All, How can you continue the mouseover event while the mouse is still over an object? For example: I put my mouse over a hyperlink and that triggers an object to move 10px to the right....

Javascript

onmouseleave event in IE

by: jaysonnward | last post by:

Hello All: I've recently been recreating some 'dropdown menus' for a website I manage. I'm writing all my event handlers into my .js file. I've got the coding to work in Firefox, but the...

Javascript

Problem with IE6 not registering an event handler

by: Andrew Ip | last post by:

Hi everyone, I'm trying to dynamically create an image map for a particular image on my website, and I'm running into an issue where I try to register the "mouseover" and "mouseout" events for...

Javascript

Popup window generated on mouseover event interfering with mouse pointer

by: dheepakk | last post by:

Hi All, When a mouseover event takes place over a link the popup window is displayed. I also have a mouseout on the link.So if the popup window comes up,has a dimension such that the...

Javascript

Using "this" and "window.event.srcElement" in IE

by: anEchteTrilingue | last post by:

Hi everybody. Thank you for reading my post. I am having trouble getting "this" to work in all versions of IE (it's fine in Firefox, opera, konqueror, etc). What I would like to do is add an...

Javascript

mouseover function not work on firefox with dynamic created dropdown menu

by: SunshineInTheRain | last post by:

The following code is dynamic create dropdownmenu which data within pulled from database However, the code work well on IE but not on Firefox. On Firefox, the whole mouseover and mouseout function...

Javascript

Detecting support for event types

by: RobG | last post by:

When using createEvent, an eventType parameter must be provided as an argument. This can be one of those specified in DOM 2 or 3 Events, or it might be a proprietary eventType. My problem is...

Javascript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA