SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu, needs a bit of js..I think

    I've created this menu using css, and a javascript for the menu.

    but, there's one small thing missing. I need to get the menu buttons to stay in their hover state when the mouse is over the drop down menu....i think the only way to do that is using javascript....

    can anyone point me the right direction?

    here's the link:

    http://www.arbel-designs.com/css_test/

    thanks

    idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  2. #2
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone know how to help me with this?

    Thanks

    Idan
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I managed to write a script that will fix the problem...but i'm encountering a wiered problem with ie6. when you move from one link to another in drop menu, ie caches events of mouseout and mouseover that are on the div for the entire menu.

    It works great in ff and ie7.

    but not ie...here's the code (my first script ever so i'm petty sure it can be done better).
    Code JavaScript:
    // JavaScript Document
     
    var DropFix = 
    {
        init:function()
        {
            var navigationDiv = document.getElementById(DropFix.navId);
            var navigationLinks = navigationDiv.getElementsByTagName("a");
            for (var i=0; i<navigationLinks.length; i++)
            {
                var rel = navigationLinks[i].getAttribute("rel");
     
                if(rel && rel.length > 0)
                {
                    dropLinks = document.getElementById(rel);
                    Core.addEventListener(dropLinks, "mouseover", DropFix.changeClassListener);
                    Core.addEventListener(dropLinks, "focus", DropFix.changeClassListener);
                    Core.addEventListener(dropLinks, "mouseout", DropFix.returnClassListener);
                    Core.addEventListener(dropLinks, "blur", DropFix.returnClassListener);
     
                }
            }
        },
        changeClassListener:function(event,id)
        {
     
        DropFix.changeClass(this);
     
        },
        returnClassListener:function(event)
        {
            DropFix.returnClass(this);
        },
     
        changeClass: function(link) 
        {
            var linkToChange = link.getAttribute("id");
            var navigationDiv = document.getElementById(DropFix.navId);
            var navigationLinks = navigationDiv.getElementsByTagName("a");
            for (var i=0; i<navigationLinks.length; i++)
            {
                var rel = navigationLinks[i].getAttribute("rel");
                if(rel == linkToChange) {
                    aToLi = navigationLinks[i].parentNode;
                    aToLi.className = "selected";
     
                }
            }
     
        },
        returnClass: function(link) 
        {
            var linkToChange = link.getAttribute("id");
            var navigationDiv = document.getElementById(DropFix.navId);
            var navigationLinks = navigationDiv.getElementsByTagName("a");
     
            for (var i=0; i<navigationLinks.length; i++)
            {
                var rel = navigationLinks[i].getAttribute("rel");
                if(rel == linkToChange) {
                    Core.removeClass(navigationLinks[i].parentNode,"selected");
                }
            }
     
        }
    }
    function DropLinkChange(navId) {
        DropFix.navId = navId;
        Core.start(DropFix);
    }


    any help would be greatly appreciated.
    Idan Arbel
    Arbel Designs
    Email/msn idan@arbel-designs.com
    http://www.arbel-designs.com


Bookmarks

Posting Permissions

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