Well thanks again ! I did remember that thread and did not have the time to follow its lengthy trail.
- Glenn "Frank W. Zammetti" <[EMAIL PROTECTED]> 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, [EMAIL PROTECTED] said: > Excellent Frank, thanks a million !!! > What was your inspiration for this ? > > - Glenn > > > > > "Frank W. Zammetti" <[EMAIL PROTECTED]> > 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, [EMAIL PROTECTED] 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 <[EMAIL PROTECTED]> >> 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 >> >> >> >> >> >> >> >> >> [EMAIL PROTECTED] 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: [EMAIL PROTECTED] >> For additional commands, e-mail: [EMAIL PROTECTED] >> >> >> >> > > > --------------------------------------------------------------------- > To unsubscribe, e-mail: [EMAIL PROTECTED] > For additional commands, e-mail: [EMAIL PROTECTED] > > > > --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]