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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Cross-Browser Menu Now Working, BUT Now Have FireFox Refresh Loop

    Ok, after mucking around some more, I finally have my menu tree working across the appropriate browsers, having figured out how to migrate from IE specific code to more generic code.

    Unfortunately, I have an issue where everything appears to work, but in FireFox, the hourglass over the menu tree stays "busy" after a Refresh indicating to me that the script is continuing to run without end. The initial load of the file does not stay "busy", it only happens after a Refresh of the FireFox browser and the menu continues to work properly.

    Can anyone see where I am leading myself into this loop even while appearing to work?

    Here is the script:

    var head="display:''";

    function change(t){
    t = (t) ? t : window.event ? window.event : null;
    if (!t) return;
    if(!document.all) {
    document.all = document.getElementsByTagName('*');
    var ti, i = 0;
    while (ti = document.all.item(i))
    ti.sourceIndex = i++;
    }
    var tel, tid;
    tel = (t.target) ? t.target : t.srcElement;
    tid = tel.id;
    if (tid=="foldheader") {
    var srcIndex = tel.sourceIndex;
    var nested = document.all[srcIndex+1];
    if (nested.style.display=="none") {
    nested.style.display='';
    }
    else {
    nested.style.display="none";
    }
    }
    }

    document.onclick=change;

    ----------------------------------------------------------------

    This is the 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>

    ----------------------------------------------------------------

    Here is the CSS:

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

    h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    }

    h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 120%;
    color: #333366;
    }

    h2{
    font-size: 114%;
    color: #333366;
    }

    h3{
    font-size: 100%;
    color: #996600;
    }

    h4{
    font-size: 100%;
    font-weight: normal;
    color: #996600;
    }

    h5{
    font-size: 100%;
    color: #996600;
    }

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

    a:link, a:visited, a:hover {
    color: #333399;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    color: #333366;
    background: #CCCCCC;
    }

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

  • #2
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone with any idea why the cursor stays "busy" after a refresh in Firefox? The menu continues to work, but I don't like this issue "hanging" onto the process. Thanks.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    87
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Let me preface this post by saying that your script does not have a refresh problem in the browser I'm using. I tested your script in the latest beta version of Firefox (1.5b2) and I didn't receive any problems with it refreshing. However, I did notice a few errors that may be contributing to the problem in other versions of firefox.

    Code:
    .navmenu
    //before change
    font-size; 85%;
    //after change
    font-size: 85%;
    
    .navmenu
    //before change
    visibility:show;
    //after change
    visibility:visible;
    
    
    //firefox does not support the hand option
    //before change
    <!--
    #foldheader{cursor:hand ; font-weight:bold ;
    list-style-image:url(fold.gif)}
    #foldinglist{list-style-image:url(list.gif)}
    //-->
    
    //after change
    #foldheader { cursor: url("fold.gif"), crosshair; font-weight:bold;}
    #foldinglist A { cursor: url("list.gif"), crosshair; }
    //make sure you remove the comment tags as well <!-- -->
    //without the A included, the default cursor will be used on links
    
    
    //remove all occurrences of
    style=&{head};
    Last edited by pccode; 10-13-2005 at 11:29 PM.

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks PCCode! Making those modifications seem to have resolved the loop/busy issue. BTW, I am using Firefox 1.07 at the moment.


  •  

    Posting Permissions

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