table cells

A

Andrew

Hi,

In the following code, if I move my mouse across the row from left to
right, events are fired in the following order

<table>
<tr onmouseover="alert('TRover');" onmouseout="alert('TRout');">
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">One</td>
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">Two</td>
</tr>
</table>


TDOver (one), TROver, TDOut (one), TROut, TDOver (Two), TROver, TDOut
(Two), TROut.


Why is the TROver and TROut even fired when moving the mouse between TDs
in the same row, i havent left the tr tag?

And more importantly, what can I do about it? I want to fire a JS
function on TR over and TR out, but its fired when moving between cells
as well which is a right pain!

Is there any workaround for this?


Thanks

Andrew
 
J

Jonathan N. Little

Andrew said:
Hi,

In the following code, if I move my mouse across the row from left to
right, events are fired in the following order

<table>
<tr onmouseover="alert('TRover');" onmouseout="alert('TRout');">
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">One</td>
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">Two</td>
</tr>
</table>


TDOver (one), TROver, TDOut (one), TROut, TDOver (Two), TROver, TDOut
(Two), TROut.


Why is the TROver and TROut even fired when moving the mouse between TDs
in the same row, i havent left the tr tag?

Maybe an illustration might help,

in the HEAD of your test page add

<style type="text/css">
TD { background-color: yellow; }
</style>

then look at your table....then add this

<style type="text/css">
TABLE { border-collapse: collapse; }
TD { background-color: yellow; }
</style>

and look again. The space between cells is what I think you are
observing. If the borders are not collapsed as you move from cell 1 to
cell 2 you will pass over a bit of the TR again, so

(C1)TRout > TRover > TRout > (C2)TRover
 
A

Andrew

Jonathan N. Little wrote:
The space between cells is what I think you are
observing. If the borders are not collapsed as you move from cell 1 to
cell 2 you will pass over a bit of the TR again


Hi,

Yeah they are collapsed and it makes no difference.
Surely by this logic though, it would never get called at the edges
because the TDs butt right up to them?

<tr><td></td><td></td></tr>

Any other suggestions or workarounds?


heres my css:

table
{
border-spacing:0px;
border-collapse: collapse;
border-width: 0px;
width: 1000px;
}

td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
margin: 0px 0px 0px 0px;
cursor: pointer;
vertical-align: top;

}


Thanks for the help :)

Andrew
 
J

Jonathan N. Little

Andrew said:
Jonathan N. Little wrote:
The space between cells is what I think you are


Hi,

Yeah they are collapsed and it makes no difference.
Surely by this logic though, it would never get called at the edges
because the TDs butt right up to them?
<snip code>

Okay, let's cut to the chase...instead of playing twenty questions give
us a URL and let us *see* what you are doing and maybe we can come up
with either a solution or an alternative...
 
B

Beauregard T. Shagnasty

Andrew said:

Well, that was exciting.

Congratulations on becoming the first page I've run into with FF 1.5.0.3
that caused a total lockup, necessitating killing the browser process
completely. It went into a constant, total, loop of flashing dialog
windows as soon as I hovered the Description column.

My suggestion: dump this whole idea immediately.
 
T

Toby Inkster

Andrew said:
TDOver (one), TROver, TDOut (one), TROut, TDOver (Two), TROver, TDOut
(Two), TROut.

Why is the TROver and TROut even fired when moving the mouse between TDs
in the same row, i havent left the tr tag?

It's called event bubbling. You'll get a better answer on one of the
dedicated Javascript groups than you will here.
 
A

Andrew

Jonathan said:
Okay why must you trap mouseovers and mouseouts on both TRs and TDs?

I dont need to, thats just to show you whats going on.

All i want is the onmouseover event of the tr to work ask you would
expect. When you enter the TR it fires. Move around within the tr and it
doesn't fire. Leave the tr and the onmouseout fires.

Andrew
 
J

Jonathan N. Little

Andrew said:

Also for what it is worth in your CSS you are setting the TD's
border-width to 0 but your are not collapsing the borders on the table.
To do so to the TABLE element apply "border-collapse: collapse;" and to
center table on page "margin-right: auto; margin-left: auto;" not the
deprecated CENTER element.

Now to trapping mouseovers, if you need to identify both rows and
columns location rather than trap event on both TR & TD elements only do
it on TDs. Then either id the row by in your mouseover script identify
the TD from its ID and and get the the row from the TR ID via the
element.parent property.

Or a simpler method is if your table's output in generated with a
server-side script just encode both the row ID and column ID in each
cell. 3 options I can think of off-hand.

Fixed length is easy: <td id="aaaaabbbbb"> where aaaaa is row identifier
and bbbbb is column identifier and a simple split string function could
break apart the two ids

Or tokens in the identifier <td id="R1234C12"> (Row = 1234, Column = 12)

Or delimiter token in the identifier <td id="S123_2"> Search ID for the
'_' and the from half is the Job number and after is the column number.
 
J

Jonathan N. Little

Beauregard said:
Well, that was exciting.

Congratulations on becoming the first page I've run into with FF 1.5.0.3
that caused a total lockup, necessitating killing the browser process
completely. It went into a constant, total, loop of flashing dialog
windows as soon as I hovered the Description column.

Hmmm didn't do it for my with same on Win2K!
My suggestion: dump this whole idea immediately.
Yes I think is idea should be scraped, because I think he can get what
he wants without trapping on both.
 
A

Andrew

Beauregard said:
Well, that was exciting.

