WEB Javascript crew: problems with IE (go figure)

Discussion in 'OT Technology' started by brds, Dec 4, 2008.

  1. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,646
    Likes Received:
    15
    Location:
    Atlanta
    I have a script (below) for a rollover menu. It works fine in FF but in IE, it messes up once the menu scrolls over the div below it. The items show up on mouseover, but if the user tries to rollover the bottom half of the menu, the links become inactive and the rollover times out (making the menu disappear). The site i'm working on can be viewed at http://www.hr.fsu.edu/mockup. if you hover over "HR Quick Links" directly above the 4 images of random people, you can see what i'm talking about.

    Anybody know why the menu items that hover over the lower div aren't active? Any help would be much appreciated.

    CODE:
    Code:
    <script type="text/javascript">
    <!--
    var timeout         = 500;
    var closetimer        = 0;
    var ddmenuitem      = 0;
    
    // open hidden layer
    function mopen(id)
    {    
        // cancel close timer
        mcancelclosetime();
    
        // close old layer
        if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
        // get new layer and show it
        ddmenuitem = document.getElementById(id);
        ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
        if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
        closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
        if(closetimer)
        {
            window.clearTimeout(closetimer);
            closetimer = null;
        }
    }
    
    // close layer when click-out
    document.onclick = mclose; 
    // -->
    
    </script>
    <style>
    #sddm
    {    margin: 0;
        padding: 0;
    }
    
    #sddm li
    {    margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        font: bold 11px arial;
    }
    
    #sddm li a
    {    display: block;
        width: 84px;
        background-color: #000000;
        color: #ffffff;
        text-decoration: underline;
    }
    
    #sddm li a:hover
    {    
        background: #000000
    }
    
    #sddm div
    {    position: absolute;
        visibility: hidden;
        margin: 0;
        padding: 0;
        background: #ffffff;
        border: 1px solid #cccc66
    }
    
        #sddm div a
        {    
            position: relative;
            display: block;
            margin: 0;
            padding: 0px;
            width: auto;
            white-space: nowrap;
            text-align: left;
            text-decoration: none;
            background: #ffffff;
            color: #000000;
            font: 11px arial
        }
    
        #sddm div a:hover
        {
            background: #ffffff;
            color: #990000
        }
    </style>
    
    
    <!-- div class="sample" style="margin-bottom: 15px;height:42px;"><span -->
    <ul id="sddm">
        <li><a onmouseover="mopen('m1')" onmouseout="mclosetime()">HR Quick Links</a>
            <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                <a href="http://campus.fsu.edu/webapps/login" style="z-index:10;">campus.fsu.edu</a>
                <a href="https://dm.oti.fsu.edu/cyberdocs.asp"  style="z-index:10;">Cyberdocs / Web DM</a>
                <a href="http://www.hr.fsu.edu/index.cfm?page=ClassificationRedesign_homepage"  style="z-index:10;">Classification Redesign</a>
                <a href="http://www.dof.fsu.edu/" style="z-index:10;">Dean of Faculties</a>
                <a href="http://www.vpfa.fsu.edu/" style="z-index:10;">Finance and Administration</a>
                <a href="http://omni.fsu.edu/" style="z-index:10;">OMNI Log-in</a>
                <a href="http://erp.fsu.edu/jobAids.cfm" style="z-index:10;">OMNI Job Aids</a>
                <a href="https://admin2k.fsu.edu/exchange" style="z-index:10;">Outlook Web Mail</a>
                <a href="https://supportcenteronline.com/ics/support/default.asp?deptID=763" style="z-index:10;">Parature</a>
                <a href="https://campus.fsu.edu/webapps/login/bb_bb60/logincas.jsp?mc=1002&service=https%3A%2F%2Fcampus.fsu.edu%2Fwebapps%2Flogin%3Fnew_loc%3D%2Fwebapps%2Fportal%2Fframeset.jsp%3Ftab_id%3D_149_1%2526url%3Dhttps%253A%252F%252Fbb5.fsu.edu%252Fcas%252Flogin%253Fservice%253Dhttps%25253A%25252F%25252Fapps.oti.fsu.edu%25252FSecureLogin%25252FAuthenticator%25253FFINALURL%25253Dhttps%25253A%25252F%25252Fapps.oti.fsu.edu%25252FPersonnelTrainingServer%25252Fjsp%25252Flogin_message.jsp%25252526noheader%25253Dtrue%25252526nofooter%25253Dtrue%2526noheader%3Dtrue%2526nofooter%3Dtrue" style="z-index:10;">Training Server</a>
            </div>
        </li>
    </ul>
    <div style="clear:both"></div>
    
    
     
  2. Krakerjak

    Krakerjak Active Member

    Joined:
    Jul 7, 2003
    Messages:
    8,288
    Likes Received:
    0
    Location:
    Edmonton eh
    That code on its own works nicely

    You link is broken,
    so it is hard to tell what the issue is
     
  3. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,646
    Likes Received:
    15
    Location:
    Atlanta
    fixed the webroot issue... should be good now
     
  4. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    That's so messy. Why aren't you using a framework?
     
  5. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,646
    Likes Received:
    15
    Location:
    Atlanta
    I just found the script online (b/c i dont know js) and put it into a separate file that i include in my cfm file.
     
    Last edited: Dec 4, 2008
  6. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0

Share This Page