Missing event targets with mouseover/mouseout in Firefox 2.0

M

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.id.length > 0) {
addDIVs(slots);
slot = slots.firstChild;
addEvent(slot.firstChild, 'mouseout', mouseoutHandlerDIV, false);
addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, false);
}
}
</script>
</body>
</html>
 
B

Bart Van der Donck

[email protected] said:
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>
Click to expand...

Missing doctype declaration.

Useth ye W3 Validatour ande Thou shalt acquire Valid Pages:
http://validator.w3.org/
<head>
<title></title>
<style>
Click to expand...

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

        }
        .calendarRow {
                height:30;
Click to expand...

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>
Click to expand...

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>
Click to expand...

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

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

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;
Click to expand...

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';
Click to expand...

'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.id.length > 0) {
                addDIVs(slots);
                slot = slots.firstChild;
                addEvent(slot.firstChild, 'mouseout', mouseoutHandlerDIV, false);
                addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, false);
        }}

</script>
</body>
</html>
Click to expand...


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';"&nbsp;
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"&nbsp;
</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,
 
M

markszlazak

[email protected] said:
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.
Click to expand...
(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.
Click to expand...
<html>
Click to expand...

Missing doctype declaration.

Useth ye W3 Validatour ande Thou shalt acquire Valid Pages:http://validator.w3.org/
<head>
<title></title>
<style>
Click to expand...

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

}
.calendarRow {
height:30;
Click to expand...

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>
Click to expand...

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>
Click to expand...

var calendar = document.getElementById('calendar'),
slots = calendar.getElementsByTagName('td'),
slot;
Click to expand...
function addDIVs(slot) {
var div = document.createElement('div');
Click to expand...

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;
Click to expand...

Those last four should be with 'px' behind.


slot.appendChild(div);
var outerDIV = div;
Click to expand...
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);
Click to expand...
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';
Click to expand...

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


el.previousSibling.style.visibility = 'visible';
}
Click to expand...

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;
}
}
Click to expand...

function getEventTarget(e) {
if (window.event && window.event.srcElement) { return
window.event.srcElement; }
if (e && e.target) { return e.target; }
return null;
}
Click to expand...

for (var i=0; i < slots.length; i++) {
if (slots.id.length > 0) {
addDIVs(slots);
slot = slots.firstChild;
addEvent(slot.firstChild, 'mouseout', mouseoutHandlerDIV, false);
addEvent(slot.lastChild, 'mouseover', mouseoverHandlerDIV, false);
}}
Click to expand...

</script>
</body>
</html>
Click to expand...

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';"&nbsp;
</td>
<td
style = "background-color: lightblue; cursor: pointer;"
onMouseOver = "this.style.backgroundColor='lightyellow';"
onMouseOut = "this.style.backgroundColor='lightblue';"&nbsp;
</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,
Click to expand...


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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. 4
Why do mouseup events sometimes fire if the mouse is not released? 2
I want to Display Excel As HTML In js 2
Only one table shows up with the information 2
Checking dynamically populated data using ajax with user entered value 5
Creating Table with Javascript abd Adding Events dynamically to each 0
center div over another div 1
Help with code 0

Members online

Total: 33 (members: 1, guests: 32)
Robots: 332

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,071
Latest member
MetabolicSolutionsKeto

Latest Threads

Top