Pass onmouseover event to the element underneath

**SAM** · Nov 9 '08, 11:05 AM

Re: Pass onmouseover event to the element underneath

Le 11/9/08 3:29 AM, bgold12 a écrit :

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

You can't do :

<span>
<tdsomething </td>
</span>

so your question means nothing

But if the span is in the td give your code
(I can't reproduce the span over right cells)

--
sm

**bgold12** · Nov 10 '08, 03:45 AM

Re: Pass onmouseover event to the element underneath

On Nov 9, 6:04 am, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

Le 11/9/08 3:29 AM, bgold12 a écrit :
>

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

>
You can't do :
>
<span>
<tdsomething </td>
</span>
>
so your question means nothing
>
But if the span is in the td give your code
(I can't reproduce the span over right cells)
>
--
sm

Alright, here's the code:

////////// code //////////

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Testxx </title>
<script type="text/javascript">
function SetElementStyle (elem, cssProperty, cssValue ) {
// sets the css style property to a value of an element
// IMPORTANT NOTE!: any quotes embedded in the cssValue string MUST
BE SINGLE QUOTES ('); otherwise the eval statement string gets screwed
up

eval('elem.styl e.'+cssProperty +' = "'+cssValue+'"; ');

} // end SetElementStyle ()
function SetElementClass (elem, cssClassName ) {
// sets the css style property to a value of an element

elem.className = cssClassName;

} // end SetElementClass ()
</script>
<style type="text/css">
.Table {border:2px solid #00F; }
.TD {width:50px; max-width:50px; vertical-align:top; border:2px
solid #0F0; cursor:pointer; }
.TDHover {width:50px; max-width:50px; vertical-align:top; border:2px
solid #000; cursor:pointer; }
.Span {color:#F0F; border:2px solid #F00; background-color:#A00;
padding-left:80px; padding-right:80px; }
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" class="Table">< tbody><tr><td
class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 1<br />
<span class="Span">Sp an
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 2
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 3
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 4
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 5
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 6
</td></tr></tbody></table>

</body>

</html>

////////// code //////////

And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

**Robin Rattay** · Nov 10 '08, 03:15 PM

Re: Pass onmouseover event to the element underneath

On 10 Nov., 04:36, bgold12 <bgol...@gmail. comwrote:

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

I can't help you with this, but I do have some comments. However it is
a bit strange that you need to have an element break out a table cell
like that. Can you explain why you are doing that? Maybe there is a
better solution.

<?xml version="1.0" encoding="utf-8" ?>

Drop the XML prologue, if you want it to have any chance to get
consistent results in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
>
<head>
<title>Testxx </title>
<script type="text/javascript">
function SetElementStyle (elem, cssProperty, cssValue ) {
eval('elem.styl e.'+cssProperty +' = "'+cssValue+'"; ');

No need for eval here (or ever). Instead use square bracket notation
(google for it):

elem.style[cssProperty] = cssValue;

} // end SetElementStyle ()

Are "Table", "TD" and "Span" the actual class names you are using,
which you set on every single table/td/span? If yes, then you should
look up type selctors, and select simply by the element name. No
classes needed:

table {...}
td {...}
span {...}

.TD {width:50px; max-width:50px; vertical-align:top; border:2px
solid #0F0; cursor:pointer; }
.TDHover {width:50px; max-width:50px; vertical-align:top; border:2px
solid #000; cursor:pointer; }
.Span {color:#F0F; border:2px solid #F00; background-color:#A00;
padding-left:80px; padding-right:80px; }

If you really need the element to break out like that, you should
consider using position: absolute on the span instead of setting
(max-)width on the td.

</style>
</head>
>
<body>
>
<table cellpadding="0" cellspacing="0" class="Table">< tbody><tr><td
class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 1<br />
<span class="Span">Sp an
</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 2
</td></tr></tbody></table>
>
</body>
>
</html>
>
////////// code //////////
>
And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

If you don't care for IE 6 you could drop the JavaScript and just use
CSS:

..TD {width:50px; max-width:50px; vertical-align:top; border:2px solid
#0F0; cursor:pointer; }
..TD:hover {border-color: #000}

Robin

**Thomas 'PointedEars' Lahn** · Nov 11 '08, 11:25 PM

Re: Pass onmouseover event to the element underneath

bgold12 wrote:

SAM wrote:

>>Hey, I have kind of a weird problem. I have a span that I'm
>>intentional ly overflowing a table cell (<td>), so that it stretches
>>over the table cells to the right of the parent table cell. I want the
>>mouseover event to occur for the table cells that lie underneath the
>>overflowed span, but every time i put the mouse on the span the
>>mouseover event for the parent table cell is called. Any suggestions?

>You can't do :
>>
><span>
> <tdsomething </td>
></span>
>>
>so your question means nothing
>>
>But if the span is in the td give your code
>(I can't reproduce the span over right cells)
>[...]

>
Alright, here's the code:

It's atrocious to say the least. And a trimmed-down test case would have
sufficed.

<table cellpadding="0" cellspacing="0" class="Table">< tbody><tr><td
class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"
onmouseout="Set ElementClass(th is, 'TD' );">
Cell 1<br />
<span class="Span">Sp an

^^^^^^^^^^^^^^^ ^^^^^^^^

</td><td class="TD" onmouseover="Se tElementClass(t his, 'TDHover' );"

^^^^^

onmouseout="Set ElementClass(th is, 'TD' );">

As StÃ©phane said: you can't do this; especially not in XHTML, which must be
well-formed. The `span' element has to be ended before the end tag of the
`td' element. In HTML, or XHTML served as text/html you can usually get
away with this, but not in XHTML properly served as application/xhtml+xml.

<http://validator.w3.or g/>

And so, because there is no `span' element at all, the `mouseover' event for
the `td' element occurs, and it is correct that its `onmouseover'
event-handler attribute is considered then.

And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

IE/MSHTML also does not support XHTML to date, so you should serve it Valid
"HTML-compatible" XHTML 1.0 Transitional, according to the XHTML 1.0
Specification, appendix C, as text/html, or better only serve Valid HTML
4.01 (as text/html) to all UAs in the first place.

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Pass onmouseover event to the element underneath

Pass onmouseover event to the element underneath

Comment

Comment

Comment

Comment