SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DHTML Menu Probles with NS4

    Does anybody know why the onmouseout event we've used to hide absolute positioned meunus works in IE5.5 and not NS4?

  2. #2
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not off hand, but we need to see your code before we can give you an answer. Can you provide a link or paste it here?

  3. #3
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NS4 doesn't support onMouseOver and onMouseOut (+other events) on as many elements as IE does - TR and TD elements are out, for example. I suspect that you are using one of the other in your menu system.... right?
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    m@rco,
    You hit it right on. We found out about the non support for Tds and went to an onclick event on the anchor tags instead on trying to use onmouse. The onMouseOver seemed to work but the onMouseOut did not so our menus would open but stay open. And our biggest browser is NS4 use from the state of Michigan. Thanks again for your help.

  5. #5
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Y'welcome!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  6. #6
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Spock,
    It is not pretty, but here is an example of how I was able to get it to work in NS4:
    <html>
    <head>
    <title>Top Link Sub Menu on MouseOver</title>
    <SCRIPT LANGUAGE="javascript">
    var themenu=""
    var oldmenu=""
    var oldelm=""
    var thediv=""
    var fflag="y"
    /* Place your links here for your sub menus. The first menu will be slink0, the second slink1, etc */
    var slink0=new Array
    slink0[0]='<a href=page1.html>Page One</a>'
    slink0[1]='<a href=page2.html>Page Two</a>'
    slink0[2]='<a href=page3.html>Page Three</a>'

    var slink1=new Array
    slink1[0]='<a href=page1.html>Page One</a>'
    slink1[1]='<a href=page2.html>Page Two</a>'
    slink1[2]='<a href=page3.html>Page Three</a>'

    /* DO NOT CHANGE THE SCRIPTS BELOW */

    function droplink(linkd,linkdiv)
    {
    /* Check for Netscape 4.0+ */

    if(document.layers)
    {
    themenu=eval("document."+linkd)
    thelink=eval("document."+linkdiv)
    if (themenu!=oldmenu)
    {
    oldmenu.visibility="hide"
    oldmenu=themenu
    themenu.visibility='show'
    themenu.left=thelink.left
    themenu.top=thelink.top+thelink.clip.height
    }
    else
    {themenu.visibility="show"}
    }
    /* Check for Internet Explorer 5.0+ */
    if(document.all)
    {
    themenu=eval(linkd)
    thelink=eval(linkdiv)
    if(fflag=="y")
    {
    oldmenu=eval(linkd)
    fflag="n"
    }
    if(oldmenu==themenu)
    {
    themenu.style.left=thelink.offsetLeft
    themenu.style.top=thelink.offsetTop+thelink.offsetHeight-1
    themenu.style.visibility='visible'
    }
    else
    {
    oldmenu.style.visibility="hidden"
    oldmenu=themenu
    themenu.style.left=thelink.offsetLeft
    themenu.style.top=thelink.offsetTop+thelink.offsetHeight-1
    themenu.style.visibility='visible'
    }
    }
    else
    {
    /* For Netscape 6.0 */
    if(document.getElementById)
    {
    elml = document.getElementById(linkdiv)
    elm = document.getElementById(linkd)
    if(fflag=="y")
    {
    oldelm=elm
    fflag="n"
    }
    if(oldelm==elm)
    {
    posw=parseInt(elml.offsetTop)
    posl=parseInt(elml.offsetHeight)
    pos=posw+posl
    elm.style.left=elml.offsetLeft-1
    elm.style.top=pos-2
    elm.style.visibility = "visible"
    }
    else
    {
    oldelm.style.visibility="hidden"
    posw=parseInt(elml.offsetTop)
    posl=parseInt(elml.offsetHeight)
    pos=posw+posl
    elm.style.left=elml.offsetLeft-1
    elm.style.top=pos-2
    elm.style.visibility = "visible"
    oldelm=elm
    }
    }
    }
    }
    /* For Netscape 6.0 and Internet Explorer 5.0+ */
    function hidemenu(divid)
    {
    if(document.layers)
    {
    thediv=eval("document."+divid)
    thediv.visibility="hide"
    }
    else
    {
    if(document.all)
    {
    thediv=eval(divid)
    thediv.style.visibility="hidden"
    }
    else
    {
    elm = document.getElementById(divid)
    elm.style.visibility="hidden"
    }
    }
    }
    var divarr=new Array
    divarr[0]="linka"
    divarr[1]="linkb"
    /* The function Posdiv() is used to reposition the links correctly when the page is resized.
    This is also need because of a bug in Netscape 4.0+ browsers.
    */
    var divlen=0
    function Posdiv()
    {
    for(a=0;a<divarr.length;a++)
    {
    if(document.layers)
    {
    thediv=eval("document."+divarr[a])
    divlen=divlen+thediv.clip.width
    }
    if(document.all)
    {
    thediv=eval(divarr[a])
    divlen=divlen+parseInt(thediv.style.width)
    }
    else
    {
    if(document.getElementById)
    {
    elm = document.getElementById(divarr[a])
    divlen=divlen+parseInt(elm.style.width)
    }
    }
    }
    scrposleftns=(window.innerWidth-divlen)/2
    if(document.all)
    {
    scrposleftie=(document.body.clientWidth-divlen)/2
    }

    for(i=0;i<divarr.length;i++)
    {
    if(document.layers)
    {
    thediv=eval("document."+divarr[i])
    thediv.left=scrposleftns
    scrposleftns=scrposleftns+thediv.clip.width
    }
    else
    {
    if(document.all)
    {
    thediv=eval(divarr[i])
    thediv.style.left=scrposleftie
    scrposleftie=scrposleftie+parseInt(thediv.style.width)
    }
    else
    {
    elm = document.getElementById(divarr[i])
    elm.style.left=scrposleftns
    scrposleftns=scrposleftns+parseInt(elm.style.width)
    }
    }
    }
    }
    </SCRIPT>
    <style>
    /* Change the styles below to suit your needs */
    A{text-decoration:none;font-family:verdana;font-size:9pt;font-weight:bold}
    A:link {color:red}
    A:visited {colorrchid}
    </style>
    </head>
    <body bgcolor="FFF8DC" onLoad="Posdiv()" onResize="window.location.reload()">
    <CENTER><H1>Mouse Over on a link to see a sub menu appear.</H1>
    <BR>
    </CENTER>
    <SCRIPT>
    /* If you want to add more links copy the code starting with the beginning comment for the first link down to the
    ending comment for the first link. Then paste it below the ending comment for the last link. Make sure you
    change the two div names. When you do this you must also add the first div name to "divarr" array used for
    positioning the main links. So for instance if you added a third link and named the first div linkc and the
    second div link2div you would add "linka" to the array. You must also make sure that you change the
    values that you are passing to the function droplink() and hidemenu() to correspond to the new divs.
    If you added the third link then it would look like this: droplink('link2div','linkc')" and hidemenu('link2div') .
    */
    </SCRIPT>
    <SCRIPT> /* this is the beginning of the first link and sub menu */ </SCRIPT>
    <DIV ID="linka" onmouseout="hidemenu('link0div')" style="position:absolute;left:200;top:80;width:90;lineheight:10pt;visibility:visible;layer-background-color:lightgreen;background-color:lightgreen;border:1px solid black;padding:0px;">
    <CENTER><A HREF="#" onMouseOver="droplink('link0div','linka')">Link One</A></CENTER>
    <SCRIPT LANGUAGE="JavaScript">
    /*Below for Netscape 4.0+ only */
    function onMouseOut() {hidemenu('link0div');}
    </SCRIPT>
    </DIV>
    <DIV ID="link0div" onmouseover="droplink('link0div','linka')" onmouseout="hidemenu('link0div')" style="position:absolute;left:0;top:0;width:90;height:49;visibility:hidden;layer-background-color:lightgreen;background-color:lightgreen;border:1px solid black;padding:0px;">
    <script language="JavaScript">
    for (i=0;i<slink0.length;i++)
    {
    document.write("<center>"+slink0[i]+"</center>")
    }
    /* Below for Netscape 4.0+ only */
    function onMouseOver() {droplink('link0div','linka');}
    function onMouseOut() {hidemenu('link0div');}
    </SCRIPT>
    </div>
    <SCRIPT> /* this is the end of the first link and sub menu */ </SCRIPT>
    <SCRIPT> /* this is the beginning of the second link and sub menu */ </SCRIPT>
    <DIV ID="linkb" onmouseout="hidemenu('link1div')" style="position:absolute;left:280;top:80;width:90;lineheight:10pt;visibility:visible;layer-background-color:lightgreen;background-color:lightgreen;border:1px solid black;padding:0px;">
    <CENTER><A HREF="#" onMouseOver="droplink('link1div','linkb')">Link Two</A></CENTER>
    <SCRIPT LANGUAGE="JavaScript">
    /* Below for Netscape 4.0+ only */
    function onMouseOut() {hidemenu('link1div');}
    </SCRIPT>
    </DIV>
    <DIV ID="link1div" onMouseOver="droplink('link1div','linkb')" onmouseout="hidemenu('link1div')" style="position:absolute;left:0;top:0;width:90;visibility:hidden;layer-background-color:lightgreen;background-color:lightgreen;border:1px solid black;padding:0px">
    <SCRIPT LANGUAGE="JavaScript">
    for (i=0;i<slink1.length;i++)
    {
    document.write("<center>"+slink1[i]+"</center>")
    }
    /* Below for Netscape 4.0+ only */
    function onMouseOver() {droplink('link1div','linkb');}
    function onMouseOut() {hidemenu('link1div');}
    </SCRIPT>
    </div>
    <SCRIPT>
    /* this is the end of the second link and sub menu */ </SCRIPT>
    </body>
    </html>


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
  •