[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
