Web Analytics Made Easy -
StatCounter IE 6: revealing all onload - CodingForum

Announcement

Collapse
No announcement yet.

IE 6: revealing all onload

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE 6: revealing all onload

    I'm new to DOM and javascripting and have constructed a hide/show menu. I can't find a way to keep IE6 from revealing all the sub-lists onload. The code (inspired by PPK and Jeremy Keith's recent books) follows:

    window.onload = function () {
    var topnav = document.getElementById ("navmain");
    var parent = document.getElementsByTagName("ul");
    for (var i=0;i<parent.length;i++) {
    if (parent[i].className != "section") continue;
    parent[i].style.display = "none";
    var header = parent[i].previousSibling;
    if (header.nodeType != 1)
    header = header.previousSibling;
    header.relatedTag = parent[i];
    header.onclick = openClose;
    }
    }
    function openClose () {
    var currentValue = this.relatedTag.style.display;
    var newValue = (currentValue == "none") ? "block" : "none";
    this.relatedTag.style.display = newValue;
    }

    Markup:
    <div id="navmain" class="clearfix">
    <ul><li><h4>Markets</h4>
    <ul class="section">
    <li><a href="/corporate/">Corporate</a></li>
    <li><a href="/govt/">Govt/Agency</a></li>
    <li><a href="/municipal/">Municipal</a></li>
    <li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
    <li><a href="/funding/">Funding</a></li>
    </ul>
    </li></ul>
    </div>


    Hoping for some simple solution, but all advice is welcome.

  • #2
    In your stylesheet try putting something like:

    Code:
    #navmain ul ul
    {
        display:none;
    }
    
    or 
    
    .section
    {
        display:none;
    }
    This way the child uls will be hidden prior to load.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

    Comment


    • #3
      Dear Basscyst:
      Thank you for the suggestion. I appreciate your speedy reply.
      I am hoping to keep form and function fully separate - unless it is impossible! Should I have no luck controlling IE, I may have to resort to using CSS but I'll still have to keep all elements accessible and { display: none } hides information completely from non-Javascript enabled browsers, handheld devices and screen readers.

      Comment


      • #4
        Code:
        var css=document.createElement('link');
        css.setAttribute("rel","stylesheet");
        css.setAttribute("href","javaScriptOnly.css");
        css.setAttribute("type","text/css");
        document.getElementsByTagName('head')[0].appendChild(css);
        This way the stylesheet is only loaded if javascript is enabled.

        If you are worried about screen readers try using something like this:

        Code:
        .hidden {
          height: 0;
          width: 0;
          overflow: hidden;
          position: absolute;
        }
        Instead of display:none;

        Basscyst
        Helping to build a bigger box. - Adam Matthews

        Comment


        • #5
          Thank you again!

          I have created two sample pages, one adding the alternate IE-only css via the script you provided and one in the markup, with different results. Using your script the subnav gets stuck "open" and using an HTML link it won't "open" at all.

          In addition, if I replace the CSS you provided with <display:none;> as you originally suggested, the subnav is unavailable with JS off, though fine otherwise.

          I really appreciate your trying to help with this. I'm starting to wonder if I don't need to use a more robust Javascript to control the hide/show function, though I am not equipped to produce it.

          Comment


          • #6
            .js
            Code:
            ï»؟/*	Inspiration from:
            	ppk on javascript www.quirksmode.org
            	jeremy keith DOM Scripting domscripting.com */
            
            // help from Basscyst at codingforum.net
            var css=document.createElement('link');
            css.setAttribute("rel","stylesheet");
            css.setAttribute("href","http://design.gfma.com/sifmaScripts/ie.css");
            css.setAttribute("type","text/css");
            document.getElementsByTagName('head')[0].appendChild(css);
            
            window.onload = function () {
            	var topnav = document.getElementById("navmain");
            	var parent = document.getElementsByTagName("ul");
            	for (var i=0;i<parent.length;i++) {
            		if (parent[i].className != "section") continue;
            		parent[i].className= "section";
            		var header = parent[i].previousSibling;
            		if (header.nodeType != 1)
            			header =  header.previousSibling;
            		header.relatedTag = parent[i];
            		header.onclick = openClose;
            	}
            }
            function openClose () {
            	var currentValue = this.relatedTag.className;
            	var newValue = (currentValue == "section") ? "" : "section";
            	this.relatedTag.className  = newValue;
            	
            /* if this.relatedTag.style.display = "block" 
            and another one is clicked, 
            close the first 
            and open the next
            
            Eliz suggestion:
            onload and each time openClose is run have all parent[i].style.display = "none"; */	
            }
            html
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            
            <html xmlns="http://www.w3.org/1999/xhtml">
            
            	<head>
            		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
            		<title>sifmaNav</title>
            	<link rel="stylesheet" type="text/css" href="http://design.gfma.com/sifmaScripts/sifmaNav.css" media="screen" />
            <style type="text/css">
            </style>
            <script src="newnav2.js" type="text/javascript"></script>
            	</head>
            
            	<body>
            <!-- This is the left side of the page -->
            <div id="leftbar">
            <!-- primary navigation --><div id="navmain" class="clearfix">
            <ul><li><h4>Markets</h4>
            	<ul class="section"><li><a href="/corporate/">Corporate</a></li>
            		<li><a href="/govt/">Govt/Agency</a></li>
            		<li><a href="/municipal/">Municipal</a></li>
            		<li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
            		<li><a href="/funding/">Funding</a></li></ul>
            </li>
            <li><h4>Regions</h4>
            	<ul class="section"><li><a href="/europe/">Europe</a></li>
            		<li><a href="/USA/">USA</a></li></ul>
            </li>
            <li><h4>Focus Areas</h4>
            	<ul class="section"><li><a href="/continuingeducation/">Continuing Education</a></li>
            		<li><a href="/legal/">Legal/Regulatory</a></li>
            		<li><a href="/legislativeIssues/">Legislative</a></li>
            		<li><a href="/marketpractices/">Market Practices</a></li>
            		<li><a href="/regionaldealers/">Regional Dealers</a></li>
            		<li><a href="/technology/">Tech/Ops</a></li>
            		<li><a href="/BCP">Business Continuity</a></li>
            		<li><a href="/nextstars/">NextStars Perspective</a></li></ul>
            </li>
            <li><ul><li><h4>Most Popular Pages</h4>
            	<ul class="section"><li><a href="/story.asp?id=324">Swap Index</a></li>
            		<li><a href="/story.asp?id=498">MBS Settlement Dates</a></li>
            		<li><a href="/story.asp?id=1278">MBS Prepayment Projections</a></li>
            		<li><a href="/research_all.asp?catid=36">Statistical Tables</a></li>
            		<li><a href="/research_all.asp?catid=37">Research Reports</a></li>
            		<li><a href="/story.asp?id=1494">eCommerce Survey</a></li></ul>
            </li>
            <li><h4>About Us</h4>
            	<ul class="section"><li><a href="/story.asp?id=970">What We Do</a></li>
            		<li><a href="/story.asp?id=1624">Board</a></li>
            		<li><a href="/private/committees.asp"><img src="/graphics/padlock11px.gif" alt="password protected area" />Committees</a></li>
            		<li><a href="/members.asp">Members</a></li>
            		<li><a href="/story.asp?id=785">Staff</a></li>
            		<li><a href="http://www.bondmarkets.com/careers">Careers at TBMA</a></li>
            		<li><a href="/story.asp?id=782">Membership</a></li>
            		<li><a href="/Report2004/letter04.shtml">Annual Report</a></li>
            		<li><a href="/private/story.asp?id=430"><img src="/graphics/padlock11px.gif" alt="password protected area" />Bond PAC</a></li></ul>
            </li>
            <li><h4>Our Other Web Sites</h4>
            	<ul class="section"><li><a href="http://www.investinginbonds.com">Investing In Bonds . com</a></li>
            		<li><a href="http://www.tomorrowsMoney.org">Tomorrows Money . org</a></li>
            		<li><a href="http://www.ahorrando.org">Ahorrando . org</a></li>
            		<li><a href="http://ppf.bondmarkets.com">Public Policy Forum</a></li>
            		<li><a href="http://www.americansecuritization.com">American Securitization Forum</a></li>
            		<li><a href="http://www.europeansecuritisation.com">European Securitisation Forum</a></li>
            		<li><a href="http://www.theassetmanager.com">The Asset Managers Forum</a></li>
            		<li><a href="http://www.bondmarkets.org">The Bond Market Foundation</a></li></ul>
            </li></ul>
            </li></ul>
            </div>
            <!-- end navmain --></div>
            
            	</body>
            
            </html>
            css
            Code:
            #navmain ul.section
            { height: 0;
              width: 0;
              overflow: hidden;
              position: absolute;
            }
            Working Example

            Cheers,
            Basscyst
            Last edited by Basscyst; Oct 11, 2006, 02:43 PM.
            Helping to build a bigger box. - Adam Matthews

            Comment


            • #7
              Wow - thank you so much. It took a finetooth comb for me to figure out what the changes were - reviewing the code in that way was very useful. It does indeed work in IE,
              BUT...
              now it's busted it Safari!
              I'm searching for a fix - there is probably a Safari hack I'll need to add into the stylesheet for that browser.

              I am very grateful for your all your help and for being a good teacher as well. If you weren't on the other side of the country I'd take you out for a beer but for now please accept my appreciation long-distance.

              Comment

              Working...
              X