Drowdown menu not working

Question

I've got a dropdown menu made with javascript but it doesn't work in IE while working good in Firefox and Chrome. The HTML code I'm using is this:

<div id="sidemeny-container">
<div class="sidemenu-maincat">
    <img src="cat1.jpg" alt="cat1" />
        <div class="sidemenu-subcat hidden">
        <a href="subcat1.html"> - Subcat 1 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2.html"> - Subcat 2 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat3.html"> - Subcat 3 </a>
        </div>  
    </div>

    <div class="sidemenu-maincat">
    <img src="cat2.jpg" alt="cat2" />
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-1.html"> - Subcat 2-1 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-2.html"> - Subcat 2-2 </a>
        </div>
        <div class="sidemenu-subcat hidden">
        <a href="subcat2-3.html"> - Subcat 2-3 </a>
        </div>  
    </div>
        </div>

The CSS code:

#sidemeny-container {
    border-bottom:1px #000 solid; 
    height: auto;
    width: 153px;
    float:left;
    padding: 10px 0px 0px 0px;

}

.sidemenu-maincat {
    border-top: 1px #000 solid;
    border-right: 1px #000000 solid;
    width:148px;
    height:auto;
    float:left;
    padding: 0px 0px 0px 5px;
}

.sidemenu-subcat.hidden {
    display:none;
    width:148px;
    height:auto;
    float:left;
    padding: 0px 0px 0px 15px;
}

And the javascript

  function initiate()
{

var sideMenuOptions = document.getElementsByClassName('sidemenu-maincat');
    for (var i = 0; i < sideMenuOptions.length; i++) {
        sideMenuOptions[i].addEventListener('click', function() {
    var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
    for (var s = 0; s < subMenuItems.length; s++) {
      var subItem = subMenuItems[s];
      if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
        subItem.className = 'sidemenu-subcat';
      } else {
        subItem.className = subItem.className + ' hidden';
      }
    }
  });
    }       
}

window.onload = initiate;

I can't understand why this won't work in IE since it's working so good in the other browsers. And I prefer to keep all my javascript in my separate document javascript.js as well as I don't want to work with a library.

for IE, you should use `attachEvent` instead of `addEventListener` — Salman, Jan 28 '13 at 08:59
Working in IE9 but not in IE8 it seems, do you want it to work in IE8? — Rahul R., Jan 28 '13 at 09:01
Check this...http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript — Rahul R., Jan 28 '13 at 09:03
@RahulR. I'm pretty new to javascript and I don't really understand how I remake the code in that way, do you mind specifying a bit more? — Benji, Jan 28 '13 at 12:45
So there are equivalent functions in IE for these non supported functions and you need to use them if browser is IE. the code given by @Stephan Zaria will be replaced with your one line of code i.e. linevar subMenuItems = this.getElementsByClassName('sidemenu-subcat'); and almost same you have to do for addEventListener, take help of question i mentioned. — Rahul R., Jan 28 '13 at 13:18

Stephan Zaria · Answer 1 · 2013-01-28T09:13:51.323

getElementsByClassName is not supported by IE. The easiest way to overcome this, without using libraries, is to use document.getElementsByTagName, loop over the results, and check each result's classname. Something like:

if (document.getElementsByClassName)
    {
        var sideMenuOptions = document.getElementsByClassName('sidemenu-maincat');
        for (var i = 0; i < sideMenuOptions.length; i++) {
            sideMenuOptions[i].addEventListener('click', function () {
                var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
                for (var s = 0; s < subMenuItems.length; s++) {
                    var subItem = subMenuItems[s];
                    if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
                        subItem.className = 'sidemenu-subcat';
                    } else {
                        subItem.className = subItem.className + ' hidden';
                    }
                }
            });
        }
    }
    else
    {
        var sideMenuOptions = document.getElementsByTagName('div');
        for (var i = 0; i < sideMenuOptions.length; i++) {
            if (sideMenuOptions[i].className == 'sidemenu-maincat')
            {
                sideMenuOptions[i].addEventListener('click', function () {
                    var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
                    for (var s = 0; s < subMenuItems.length; s++) {
                        var subItem = subMenuItems[s];
                        if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
                            subItem.className = 'sidemenu-subcat';
                        } else {
                            subItem.className = subItem.className + ' hidden';
                        }
                    }
                });
            }
        }
    }

This still doesn't work for me. I put it into my function initiate(). Is that the correct way I should do it? — Benji, Jan 28 '13 at 13:04

Drowdown menu not working

1 Answers1