Jquery Menu Background Disappearing
I have a jQuery Menu that is very glitchy in Chrome. It works okay in FF. There are tabs that have an extended background that appears when you hover over the menu item. The background is supposed to disappear when you hover over another item but the tab is supposed to stay. All the tabs disappear when you hover over another tab in Chrome it does at times in FF but works for the most part in FF. You can see how it is supposed to work by clicking on this
link and viewing in FF. Then try it in Chrome. There are 6 images for the different menu items called 0.png, 1.png, 2.png etc. Note the proper code is only on the index page.
This code is called on the index page with the following code:
- <script language="javascript">
$(document).ready(function (){
$("li:eq(0)").css({'background-image':'url(assets/images/0.png)'}).attr('class', 'selected');
});
</script>
Below is the code in a file called menu.js:
- /*
*/
function menu(){
uicount = $("#menu > ul >li").length;
var path = location.pathname.substring(0);
if ( path ) {
if($('#menu a[href$="' + path + '"]').length!=0){
filename='url(assets/images/'+ $('#menu a[href$="' + path + '"]').parent().index() + '.png)';
$('#menu a[href$="' + path + '"]').parent().attr('class', 'selected');
$('#menu a[href$="' + path + '"]').parent().css({'background-image':filename});
}
}
function docss() {
for (i=0;i<=6;i++) {
if($("li:eq("+i+")").hasClass('selected'))
$("li:eq("+i+")").css({'background-image':'url(assets/images/'+i+'.png)'});
}
}
$("li:eq(0) a").mouseenter(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/0.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(0)").hasClass('selected'))
$("li:eq(0)").css({'background-image':'url(assets/images/0.png)'});
docss();
}).click(function() {
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(0)").attr('class', 'selected');
$("li:eq(0)").css({'background-image':'url(assets/images/0.png)'});
});
$("li:eq(1) a").mouseenter(function() {
$("li:eq(1)").css({'background-image':'url(assets/images/1.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(1)").hasClass('selected'))
$("li:eq(1)").css({'background-image':'url(assets/images/1.png)'});
docss();
}).click(function() {
$("li:eq(0)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)" ).css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").attr('class', 'selected');
$("li:eq(1)").css({'background-image':'url(assets/images/1.png)'});
});
$("li:eq(2) a").mouseenter(function() {
$("li:eq(2)").css({'background-image':'url(assets/images/2.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(2)").hasClass('selected'))
$("li:eq(2)").css({'background-image':'url(assets/images/2.png)'});
docss();
}).click(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").attr('class', 'selected');
$("li:eq(2)").css({'background-image':'url(assets/images/2.png)'});
});
$("li:eq(3) a" ).mouseenter(function() {
$("li:eq(3)").css({'background-image':'url(assets/images/3.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(3)").hasClass('selected'))
$("li:eq(3)").css({'background-image':'url(assets/images/3.png)'});
docss();
}).click(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").attr('class', 'selected');
$("li:eq(3)").css({'background-image':'url(assets/images/3.png)'});
});
$("li:eq(4) a" ).mouseenter(function() {
$("li:eq(4)").css({'background-image':'url(assets/images/4.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(4)").hasClass('selected'))
$("li:eq(4)").css({'background-image':'url(assets/images/4.png)'});
docss();
}).click(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)").attr('class', 'selected');
$("li:eq(4)").css({'background-image':'url(assets/images/4.png)'});
});
$("li:eq(5) a" ).mouseenter(function() {
$("li:eq(5)").css({'background-image':'url(assets/images/5.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(5)").hasClass('selected'))
$("li:eq(5)").css({'background-image':'url(assets/images/5.png)'});
docss();
}).click(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").attr('class', 'selected');
$("li:eq(5)").css({'background-image':'url(assets/images/5.png)'});
});
$("li:eq(6) a" ).mouseenter(function() {
$("li:eq(6)").css({'background-image':'url(assets/images/6.png)'});
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
clearTimeout(mycsstimer);
}).mouseleave(function() {
$("li:eq(6)").css({'background-image':'url(assets/images/menu-a-bg.png)'});
if($("li:eq(6)").hasClass('selected'))
$("li:eq(6)").css({'background-image':'url(assets/images/6.png)'});
docss();
}).click(function() {
$("li:eq(0)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(1)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(2)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(3)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(4)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(5)").css({'background-image':'url(assets/images/menu-a-bg.png)'}).attr('class', 'unselected');
$("li:eq(6)").attr('class', 'selected');
$("li:eq(6)").css({'background-image':'url(assets/images/6.png)'});
});
}