jquery hover not working properly other than IE6
- by Kranthi
Hi All,
We developed navigation bar using jQuery 1.4.2. Functionality is to show submneus for different menu items when user hovers on it.
It is working perfectly in IE6 but we see some weird problems in other browsers.
In Firefox, when the page gets loaded, it works fine but when we hit f5, the submenu wont appear on hover. To get submenu we need to click on any other menu item.
In Chrome, its the same to add on, some time even we click on any menu item, and hover submenu wont show up.
In Safari, nothing shows up most of the times, but on clicking 5-6 menu items, submenu is shown.When we see loading text in safari it shows the submenu. but on every click the loading text wont appear..
We are very much confused..is it the browser behavior/code/jquery??
Below is the snippet:
Html:
<ul>
<li><a class="mainLinks" href="google.com">Support</a>
<ul><li>Sublink1</li></ul>
</ul>
Html code is absolutely fine.
Jquery:
var timeout = null;
var ie = (document.all) ? true : false;
$(document).ready(function(){
var $mainLink = null;
var $subLink = null;
$(".mainLinks").each(function(){
if ($(this).hasClass("current")) {
$(this).mouseout(function() {
var $this = $(this);
timeout = setTimeout(function() {
$(".popUpNav", $this.parent()).css({
visibility : 'hidden'
});
$('.popUpArrow').hide();
ieCompat('show');
}, 200);
});
} else {
$(this).hover(function() {
reset();
ieCompat('hide');
// Saving this for later use in the popUpNav hover event
$mainLink = $(this);
$popUpNav = $(".popUpNav", $mainLink.parent());
// Default width is width of one column
var popupWidth = $('.popUpNavSection').width() + 20;
// Calculate popup width depending on the number of columns
var numColumns = $popUpNav.find('.popUpNavSection').length;
if (numColumns != 0) {
popupWidth *= numColumns;
}
var elPos = $mainLink.position();
var leftOffset = 0;
if (elPos.left + popupWidth > 950) {
leftOffset = elPos.left + popupWidth - 948;
}
$popUpNav.css({
top : elPos.top + 31 + 'px',
left : elPos.left - leftOffset + 'px',
visibility : 'visible',
width : popupWidth + 'px'
});
$('.popUpArrow').css({
left : elPos.left + Math.round(($mainLink.width() / 2)) + 20 + 'px',
top : '27px'
}).show();
},
function() {
var $this = $(this);
timeout = setTimeout(function() {
$(".popUpNav", $this.parent()).css({
visibility : 'hidden'
});
$('.popUpArrow').hide()
ieCompat('show');
}, 200);
}
);
}
});
$(".subLinks").hover(
function(e) {
$subLink = $(this);
var elPos = $subLink.position();
var popupWidth = $(".popUpNavLv2",$subLink.parent()).width();
var leftOffset = 0;
ieCompat('hide');
$(".popUpNavLv2",$subLink.parent()).css({
top : elPos.top + 32 + 'px',
left : elPos.left - leftOffset + 'px',
visibility : 'visible'
});
},
function() {
var $this = $(this);
timeout = setTimeout(function() {
$(".popUpNavLv2", $this.parent()).css({
visibility : 'hidden'
});
}, 200);
ieCompat('show');
}
);
$('.popUpNav').hover(
function() {
clearTimeout(timeout);
$mainLink.addClass('current');
$(this).css('visibility', 'visible');
$('.popUpArrow').show();
},
function() {
$mainLink.removeClass('current');
$(this).css('visibility', 'hidden');
$('.popUpArrow').hide();
ieCompat('show');
}
);
$('.popUpNavLv2').hover(
function() {
clearTimeout(timeout);
$(this).css('visibility', 'visible');
ieCompat('hide');
},
function() {
ieCompat('show');
$(this).css('visibility', 'hidden');
}
);
// If on mac, reduce left padding on the tabs
if (/mac os x/.test(navigator.userAgent.toLowerCase())) {
$('.mainLinks, .mainLinksHome').css('padding-left', '23px');
}
});
Thanks a lot in advance for looking into it.
Thanks | Kranthi
