• 0

Collapsable Menu (JS) crashing


Question

I'm having a strange problem with FFox crashing and IE not reading the script correctly. Can somebody help me out with this, or provide me with a better layout?

Thanks.

<html>
<head>

<script type="text/javascript">

CLOSED_IMAGE='images/plus.gif';
OPEN_IMAGE='images/minus.gif';

function makeCollapsible(listElement){

  listElement.style.listStyle='none';
  listElement.style.marginLeft='0';
  listElement.style.paddingLeft='0';

  var child=listElement.firstChild;
  while (child!=null){


    if (child.nodeType==1){


      var list=new Array();
      var grandchild=child.firstChild;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
          grandchild.style.display='none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }


      var node=document.createElement('img');
      node.setAttribute('src',CLOSED_IMAGE);
      node.setAttribute('class','collapsibleClosed');
      node.onclick=createToggleFunction(node,list);
      child.insertBefore(node,child.firstChild);

    }
    child=child.nextSibling;
  }

}

function createToggleFunction(toggleElement,sublistElements){

  return function(){

    if (toggleElement.getAttribute('class')=='collapsibleClosed'){
      toggleElement.setAttribute('class','collapsibleOpen');
      toggleElement.setAttribute('src',OPEN_IMAGE);
    }else{
      toggleElement.setAttribute('class','collapsibleClosed');
      toggleElement.setAttribute('src',CLOSED_IMAGE);
    }

    for (var i=0;i<sublistElements.length;i++){
      sublistElements[i].style.display=
          (sublistElements[i].style.display=='block')?'none':'block';
    }

  }

}

</script>
</head>
<body bgcolor="#000000" onLoad="makeCollapsible(document.getElementById('D2Litems'));"> 

<font face="Verdana, Geneva, sans-serif">

<ul id="D2Litems">
    <li>    <strong>Basics</strong>
        <ul>
        <li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/role_switching.pdf" target="frame">Switching Roles</a> </li>
        <li><img src="images/video.gif"> <a href="walkthroughs/videos/vidchangerole.html" target="frame">Switching Roles</a> </li>        
        <li><img src="images/pdf.gif"> <a href="walkthroughs/pdf/activate_course.pdf" target="frame">Activating a Course</a> </li>    
        </ul>
    </li>
</ul>

**I snipped all the additional menus here, to save some room. In doing so, I might have snipped some other stuff too, but if it's like, "hey this font tag isn't closed" don't worry about it :)
</font>

</center>
</body>
</html>

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Not quite sure what you mean. I'm an amateur at this: I was given the job to improve the current website (I'm an intern) and I don't have much professional web design experience. It's a tutorial webpage for teachers to find resources with the school's new Learning Management System.

Link to comment
Share on other sites

  • 0

Thanks. I do have HTML and CSS experience, but very little JS experience. the JS stuff I've done is copy/paste stuff I find on Google via tutorials. Not the best way (or even a good way), and I SHOULD learn HTML, but it's not my focus in school (which is Educational Technology and LMS management).

Link to comment
Share on other sites

  • 0

HOLY CRAP! That's awesome. I'm going to give it a shot and see how it holds out for me. Much obliged, sir! I'll hopefully get to finishing implementing it by lunch time, so I'll let you know how it goes.

Link to comment
Share on other sites

  • 0

Oy, so I think this is a bit beyond my capability... I just don't understand this at all, and I just keep getting regular lists...

Link to comment
Share on other sites

  • 0

Are you against using jQuery? I created a collapsible menu script that has various methods of expanding/collapsing. It's not a ground breaking script by any means, but I get a decent amount of periodic feedback.

Hey Matt,

Thanks for the code, but I seem to be missing something. The page loads with the first menu contracted. Where is the "expanded" class kept?

<html>
<head>
<script type='text/javascript' src='js/jquery.js?ver=1.4.2'></script>
</head>
<body>
    <script type="text/javascript">
        <!--
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            setTimeout(function() {
                $j('#menu1 > li > a.expanded + ul').slideToggle('medium');
                $j('#menu1 > li > a').click(function() {
                    $j(this).toggleClass('expanded').toggleClass('collapsed').find('+ ul').slideToggle('medium');
                });
                $j('#example1 .expand_all').click(function() {
                    $j('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').find('+ ul').slideDown('medium');
                });
                $j('#example1 .collapse_all').click(function() {
                    $j('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').find('+ ul').slideUp('medium');
                });
                    }, 250);
                });
        //-->
    </script>

<div id="menu">
<h4>Menu</h4>
<ul id="menu1" class="example1">
    <li><a class="expanded">Section A</a>
        <ul>
            <li><a href="#">Link A-A</a>
                <ul>
                    <li><a href="#">Link A-A-A</a></li>
                    <li><a href="#">Link A-A-B</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Link A-B</a></li>
            <li><a href="#">Link A-C</a></li>
            <li><a href="#">Link A-D</a></li>
        </ul>
    </li>
    <li class="footer"><span> </span></li>
    <li><a class="collapsed">Section B</a>
        <ul>
            <li><a href="#">Link B-A</a>
                <ul>
                    <li><a href="#">Link B-A-A</a></li>
                    <li><a href="#">Link B-A-B</a></li>
                    <li><a href="#">Link B-A-C</a></li>
                </ul>
            </li>
            <li><a href="#">Link B-B</a>
                <ul>
                    <li><a href="#">Link B-B-A</a></li>
                    <li><a href="#">Link B-B-B</a></li>
                </ul>
            </li>
            <li><a href="#">Link B-C</a></li>
            <li><a href="#">Link B-D</a></li>
        </ul>
    </li>
    <li class="footer"><span> </span></li>
    <li><a class="collapsed">Section C</a>
        <ul>
            <li><a href="#">Link C-A</a></li>
            <li><a href="#">Link C-B</a></li>
            <li><a href="#">Link C-C</a></li>
            <li><a href="#">Link C-D</a></li>
        </ul>
    </li>
</ul>
</div>

I got rid of anything I didn't feel was necessary.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.