Setting onMouseOut attribute within JavaScript

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • relaxedrob@optushome.com.au

    Setting onMouseOut attribute within JavaScript

    Howdy All!

    I am really stuck with this one - I want to completely create a table
    within JavaScript and insert it into the document, with onMouseOut and
    onMouseOver handlers in the table rows.

    Below is a sample of the code I have created. It all works in Netscape
    7.1, but in IE 6 it shows the table but the handlers do not run. I can
    prove the handlers are even there (see the commented out alert command
    in the code) so why aren't they being called??

    Any help on this problem would be most appreciated!

    Rob
    :)


    <html><head><ti tle>Untitled Document</title>
    <script type="text/javascript" language="JavaS cript">
    function setAttribute (object, attributeName, attributeValue)
    {
    var attributeNode = document.create Attribute (attributeName) ;
    attributeNode.v alue = attributeValue;
    object.setAttri buteNode (attributeNode) ;
    } // end setAttribute method
    function writeTable()
    {
    var menuTable = document.create Element ("table");
    var tableBody = document.create Element ("tbody");
    menuTable.appen dChild (tableBody);
    menuTable.setAt tribute ("width", "100%");
    menuTable.setAt tribute ("border", "0");
    menuTable.setAt tribute ("cellPaddin g", "0");
    menuTable.setAt tribute ("cellSpacin g", "0");

    // Create a table row for each node in menu array.
    for (var index = 0; index < 10; index ++)
    {
    var tableRow = document.create Element ("tr");
    setAttribute (tableRow, "onMouseOut ", "alert ('mouse out');");
    setAttribute (tableRow, "onMouseOve r", "alert ('mouse over');");

    // alert (tableRow.onmou seout);

    var tableCell = document.create Element ("td");
    var cellText = document.create TextNode ("Test Row");
    tableCell.appen dChild (cellText);
    tableRow.append Child (tableCell);
    tableBody.appen dChild (tableRow);
    } // end for
    document.getEle mentById ("mainMenuConta iner").appendCh ild
    (menuTable);
    }
    </script></head>
    <body onLoad="writeTa ble();">
    <div id="mainMenuCon tainer"></div>
    </body>
    </html>
  • DU

    #2
    Re: Setting onMouseOut attribute within JavaScript

    relaxedrob@optu shome.com.au wrote:
    [color=blue]
    > Howdy All!
    >
    > I am really stuck with this one - I want to completely create a table
    > within JavaScript and insert it into the document, with onMouseOut and
    > onMouseOver handlers in the table rows.
    >
    > Below is a sample of the code I have created. It all works in Netscape
    > 7.1, but in IE 6 it shows the table but the handlers do not run. I can
    > prove the handlers are even there (see the commented out alert command
    > in the code) so why aren't they being called??
    >
    > Any help on this problem would be most appreciated!
    >
    > Rob
    > :)
    >
    >
    > <html>[/color]

    Using a full doctype declaration will trigger MSIE 6 for Windows into
    standards compliant rendering mode. It's always preferable, furthermore
    if you're using DOM 2 HTML interface methods.

    <head><title>Un titled Document</title>[color=blue]
    > <script type="text/javascript" language="JavaS cript">
    > function setAttribute (object, attributeName, attributeValue)[/color]

    Very bad function name: there is a DOM 2 Core Interface method with such
    name. You're making your code a lot harder to figure out here.


    [color=blue]
    > {
    > var attributeNode = document.create Attribute (attributeName) ;
    > attributeNode.v alue = attributeValue;[/color]

    objRef.setAttri bute(name, value);
    is faster and more to the point, as explained by the specs.
    [color=blue]
    > object.setAttri buteNode (attributeNode) ;[/color]

    the setAttributeNod e method does not work well on many browsers.
    [color=blue]
    > } // end setAttribute method
    > function writeTable()
    > {
    > var menuTable = document.create Element ("table");
    > var tableBody = document.create Element ("tbody");
    > menuTable.appen dChild (tableBody);[/color]

    You should define the tbody element, then assign its properties and
    attributes before appending it to the menuTable element. The rest of
    your DOM nodes declaration, construction follows that logic.
    [color=blue]
    > menuTable.setAt tribute ("width", "100%");[/color]

    menuTable.width = "100%";

    And even here, this is not useful really as the default width value of a
    table is always 100% on all browsers.
    [color=blue]
    > menuTable.setAt tribute ("border", "0");[/color]

    menuTable.borde r = "0";

    [
    General rule: don't use setAttribute() when a better way of setting the
    attribute is available (ie. x.style.display ="none" instead of
    x.setAttribute( 'style,'display : none')).

    ]

    [color=blue]
    > menuTable.setAt tribute ("cellPaddin g", "0");
    > menuTable.setAt tribute ("cellSpacin g", "0");
    >[/color]

    menuTable.cellP adding = "0";
    menuTable.cellS pacing = "0";
    [color=blue]
    > // Create a table row for each node in menu array.
    > for (var index = 0; index < 10; index ++)
    > {
    > var tableRow = document.create Element ("tr");[/color]

    insertRow is another alternative, also supported by MSIE 6 for Windows,
    NS 6.2+ (and Mozilla-based browsers) and Opera 7.x

    [color=blue]
    > setAttribute (tableRow, "onMouseOut ", "alert ('mouse out');");[/color]

    tableRow.setAtt ribute("onmouse out", "alert('mou se out')");
    will work in Mozilla 1.4 and Opera 7.20. It is known that MSIE 6 for
    windows does not support changing, modifying, setting event attributes.
    I remember answering a post on this issue in, IIRC, this newsgroup.
    [color=blue]
    > setAttribute (tableRow, "onMouseOve r", "alert ('mouse over');");
    >
    > // alert (tableRow.onmou seout);
    >
    > var tableCell = document.create Element ("td");[/color]

    insertCell is also a method supported by Mozilla-based browers, Opera
    7.x and MSIE 6. I personally prefer it over createElement because it's a
    bit more faster. insertCell creates and append the node with 1 line of code.

    [color=blue]
    > var cellText = document.create TextNode ("Test Row");
    > tableCell.appen dChild (cellText);[/color]

    or
    tableCell.appen dChild(document .createTextNode ("Test Row"));
    [color=blue]
    > tableRow.append Child (tableCell);
    > tableBody.appen dChild (tableRow);
    > } // end for
    > document.getEle mentById ("mainMenuConta iner").appendCh ild
    > (menuTable);
    > }
    > </script></head>
    > <body onLoad="writeTa ble();">
    > <div id="mainMenuCon tainer"></div>
    > </body>
    > </html>[/color]


    DU
    --
    Javascript and Browser bugs:

    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x


    Comment

    Working...