Congratulations on becoming the first page I've run into with FF 1.5.0.3
that caused a total lockup, necessitating killing the browser process
completely. It went into a constant, total, loop of flashing dialog
windows as soon as I hovered the Description column.

My suggestion: dump this whole idea immediately.


I can't see how that can happen to be honest. Alert windows are only
fired when entering or exiting the tr/tds. If you do get an infinite
loop then thats a FF bug. I've tested it in IE 6.6, 7, FF 1.5.0.3, opera
etc and it didn't do that to me. View the source. You may have seen a
few as you moved around the table but not an infinite loop.

Sorry if it made you close your browser and you lost any urls you were on.

Andrew
 
A

Andrew

Jonathan said:
Also for what it is worth in your CSS you are setting the TD's
border-width to 0 but your are not collapsing the borders on the table.
<snip>


Hi,


Thanks for all the info, I totally understand what you're saying however
I don't think I've explained myself properly. Let me start again.

I need to call a JS function when the mouse is moved over and out of a
row in a table. Moving the mouse around inside a single row should cause
no JS calls.

However, as my example shows, a tr-out and tr-over is fired when moving
the mouse between TDs. This is what I need to prevent.


wrt border collapsing, it should be in the css, i updated it a while
ago, hit a refresh a bit you might be getting a cached version.

Does this clear up any confusion?

Thanks a lot for all your pointers so far :)

Andrew
 
J

Jonathan N. Little

Andrew said:
<snip>


Hi,


Thanks for all the info, I totally understand what you're saying however
I don't think I've explained myself properly. Let me start again.

I need to call a JS function when the mouse is moved over and out of a
row in a table. Moving the mouse around inside a single row should cause
no JS calls.

However, as my example shows, a tr-out and tr-over is fired when moving
the mouse between TDs. This is what I need to prevent.

You have an event propagation problem, because once leave a TD the
parent will get a event that you reentering it and leaving before you
can enter the adjacent TD. In the past I had fiddled with precisely
controlling event propagation but it becomes quite message considering
MSIE's limited to only event 'bubbling' and cross browser support gets
very messy. As it was alluding to, there may be a easier/better way to
approach the problem. Your example does not illustrate why to need to
trap mouseovers on both TD and TR elements. If you enlighten us a bit as
to why might help a bit.

wrt border collapsing, it should be in the css, i updated it a while
ago, hit a refresh a bit you might be getting a cached version.

Not in my cache, I had never been you your page!
 
B

Beauregard T. Shagnasty

Jonathan said:
Hmmm didn't do it for my with same on Win2K!

Win2K here as well. I was checking the page, got JavaScript alert boxes
from the first couple of columns, clicked "Ok" for all, then hovered the
Description column and it went haywire. [That's Merikan for bonkers.]
Yes I think is idea should be scraped, because I think he can get what
he wants without trapping on both.

Scraped, and scrapped both. :)
 
B

Beauregard T. Shagnasty

Andrew said:
I can't see how that can happen to be honest. Alert windows are only
fired when entering or exiting the tr/tds. If you do get an infinite
loop then thats a FF bug. I've tested it in IE 6.6, 7, FF 1.5.0.3,
opera etc and it didn't do that to me. View the source. You may have
seen a few as you moved around the table but not an infinite loop.

Thinking about it a bit more, the cause may be because the alert dialog
is (at least at my sized window) over the Description column, so
clicking Ok to close it causes an immediate RE-hover, and a new dialog.
Consequently, I could never close it without generating a new one.

Endless Loop.
Sorry if it made you close your browser and you lost any urls you
were on.

Fortunately, there was nothing terribly important in the other
half-dozen tabs that were open.
 
A

Andrew

Jonathan said:
You have an event propagation problem, because once leave a TD the
parent will get a event that you reentering it and leaving before you
can enter the adjacent TD. In the past I had fiddled with precisely
controlling event propagation but it becomes quite message considering
MSIE's limited to only event 'bubbling' and cross browser support gets
very messy. As it was alluding to, there may be a easier/better way to
approach the problem. Your example does not illustrate why to need to
trap mouseovers on both TD and TR elements. If you enlighten us a bit as
to why might help a bit.


I dont need to!

That was just in my example to show whats going on.

Andrew
 
N

Neredbojias

Hi,

In the following code, if I move my mouse across the row from left to
right, events are fired in the following order

<table>
<tr onmouseover="alert('TRover');" onmouseout="alert('TRout');">
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">One</td>
<td onmouseover="alert('TDover');" onmouseout="alert('TDout');">Two</td>
</tr>
</table>


TDOver (one), TROver, TDOut (one), TROut, TDOver (Two), TROver, TDOut
(Two), TROut.


Why is the TROver and TROut even fired when moving the mouse between TDs
in the same row, i havent left the tr tag?

And more importantly, what can I do about it? I want to fire a JS
function on TR over and TR out, but its fired when moving between cells
as well which is a right pain!

Is there any workaround for this?

Yes. It's simple. I've done it - many times. You just need timing loops
and possibly specific-location iding.

The idea is roughly this: delay the execution of the mouseout code a bit
and cancel it completely if a new mouseover event occurs _in the same row_.
Depending on what you are actually trying to do with the mouseovers, you
may be able to cancel the -out code on _any_ -over. Each situation is
slightly different but the main method is the same.

Generally, I'd use events on the cells only, not the rows. It might be a
bit more hassle but I think it works better in the long run.
 
A

Andrew

Neredbojias said:
Yes. It's simple. I've done it - many times. You just need timing loops
and possibly specific-location iding.


Ok, Thanks,

Any chance of a bit of example code?

:)


Thanks

Andrew
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top