Pass onmouseover event to the element underneath

B

bgold12

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?

Thanks.
 
S

SAM

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

You can't do :

<span>
<td> something </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)
 
B

bgold12

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


You can't do :

<span>
   <td> something </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)
Click to expand...

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.style.'+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="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 2
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 3
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 4
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 5
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, '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.
 
R

Robin Rattay

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

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.style.'+cssProperty+' = "'+cssValue+'";');
Click to expand...

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

elem.style[cssProperty] = cssValue;
} // end SetElementStyle()
Click to expand...
<style type="text/css">
.Table {border:2px solid #00F; }
Click to expand...

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

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="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, '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.
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

bgold12 said:
SAM said:
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?
Click to expand...
You can't do :

<span>
<td> something </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)
[...]
Click to expand...

Alright, here's the code:
Click to expand...

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="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span ^^^^^^^^^^^^^^^^^^^^^^^
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );" ^^^^^
onmouseout="SetElementClass(this, 'TD' );">
Click to expand...

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

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

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
 

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

Sort by number of characters 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
InnerHTML does not return Onmouseover 2
Why does onMouseOver fire twice? 3
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. 4
Onmouseover and IE6 6
onMouseOver/onMouseOut not working 12
using the DOM to change the CLASS attribute 6

Members online

Total: 35 (members: 1, guests: 34)
Robots: 436

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top