Menu works in firefox, but doesn't in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Menu works in firefox, but doesn't in IE

Post 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?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

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

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

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

Post 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.
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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)
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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
Post Reply