TECH Javascript crew: problems with IE (go figure)

brds

OT Supporter
Jun 26, 2006
17,716
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>
 

Krakerjak

Active Member
Jul 7, 2003
8,280
Edmonton eh
That code on its own works nicely

You link is broken,
Error Occurred While Processing Request Variable WEBROOT is undefined.


The error occurred in E:\WebSites\Human-Resources\mockup\index.cfm: line 23
21 : <!--- HR Access Set to "1" --->
22 : <cfelse>
23 : <cfif WebRoot CONTAINS "devo">
24 : <cfset SESSION.HRACCESS = 0>
25 : <!--- <cflocation url="Security/AccessDenied.cfm"> --->
so it is hard to tell what the issue is
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
459
Guests online
60
Total visitors
519

Forum statistics

Threads
369,463
Messages
16,885,642
Members
86,873
Latest member
vitalesan