Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer having issues with onMouseOver

    I'm brand new at javascript programming and i'm making a script for a company website that displays a menu.

    What i want to happen is when a user puts the mouse curser over menu item a submenu drops down, and when the mouse moves to a different menu item the previous submenu retracts and the other submenu drops down.

    The way i'm doing it right now works perfectly in Mozilla FireFox, but does not work at all in Internet Explorer 6:

    Code:
    linkelement = document.createElement("a");
    linkelement.setAttribute("onMouseOver","expand()");
    Is there an (easy) alternative way that i can apply an onMouseOver action that works for IE as well as Mozilla?

    Here is the full (temporary) code:

    Code:
    <script type="text/javascript">
    
    var idgroups = new Array();
    var menulist = document.createElement("ul");
    var submenulist;
    var menulist;
    var menuitem;
    var linkelement;
    var sublinkelement;
    var menuelement = document.getElementById("menu");
    var menuitemname;
    var submenuitemname;
    var menuitemvalue;
    
    var menu = new Array();
    var menuvars = new Array();
    var submenu = new Array();
    var subvars;
    
    var menu = ["One","Two","Three"];
    var menuvars = ["assassinate","your","parents"];
    var submenu = [new Array("HEH","heh","hEh"),new Array("Rofl","Lmao","LoL"),new Array("I","like","poop")];
    var subvars = [new Array("...","...","..."),new Array("...","...","..."),new Array("...","...","...")];
    
    function buildmenu() {
             menuelement = document.getElementById("menu");
    
             for (menulen=0; menulen!=menu.length; menulen++) {
                 // here we create teh menu items
                 menuitem = document.createElement("li");
                 linkelement = document.createElement("a");
                 linkelement.setAttribute("href",menuvars[menulen]+"/index.phtml");   
                 linkelement.setAttribute("onMouseOver","expand()");
                 menuitemname = document.createTextNode(menu[menulen]);
                 linkelement.appendChild(menuitemname);
                 menuitem.appendChild(linkelement);
    
                 // this is whurr we make teh submenu items
                 submenulist = document.createElement("ul");
                 for (submenulen=0; submenulen!=submenu[menulen].length; submenulen++) {
                     submenuitem = document.createElement("li");
                     sublinkelement = document.createElement("a");
                     sublinkelement.setAttribute("href",menuvars[menulen]+"/"+subvars[menulen][submenulen]+".phtml");
                     submenuitemname = document.createTextNode(submenu[menulen][submenulen]);
                     sublinkelement.appendChild(submenuitemname);
                     submenuitem.appendChild(sublinkelement);
                     submenulist.appendChild(submenuitem);
                     menuitem.appendChild(submenulist);
                     }
                 menulist.appendChild(menuitem);
                 }
              menuelement.appendChild(menulist);
              }
            
    function expand() {
             document.write("I hate you.");
             }
    </script>
    
    <body onload="buildmenu()">
    <div id="menu">
    
    
    </div>
    </body>
    Please just focus at the question on hand, i realize my code isn't very well done. Remember I just started programming javascript recently.
    Last edited by mrtanooki; 09-10-2004 at 06:45 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you need to do something like this:
    Code:
    linkelement.setAttribute("onMouseOver","function() { expand(); };");
    onMouseOver requires a pointer to a function, not a function call. onMouseOver is an event-handler, so it makes a call to the function it's pointing at.

    Hope that helps,
    Sadiq.

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No that doesn't work either.

  • #4
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this:
    Code:
    linkelement.onmouseover = function() { expand(); }
    setAttribute doesn't work in IE

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    element.setAttribute does work in iew, or at least, it does mostly work. However, event handlers are not part of the HTML, really. Event handlers belong in the scripting system. They are parsed together with everything else when the document is parsed, and the corresponding script structures are created. However, when setting an attribute using element.setAttribute you don't reparse it and create the scripting structure, the only thing you do is create an HTML attribute.

    If you programmatically want to add events, use the element.onevent syntax. If you don't worry about iew at all, use the DOM2Event mechanisms. Don't use the iew proprietary element.attachEvent mechanism unless there is no other way.
    Last edited by liorean; 09-12-2004 at 03:12 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fci
    try this:
    Code:
    linkelement.onmouseover = function() { expand(); }
    setAttribute doesn't work in IE
    setAttribute does work with IE but you need to use the correct syntax....
    Which is: onmouseover NOT: onMouseOver

    .....Willy

  • #7
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh

    damn

  • #8
    New Coder
    Join Date
    May 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fci
    try this:
    Code:
    linkelement.onmouseover = function() { expand(); }
    setAttribute doesn't work in IE
    this was the winner. thanks everyone who helped


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •