Page 1 of 1

Menu works in firefox, but doesn't in IE

Posted: Sun Aug 05, 2007 3:46 pm
by smudge
Yeah, I know. How often is it that something doesn't work in IE!?
Here's the problem:
I have a popout menu I mostly got off the internet, but updated for my uses and current times, it works perfectly in FF, but when I go to IE, it yells about active content, then even if I allow, nothing works. It doesn't do this where I got the code, so I need help figuring out where I went wrong.
Here's the code:

Code: Select all

#leftcontent {
  width: 117px;
  background: white;    
}
  
ul#sidenav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 116px; /* Width of Menu Items */
  }
  
ul#sidenav li {
  position: relative;
}
  
ul#sidenav li ul {
  position: absolute;
  left: 115px; /* Set 1px less than menu width */
  top: 0;
  display: none; /* hide submenus */
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
  border-bottom: 1px solid black;
	z-index:1000;
	
}

ul#sidenav li a { /* Styles for Menu Items */
  display: block;
  text-decoration: none;
  color: black;
  background: #dddddd; /* IE6 Bug */
  padding: 5px;
}

ul#sidenav li a:hover,
ul#sidenav li a:focus { /* Hover Styles */
  color: white; 
  background: #3366cc; 
} 
    
ul#sidenav li ul li a { /* Sub Menu Styles */
  padding: 2px 5px;
  color: black;
  background: #EEEEEE;
  border: 1px solid black;
  border-bottom: 0;
}


ul#sidenav li:hover ul, 
ul#sidenav li:focus ul, 
ul#sidenav li.over ul {
  display: block; /* display submenu on mouseover */
}

Code: Select all

<div id="leftcontent">
  <ul id="sidenav"> 
    <li><a href="index.html">Home</a></li>
    <li><a href="commercial.html">Commercial</a></li> 
    <li><a href="residential.html">Residential</a><ul>
      <li><a href="multifamily.html">Multifamily</a></li>
      <li><a href="singlefamily.html">Single-Family Detached</a></li>
      <li><a href="additions.html">Additions / Alterations</a></li></ul>
    </li>
  </ul>
</div>

Code: Select all

setupLinkbar=function(){
  $('#sidenav ul li').hover(
    function(){
      $('ul',this).addClass('over').show();
    },
    function(){
      $('ul',this).removeClass('over').hide();
    }
  );  
}
$(setupLinkbar);
The JS is written with jquery.
Can you see where I went wrong?

Re: Menu works in firefox, but doesn't in IE

Posted: Sun Aug 05, 2007 7:42 pm
by califdon
smudge wrote:

Code: Select all

setupLinkbar=function(){
  $('#sidenav ul li').hover(
    function(){
      $('ul',this).addClass('over').show();
    },
    function(){
      $('ul',this).removeClass('over').hide();
    }
  );  
}
$(setupLinkbar);
For one thing, you have a comma after the closing bracket of the 2nd function() call. Also the way you have nested function() is foreign to my understanding (admittedly weak) of javascript.

Re: Menu works in firefox, but doesn't in IE

Posted: Sun Aug 05, 2007 8:11 pm
by superdezign
califdon wrote:For one thing, you have a comma after the closing bracket of the 2nd function() call. Also the way you have nested function() is foreign to my understanding (admittedly weak) of javascript.
That doesn't look strange to me at all.. JavaScript functions are actually objects.

Posted: Sun Aug 05, 2007 9:53 pm
by smudge
~califdon: the hover method takes 2 arguments: a function to call when the object of hover is rolled over, and one for mouseout. It's essentially the same thing as saying x="abc", y="xyz", z=x+y and z="abc"+"xyz". The method takes callbacks as arguments, but instead of giving it the variable containing the function, I gave it the function directly.

They say you haven't learned until you've taught...

I just taught and haven't learned why IE is rejecting my code.

(Notice how I didn't say "my code doesn't work in IE" :D)

Posted: Mon Aug 06, 2007 4:09 pm
by smudge
Ok, I tested the code a little and it appears that it is the script tag for jquery that is causing the problem. Also, IE only alerts when the script is on the local computer. I uploaded it, and now it doesn't complain. It just does nothing. The pop-out menu doesn't work at all.

Posted: Fri Aug 17, 2007 6:11 pm
by califdon
Thanks, guys, for the Javascript lesson. As I said, my Javascript skills are rather lacking. I see it now.

As to learning by teaching, I can vouch for that. I taught database classes for years. Maybe I ought to teach a Javascript class now! :P