Hello,
In all IE versions the attorneys nav button starts to flicker when the user selects form items on the attorney’s mega drop down menus.
http://obe.herrmanneasyedit.com/templates/dropdowns/index3.html
I am pretty sure we can use jQuery to fix the problem, but not sure where to start.
Any help is greatly appreciated.
Check out Stu Nicholls site CSS Play he has done a lot of experimenting with menus and has some flicker free solutions.
Okay, I added this code:
$(".col_attorneys_select").click(function(){
$("#selectDiv").css("background-color","#b5b7b4");
});
…but now the attorneys activate state stays active even if the mouse is moved to another menu. Any ideas?
Here is the full code:
<script language="javascript" type="text/javascript">
//don't hide the menu if a mega menu input has focus
var megaNavImg = new Array();
var megaNavCount = 0;
$(document).ready(function() {
$(".col_attorneys_select").click(function(){
$("#selectDiv").css("background-color","#b5b7b4");
});
//preload mouseover images?
$('#ctl00_xprLayout_header_mainLeftQ_navShower').find("div.navitem a img").each(function(i, domelement) {
var imgon = "";
var imgoff = "";
try {
if ($(domelement).attr("onmouseover") != null) {
imgon = $(domelement).attr("onmouseover").toString();
var qtIndex = imgon.indexOf("'");
var endqtIndex = imgon.lastIndexOf("'");
imgon = imgon.substring(qtIndex + 1, endqtIndex);
var img = new Image();
img.src = imgon;
megaNavImg[megaNavCount] = img;
megaNavCount++;
}
if ($(domelement).attr("onmouseout") != null) {
imgoff = $(domelement).attr("onmouseout").toString();
var qtIndex = imgoff.indexOf("'");
var endqtIndex = imgoff.lastIndexOf("'");
imgoff = imgoff.substring(qtIndex + 1, endqtIndex);
var img = new Image();
img.src = imgoff;
megaNavImg[megaNavCount] = img;
megaNavCount++;
}
} catch (ex) {
}
});
$('#ctl00_xprLayout_header_mainLeftQ_navShower').data("closeable", true);
//show and hide mega menus
var focusedObj = null;
$('#ctl00_xprLayout_header_mainLeftQ_navShower .navitem').closest("li")
.mouseenter(function() {
$(this).data("mouseon", true);
if (!$(this).hasClass("hovering")) {
//new menu showing
if (focusedObj)
focusedObj.blur();
$(this).addClass("hovering").siblings().removeClass("hovering").end()
.find("select,input")
.focus(function() {
$("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable", false);
focusedObj = this;
})
.blur(function() {
$("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable", true);
if ($(this).parents("li.mega").data("mouseon") == false) {
$(this).parents("li.mega").removeClass("hovering");
}
});
}
})
.mouseleave(function(e) {
$(this).data("mouseon", false);
if ($("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable"))
$(this).removeClass("hovering");
});
//workaround for a webkit bug (chrome 9.x) that hides the menu
$('#ctl00_xprLayout_header_mainLeftQ_navShower div.menu input').hover(function(event) {
$(this).closest('li.mega').addClass('hovering');
}, $.noop);
//keep menu image on while in the menu
$('#ctl00_xprLayout_header_mainLeftQ_navShower .navitem').closest("li")
.each(function(index) {
$img = $(this).find(".navitem A IMG");
if ($img.length > 0) {
var func = $img[0].onmouseover;
if (func != null) {
$img[0].mymouseenter = func;
$img[0].onmouseover = function() { };
$(this).mouseenter(function() {
$(this).find("DIV.navitem A IMG")[0].mymouseenter();
});
}
func = $img[0].onmouseout;
if (func != null) {
$img[0].mymouseleave = func;
$img[0].onmouseout = function() { };
$(this).mouseleave(function() {
$(this).find("DIV.navitem A IMG")[0].mymouseleave();
});
}
}
});
});
</script>