By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,782 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

Pass onmouseover event to the element underneath

P: n/a
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.
Nov 9 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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?
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
Nov 9 '08 #2

P: n/a
On Nov 9, 6:04*am, SAM <stephanemoriaux.NoAd...@wanadoo.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.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.
Nov 10 '08 #3

P: n/a
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.style.'+cssProperty+' = "'+cssValue+'";');
No need for eval here (or ever). Instead use square bracket notation
(google for it):

elem.style[cssProperty] = cssValue;
} // end SetElementStyle()
<style type="text/css">
.Table {border:2px solid #00F; }
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="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.
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
Nov 10 '08 #4

P: n/a
bgold12 wrote:
SAM 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)
[...]

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="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' );">
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.
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
Nov 11 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.