Hi, I'm playing around with tables (TOM vs. DOM etc.)
I cannot figure out an effective highlight mechanics for the cells:
1) No problems with:
<td ...onMouseOver/Out background change>
some text inside
</td>
2)
<td ...onMouseOver/Out background change>
<input type="checkbox" name="cb022" value="cbv022">
some text inside
<some href inside>
</td>
In the second case (as expected) we are getting a bubbly fountain of
mouseover/mouseout events while moving over the cell: from the cell itself
and from the content elements. So the cell blinks, or the link is not
painted but not the cell, or the link is painted, but the cell is not, and
so on.
What would be any more or less simple way to:
onmouseover paint the cell and all its content
keep it all painted until you leave the cell
?
11  4382 
VK wrote:
[...] In the second case (as expected) we are getting a bubbly fountain of
mouseover/mouseout events while moving over the cell: from the cell itself
and from the content elements. So the cell blinks, or the link is not
painted but not the cell, or the link is painted, but the cell is not, and
so on.
Not really as expected. Have you messed with the default inline/block
attributes of the elements you are using?
What would be any more or less simple way to:
onmouseover paint the cell and all its content
keep it all painted until you leave the cell
?
I think you post has languished because this is really a CSS thing, and
nothing to do with JavaScript.
I can't replicate your issue in Firefox or IE 6, the closest I can get
is to put a different background on the href using a:hover
{background-color: red}, but I would expect that to look awful.
Below is the code I used to test your issue, if it doesn't "flash" for
you then your issue is elsewhere. Try
comp.infosystem s. www.authoring.stylesheets
for more help
--
Rob
</script>
<style type="text/css">
a:hover {background-color: red;}
</style>
</head>
<body>
<form action="">
<input type="text" name="xx" value=' '><br>
<input type="button" value="click me"
onclick="testNu ll(this.form.xx .value);">
</form>
<table border="1">
<tr>
<td onmouseover="th is.style.backgr oundColor = 'blue';"
onmouseout="thi s.style.backgro undColor = 'pink';">
<p>Here is a test</p>
<form action="">
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
</form><br>
a bit more text
<a href="http://www.microsoft.c om"><br>
Link to Microsoft<br></a>
and even more text
</td>
<td onmouseover="th is.style.backgr oundColor = 'red';"
onmouseout="thi s.style.backgro undColor = 'pink';">
<p>Here is a test</p>
<form action="">
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
</form><br>
a bit more text
<a href="http://www.apple.com"> <br>Link to Apple<br></a>
and even more text
</td>
</tr>
</table>
I'm talking about external table manipulation (table is by itself, the
script by itself).
Also, form elements are all appeirtaning to one enclosing form (how is it in
the real life, doesn't affect the showcase, just to mention the code
change).
From your example:
(I know it's MICROSOFT style, DOM is coming a bit later).
Try to move over the right cell. Is it something with my code or with the
browser? And how to fix it?
<html>
<head>
<script>
function test() {
var c = document.getEle mentById('table 01').tBodies[0].rows[0].cells[1];
c.attachEvent(' onmouseover',hi ghlight);
c.attachEvent(' onmouseout',res tore);
}
function highlight() {
event.srcElemen t.style.backgro undColor='red';
}
function restore() {
event.srcElemen t.style.backgro undColor='white ';
}
</script>
</head>
<body onLoad="test()" >
<table id="table01" border="1">
<form action="">
<tr>
<td onmouseover="th is.style.backgr oundColor = 'blue';"
onmouseout="thi s.style.backgro undColor = 'pink';">
<p>Here is a test</p>
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
<br>
a bit more text
<a href="http://www.microsoft.c om"><br>
Link to Microsoft<br></a>
and even more text
</td>
<td>
<p>Here is a test</p>
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
<br>
a bit more text
<a href="http://www.apple.com"> <br>Link to Apple<br></a>
and even more text
</td>
</tr>
</form>
</table>
</body>
</html>
On Wed, 24 Nov 2004 12:57:19 +0100, VK <sc**********@y ahoo.com> wrote:
[snip] Is it something with my code or with the browser?
Technically neither as there is nothing "wrong" here. However, the effect
is due to your code.
What you either don't realise, or have forgotten, is that events "bubble".
An event might initially be triggered on a certain element, but once it
has finished there, the event then continues up the document tree, firing
additional listeners as it goes. As you base the colour change on the
source of the event, you end up changing the colour of the cell when you
mouse-over the cell, and the colour of descendents separately when you
mouse-over them.
And how to fix it?
Don't change the colour of the source element, just the cell (as you do
with the intrinsic events in the first cell).
To do that purely in script, you'll have to abandon attachEvent as it
doesn't set the this operator correctly.
If you're only attaching one event listener per element,
function highlight() {
this.style.back groundColor = ...;
}
function restore() {
this.style.back groundColor = '';
}
elementRef.onmo useover = highlight;
elementRef.onmo useout = restore;
will suffice (with proper feature testing, of course). If there will be
multiple listeners, you'll need something more advanced (say if that's the
case).
[snip]
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail. What you either don't realise, or have forgotten, is that events "bubble".
Of course I remember that, I just was wondering how to "poke" only the right
bubbles :-)
To do that purely in script, you'll have to abandon attachEvent as it
doesn't set the this operator correctly.
I'm getting there... As I understand,
objRef.onEvent = someFunction;
creates some kind of "exclusive" event listener: objRef gets only the events
originated from it and for it.
objRef.attachEv ent('event', someFunction);
attaches objRef to the "bubble stream", so it receives all events originated
from it also as from all underlying event producers.
Am I right or attachEvent is simply broken in IE?
On Wed, 24 Nov 2004 15:14:22 +0100, VK <sc**********@y ahoo.com> wrote: What you either don't realise, or have forgotten, is that events
"bubble".
Of course I remember that, I just was wondering how to "poke" only the
right bubbles :-)
Fair enough.
You could compare the value of the this operator with the event's target
(or srcElement) property. That would tell you if you're leaving the cell
or a descendent, however:
1) You'd still have to avoid attachEvent.
2) If you set style properties using the event target, rather than
on the cell only, this will cause the style properties on
descendants to persist once you've left the cell.
So, my previous advice stands: only manipulate the cell. To do that purely in script, you'll have to abandon attachEvent as it
doesn't set the this operator correctly.
I'm getting there... As I understand,
objRef.onEvent = someFunction;
creates some kind of "exclusive" event listener: objRef gets only the
events originated from it and for it.
objRef.attachEv ent('event', someFunction);
attaches objRef to the "bubble stream", so it receives all events
originated from it also as from all underlying event producers.
Am I right or attachEvent is simply broken in IE?
No and yes. :)
It doesn't matter how you add an event listener to an element. It will
always play a full role in the event flow[1].
The W3C DOM specifies a currentTarget event property which refers to the
event's present location in the document tree, and a target event property
which refers to the original dispatch point for the event. IE only
provides the latter in srcElement, leaving the this operator your only
option for knowing the current target. As attachEvent doesn't set this
properly, I'd say yes, it's broken.
That help?
Mike
[1] Capturing event listeners are an exception, but IE doesn't implement a
capturing phase.
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
> That help?
Yes, a lot. Thank you, Mike
Michael Winter wrote:
[...] 1) You'd still have to avoid attachEvent.
2) If you set style properties using the event target, rather than
on the cell only, this will cause the style properties on
descendants to persist once you've left the cell.
So, my previous advice stands: only manipulate the cell.
[...]
The sample attachEvent code posted by the OP works in IE but not
Firefox - the code gets to c.attacheEvent( ) and fails with:
c.attachEvent is not a function
As far as I can discover, attacheEvent is a Microsoft invention and
should probably be avoided for that reason alone.
--
Rob
VK wrote: That help?
Yes, a lot. Thank you, Mike
You may find this useful, particularly the comments about turning
bubbling off and the broken IE event model.
<URL:http://www.quirksmode. org/js/events_order.ht ml>
--
Rob
On Thu, 25 Nov 2004 00:41:48 GMT, RobG <rg***@iinet.ne t.auau> wrote:
[snip] The sample attachEvent code posted by the OP works in IE but not
Firefox - the code gets to c.attacheEvent( ) and fails with:
c.attachEvent is not a function
I know. It should. :)
As far as I can discover, attacheEvent is a Microsoft invention
Yes, it is.
and should probably be avoided for that reason alone.
The (possible) reason for using attachEvent is that like addEventListene r
from the W3C DOM Events module, it allows you to attach multiple event
listeners to the same element without destroying any existing ones.
However, it's possible to provide the same functionality through the
on<event> properties with some supporting code, so I'd use
addEventListene r when possible and on<event> with support otherwise.
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Gerg |
last post by:
The datagrid has a tablestyle applied to it, and there
are DataGridTextBoxColumn and each DataGridTextBoxColumn
has an array of DataGridTextBox objects.
Private Sub highlight(ByVal str As String)
Dim myTextBoxcolumn As DataGridTextBoxColumn
Dim myTextBox As DataGridTextBox
'loop through the cells of the datagrid, searching
for the string
|
by: Toby Austin |
last post by:
I'm trying to replace <table>s with <div>s as much as possible.
However, I can't figure out how to do the following…
<table>
<tr>
<td valign="top" width="100%">some data that will 'stretch'</td>
<td valign="top" width="300">some data that won't 'stetch'</td>
</tr>
</table>
|
by: KP |
last post by:
I want to automatically highlight parts of a webpage (make them
standout from the rest of the contents). These parts could be as small
as single image tags, and as large as complex tables, parts of tables
etc. What is guaranteed, however, is that the part to be highlighted
will always be a complete block. Ideally I would like to is insert a
single html tag around this block so that the contents of the block
will standout on the page. I...
|
by: J Krugman |
last post by:
I have set up an HTML table with clickable cells (the cells contain
only text). They work fine, but I would like to give the user some
visual feedback to indicate that a cell has been clicked. I'd like
this feedback to be the usual highlight on mouseDown, un-highlight
on mouseUp, but I can't figure out how to do it. Help?
Thanks in advance!
jill
--
|
by: slitvinov |
last post by:
I am learning Relax NG. The problem is that I cannot figure
out how to make a schema for a table.
In my case I would like to make a table with any name of child
elements (columns) but columns should have the same number of
child elements (cell). Say this file is valid
<table>
<column>
<cell/>
<cell/>
</column>
| | |
by: phil-news-nospam |
last post by:
Is there really any advantage to using DIV elements with float style
properies, vs. the old method of TABLE and TR and TD?
I'm finding that by using DIV, it still involves the same number of
elements in the HTML to get everything just right. When you consider
the class attribute on the DIV elements, there's not much size savings
anymore for using DIV.
There are other disadvantages to not using TABLE/TR/TD, such as the
lack of ability...
|
by: toffee |
last post by:
Hi all,
I have a table with 12 cols and 10 rows. When a user clicks on a table cell;
the page is refreshed and displays some data below the table dependant on
whichever cell was selected.
I would like to make it so that whichever cell was clicked; the background
color is changed - so that when the user sees the data, (s)he can tell which
cell it relates to.
Does anyone know of a clever way to do this ?
|
by: Dave |
last post by:
Is there a way to selectively highlight text in an OverLib popup? I'd
like to be able to make some text stand out from the rest of the text
that is displayed.
I tried using a one-cell table with background set to yellow, but that
caused the popup not to work at all (this might be a syntax problem -
I haven't been able to find any syntax examples for putting a table
inside an OverLib call)
Thanks
|
by: Jukka K. Korpela |
last post by:
Sub titulo "Re: DIV borders different in IE7 when in td"
scripsit Ben C:
This seems to be the heart of the matter, and I'm trying to get a real
discussion started, by moving the discussion to the right group
(c.i.w.a.stylesheets) and changing the Subject line.
It seems to me that IE 7, specifically in "standards mode" (!),
misbehaves when a table cell has a declared width but the actual width
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
