Jquery isn't working in IE?

[eluser]JamesTaylor[/eluser]
Hi Guys,

i've built a site and have an issue with javascript not function in IE, it works fine in Firefox and safari?

This is the site: here

Whats meant to happen is that when the mouse is rolled over the main links a sub menu will 'fly out' but when viewed in IE the sub menus don't function at all?

I haven't used javascript / JQuery before so i'm pretty lost as to what the problem is and i'm struggling to turn anything up when searching google.

The code i have written to make the sub menus function is:

Code:

[removed]
   // When the page is ready
   $(document).ready(function(){
  
       //Fancybox Code
    $("a.fancybox").fancybox({
        'speedIn'        :    600,
        'speedOut'        :    200,
        'overlayShow'    :    true
    });
    //End of Fancybox Code
  
        $("#Company, #SubNavCompany a").hover(function(event){
               $("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavServices").css({zIndex: 1}, 0);
            $("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavPortfolio").css({zIndex: 1}, 0);
            $("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavContact").css({zIndex: 1}, 0);
               $("#SubNavCompany a").stop(true, true).animate({marginLeft: 0}, 200);
            $("#SubNavCompany").css({zIndex: 10}, 0);
            }, function() {
            $("#SubNavCompany a").delay(3000).animate({marginLeft: -150}, 600);
         });
        
        
             $("#Services, #SubNavServices a").hover(function(event){
              $("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavCompany").css({zIndex: 1}, 0);
            $("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavPortfolio").css({zIndex: 1}, 0);
            $("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavContact").css({zIndex: 1}, 0);
               $("#SubNavServices a").stop(true, true).animate({marginLeft: 0}, 200);
            $("#SubNavServices").css({zIndex: 10}, 0);
            }, function() {
            $("#SubNavServices a").delay(3000).animate({marginLeft: -150}, 600);
         });
        
        
             $("#Portfolio, #SubNavPortfolio a").hover(function(event){
             $("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavCompany").css({zIndex: 1}, 0);
            $("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavServices").css({zIndex: 1}, 0);
            $("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavContact").css({zIndex: 1}, 0);
               $("#SubNavPortfolio a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
            $("#SubNavPortfolio").css({zIndex: 10}, 0);
            }, function() {
            $("#SubNavPortfolio a").delay(3000).animate({marginLeft: -150}, 600);
         });
        
        
         $("#Contact, #SubNavContact a").hover(function(event){
             $("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavCompany").css({zIndex: 1}, 0);
            $("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavServices").css({zIndex: 1}, 0);
            $("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
            $("#SubNavPortfolio").css({zIndex: 1}, 0);
               $("#SubNavContact a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
            $("#SubNavContact").css({zIndex: 10}, 0);
            }, function() {
            $("#SubNavContact a").delay(3000).animate({marginLeft: -150}, 600);
         });
    });
[removed]

Is anyone kind enough to offer me some advice on this issue please!

Equally, i'm pretty sure that my implementation of the javascript may actually be quite long winded for what it achieving so feel free to pull me up on that too as it'll all be part of my learning curve!

Thanks

James

[eluser]danmontgomery[/eluser]
Problem is in IE7, works fine in IE8. These are the errors I get in IE7:

http://dl.dropbox.com/u/4748759/IE7.png

Not about to try and dive into minified jquery to determine what that is, but you can try replacing the minified version with the development version just so you can see which function is throwing the error.

Download the IE developer toolbar: http://www.microsoft.com/downloads/detai...laylang=en... If you're debugging in IE it will save your life. Also, download IE8 (which comes with developer toolbar already installed, I believe).

As for the code, rather than separate hover events for each nav item, you should really be able to abstract that a bit:

Code:

$("#my_nav_container a").hover(function(event){
        $('#my_nav_container a').stop().animate({marginLeft: -150}, 600).css({zIndex: 1}, 0);
        $(this).animate({marginLeft: 0}, 200);
    }, function() {
        $(this).delay(3000).animate({marginLeft: -150}, 600);
});

I haven't tested this obviously (and #my_nav_container doesn't exist) but maybe it helps.

[eluser]JamesTaylor[/eluser]
Thanks nocturn. Thats slightly strange tho, it doesn't work at all for me in IE 6 or 8, i don't have 7 available to test at the moment?

i've been having a play around with it whilst hoping for a reply and seem have found that using absolute position for the sub menus appears to affecting it in IE. When I remove it from the CSS things start working?

[eluser]danmontgomery[/eluser]
Strange indeed...

[eluser]BradEstey[/eluser]
You've got to Make the Absolute, Relative which basically means whatever element contains elements that pop-up or drop down needs to be set to position: relative;. This is a common bug in IE, basically your drop down elements are working just fine but appearing off the page.

[eluser]JamesTaylor[/eluser]
Thanks Bradillac, that is just how i had it set up, the absolute poitioned elements (the sub menus) were held inside a relative postioned div.

i've changed the code around to omit the relative / absolute positioning and have made some progress, the menus now fly out in IE but they are still causing me some pain! The last item of the final sub doesn't appear at all but the 1st one does????? It works just as expected in FF and Safari just not in bloody IE!!!

[eluser]InsiteFX[/eluser]

i don’t have 7 available to test at the moment?

IE 8 hit F-12 - change to IE 7

InsiteFX