SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question DHTML/CSS/Javascript DropDown Menu

    Please see:
    http://tinyurl.com/cs-temp

    When you mouseover "Job Listings" some additional navigation items appear. This works perfect!

    .. but ..

    Why does the "Job Listings" navigation image stay in the MouseOver state instead of the MouseOut state???

    Thanks for your help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Because they are using the AnyLink CSS Menu
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works fine for me. I am testing in Firefox 2. What browser are you using?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using Firefox 3.0.1 and have viewed it in Internet Explorer 7. the "Job Listings" stay on the overstate eventhough the mouse is no longer on it.

    So this issue has been a known error with AnyLink from DynamicDrive?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's because AnyLink is also wanting to fiddle with the onmouseout event for that same element.

    One solution is to use fancy browser specific solutions to overload the events that are being fired by the element, and another solution is to stop them fighting with each other.

    The second solution goes as follows. Remove the onmouseover and onmouseout events from the Job Listings link. They shouldn't be there anyway and should be specified from javascript, preferably at the bottom of the page. See Best Practices for Speeding Up Your Web Site

    Place an identifier on the Job Listings link so that it can be easily targeted. Normally though you would do that with a higher-level element and use DOM traversal techniques to iterate through the relevant elements.

    I have remained consistent and given the Job Listings link an identifier that is in keeping with the others nearby.

    Code html4strict:
    <A id="topnav_menu2_job_listings" HREF="job_listings.html" class="toplevel">
        <IMG NAME="navJobs" SRC="images/navJobs.gif" WIDTH="184" HEIGHT="40" BORDER="0" alt=""></A>

    (attributes should be lowercase, but the above is how the existing code appears)

    Assign one event to the link and another event to the image.

    Code javascript:
    link = document.getElementById('topnav_menu2_job_listings');
    image = link.getElementsByTagName('img')[0];
    link.onmouseover = function (evt) {
    	bizdropdownmenu(this, evt || event, 'menu2');
    }
    image.onmouseover = function () {
    	changeImages('navJobs', 'images/navJobs-over.gif');
    }
    link.onmouseout = function (evt) {
    	bizdropdownmenu(this, evt || event, 'menu2');
    }
    image.onmouseout = function () {
    	changeImages('navJobs', 'images/navJobs.gif');
    }

    No more fighting, each element has their own specific job to do, and everything works well with each other.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •