Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Cross-Browser Capable Menu / Script - event.srcElement to getElementById

    I have been using a public domain tree menu that is unfortunately IE specific. I need to make it multi-browser compatibile, but due to its use in an application, need to minimize the code changes if possible. Really, because of its deployment, I need to work with only newer browsers, most likely IE and Firefox.

    From what I've read, I believe the problem / solution revolves around replacing the "event.srcElement.id" parts with the "get.ElementById" equivalents, but haven't had very consistent results so far.

    I have found similar menus with updated elements, including this forum, but I am very new to JavaScript and am having problems making the switch fit in with what I already have. Also, the example I found in this forum appeared to have a different HTML component not using Lists the same way I am. It seems to me that it should not be too difficult, but my attempts so far have not been successful.

    Thanks ahead of time for any and all help!


    Here is the script, part in Blue being the issue:

    if(document.all && !document.getElementById) {
    document.getElementById = function(id) {
    return document.all[id];
    }
    }

    var head="display:''"
    img1=new Image()
    img1.src="fold.gif"
    img2=new Image()
    img2.src="open.gif"

    function change(){
    if(!document.all)
    return
    else {
    if (event.srcElement.id=="foldheader") {
    var srcIndex = event.srcElement.sourceIndex
    var nested = document.all[srcIndex+1]
    if (nested.style.display=="none") {
    nested.style.display=''
    event.srcElement.style.listStyleImage="url(open.gif)"
    }
    else {
    nested.style.display="none"
    event.srcElement.style.listStyleImage="url(fold.gif)"

    }
    }
    }
    }

    document.onclick=change

    ---------------------------------------------------------------------
    Here is the associated generic HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <title>Menu</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" type="text/css" href="menu.css" />

    </head>

    <body>

    <script type="text/javascript" src="menu.js"></script>

    <div class=navmenu id="box1" style="z-index:2">
    <ul>
    <li id="foldheader">News</li>
    <ul id="foldinglist" style="display:none" style=&{head};>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.yahoo.com">Yahoo</a></li>
    <li><a href="http://www.abcnews.com">ABC News</a></li>
    <li><a href="http://www.vancouversun.com">Vancouver Sun</a></li>
    </ul>

    <li id="foldheader">Games</li>
    <ul id="foldinglist" style="display:none" style=&{head};>
    <li><a href="http://www.gamespot.com">GameSpot</a></li>
    <li><a href="http://www.happypuppy.com">Happy Puppy</a></li>
    <li><a href="http://www.gamecenter.com">Game Center</a></li>
    </ul>

    <li id="foldheader">Software</li>
    <ul id="foldinglist" style="display:none" style=&{head};>
    <li><a href="http://www.download.com">outer 1</a></li>
    <li><a href="http://www.hotfiles.com">outer 2</a></li>
    <li id="foldheader">Nested</li>
    <ul id="foldinglist" style="display:none" style=&{head};>
    <li><a href="http://www.windows95.com">nested 1</a></li>
    <li><a href="http://www.shareware.com">nested 2</a></li>
    </ul>
    <li><a href="http://www.windows95.com">outer 3</a></li>
    <li><a href="http://www.shareware.com">outer 4</a></li>
    </ul>
    </ul>
    </div>

    </body>

    </html>


    ---------------------------------------------------------------------
    Finally, here is the associated CSS:

    .navmenu
    {
    text-align:left;
    font-size; 85%;
    background:#e6e6fa;
    border-left: solid thin white;
    position:absolute;
    visibility:show;
    }

    ul{
    font-size: 90%;
    list-style-type: none;
    margin-left: 5%;
    }

    <!--
    #foldheader{cursor:hand ; font-weight:bold ;
    list-style-image:url(fold.gif)}
    #foldinglist{list-style-image:url(list.gif)}
    //-->
    Last edited by paulr; 10-12-2005 at 04:28 PM.


 

Posting Permissions

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