[prev in list] [next in list] [prev in thread] [next in thread]
List: struts-user
Subject: Re: [OT] DOM & JavaScript
From: gdeschen () cmhc-schl ! gc ! ca
Date: 2005-04-28 17:00:57
Message-ID: OF53402B8C.5E15D039-ON85256FF1.005D5BA4-85256FF1.005D77F0 () cmhc-schl ! gc ! ca
[Download RAW message or body]
--=_alternative 005D77EC85256FF1_=
Content-Type: text/plain; charset="US-ASCII"
Well thanks again !
I did remember that thread and did not have the time to follow its lengthy
trail.
- Glenn
"Frank W. Zammetti" <fzlists@omnytex.com>
28/04/2005 12:54 PM
Please respond to
"Struts Users Mailing List" <user@struts.apache.org>
To
"Struts Users Mailing List" <user@struts.apache.org>
cc
"Struts Users Mailing List" <user@struts.apache.org>
Subject
Re: [OT] DOM & JavaScript
Classification
Actually, I'm not entirely sure :) I can't remember ever using an
anonymous function in JS myself frankly, but I remembered a sample that
Martin posted a week or so ago during our discussion on Ajax, and it just
kind of clicked!
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 12:51 pm, gdeschen@cmhc-schl.gc.ca said:
> Excellent Frank, thanks a million !!!
> What was your inspiration for this ?
>
> - Glenn
>
>
>
>
> "Frank W. Zammetti" <fzlists@omnytex.com>
> 28/04/2005 10:47 AM
> Please respond to
> "Struts Users Mailing List" <user@struts.apache.org>
>
>
> To
> "Struts Users Mailing List" <user@struts.apache.org>
> cc
> "Struts Users Mailing List" <user@struts.apache.org>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> Ah, got it! You can use an anonymous function... The suggestion of
> setting a common handler is fine except that you will have to use
> getElementById to get a reference to the element to change... using an
> anonymous function you have access to the this keyword, so it's cleaner.
> Here's a complete working page (at least in IE)...
>
> <html>
> <head>
> <title>Test</title>
> <style>
> .hilite { background-color:#ff0000; }
> .normal { background-color:#ffffff; }
> </style>
> <script>
> function createTable(table) {
> row = table.insertRow();
> row.setAttribute("className", "normal");
> row.onmouseover = function() { this.className='hilite'; }
> row.onmouseout = function() { this.className='normal'; }
> cell = row.insertCell();
> cell.innerHTML = "new1";
> cell = row.insertCell();
> cell.innerHTML = "new2";
> }
> </script>
> <head>
> <body>
> <table id="theTable" border="1">
> <tr onMouseOver="this.className='hilite';"
> onMouseOut="this.className='normal';">
> <td>dummy1</td><td>dummy2</td>
> </tr>
> </table>
> <input type="button" onClick="createTable(theTable);" value="Add Row">
> </body></html>
>
> --
> Frank W. Zammetti
> Founder and Chief Software Architect
> Omnytex Technologies
> http://www.omnytex.com
>
> On Thu, April 28, 2005 9:58 am, gdeschen@cmhc-schl.gc.ca said:
>> Merci Laurent !
>>
>> Okay so then when you say that it must be functions..
>> I presume that the HTML with coded attributes such as onMouseOver and
>> onMouseOut... in IE the browser parses the data and internally creates
>> functions to handle the mouse events.
>> So when I try to dynamically modify the DOM for IE... I must recreate
> the
>> mouse handlers.
>> Would this be a valid way of describing the situation?
>>
>> I must now understand the element hierarchy along with the event firing
>> sequence...
>> Since I'd like to hilite the row... now it is hiliting the cell of a
>> row... :(
>>
>> - Glenn
>>
>>
>>
>> Laurent <lg83news@free.fr>
>> 28/04/2005 09:11 AM
>> Please respond to
>> "Struts Users Mailing List" <user@struts.apache.org>
>>
>>
>> To
>> Struts Users Mailing List <user@struts.apache.org>
>> cc
>>
>> Subject
>> Re: [OT] DOM & JavaScript
>> Classification
>>
>>
>>
>>
>>
>>
>>
>>
>> gdeschen@cmhc-schl.gc.ca wrote:
>>> // Only add a row when changing the last row of the table
>>> if ("s"+(rowWithData) == selectId) {
>>> var row = table.insertRow(lastRowInTable);
>>> var className = "rowNormal";
>>>
>>> if (lastRowInTable % 2 == 0) {
>>> className = "rowAlternate";
>>> }
>>> row.className = className;
>>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>>> row.setAttribute("onmouseout", "this.className = '" +
className
>> +
>>> "'");
>>
>>
>> That's not how it works (not in IE at least). The event attributes'
>> values should be event listeners (i.e. functions), not strings of
>> javascript code.
>>
>> Try this:
>>
>> function changeClassName(e) {
>> if (!e) e=window.event;
>> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
>> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
>> }
>>
>> row.onmouseover = changeClassName; // without quotes nor parentheses
>>
>> function getEventTarget(e) {
>> if (e.srcElement) return e.srcElement;
>> else return e.currentTarget;
>> }
>>
>> Note: the code above aims to be cross-browser, as IE behaves completely
>> differently from any other browser.
>>
>> BTW, all event attributes are *lower case*: onmouseover, onmouseout
(not
>> onMouseOver...)
>>
>> Hope this helps.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
--=_alternative 005D77EC85256FF1_=--
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic