Menu
I have a CSS sucker fish side-menu on my page. When the user clicks on an item in the page, I'm popping up a jQuery UI dialog box and inside a div on the page I am loading an HTML page through jQuery AJAX.
In Chrome the focus shifts away from the menu and onto the jQuery UI dialog box whenever I click on an item on the menu.
But in IE and Opera the focus remains on the menu even after I have clicked on the item. The jQuery UI dialog box is unable to shift the focus away from the menu hence it remains open and obstructs the view of the user.
Please take a look at the attached image.
As you can see I even added an text-box and grabbed the focus there, but even so there is no change.
As requested, here is a link to the website.
Example: When you open the website in IE 9, and you click on say Technologies > MySQL or Technologies > MSSQL, the menu doesn't close, but it should because I'm opening up a modal dialog while loading the page behind in the div. But if you open the page in chrome, and try the same thing, the menu closes, as it should. Attaching relevant code snippets:-
/**********************************************
Function to load an html page inside a div
**********************************************/
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction) {
var parentDiv = $("#" + containerDiv);
var loadDiv = $("#" + divToLoadIn);
var dialogBox = $("#" + loadingDialog);
// Show dialog box first, then fadeOut, then load, then fadeIn,the close.
$(dialogBox).data('loadDiv', loadDiv).dialog("open");
$(loadDiv).load(pageToLoad, function (response, status, xhr) {
if (response == "error") {
$(dialogBox).dialog('close');
}
else {
if (callBackFunction != null) {
callBackFunction();
}
checkAndDisplay(loadingDialog, divToLoadIn);
}
});
}
Function to initialize the jquery-ui dialog box.
/**************************************
Function to initialize the dialog box
*****************************************/
function initializePleaseWaitDialog() {
$("#osmPleaseWait").dialog({
autoOpen: false,
modal: true,
dialogClass: 'noTitleDialog',
draggable: false,
resizable: false
});
}
Function to toggle DIV display
/***************************************
Function to toggle div display
****************************************/
function checkAndDisplay(dialogToHide, divToShow) {
$("#" + divToShow).css('display', 'block');
$("#" + dialogToHide).dialog("close");
}
UPDATE #3: I tried another way, On the click event of the menu items, I am hiding all the secondary divs.
$(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
// Currently Selected
$(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
$(this).addClass("osmServiceListSelected");
// Hiding the div**
$(".secondaryMenuContainer").css('display', 'none');
var pageToLoad = $(this).children("input[type='hidden']").val();
loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
return false;
});
I have then updated the code in checkAndDisplay, to remove the display attribute I added earlier, but it still doesn't work.
function checkAndDisplay(dialogToHide, divToShow) {
$("#" + dialogToHide).dialog("close");
$("#" + divToShow).css('display', 'block');
$(".secondaryMenuContainer").css('display', '');
}
HERE is the markup for the page.
<div class="osmListContainerSpecial">
<div class="osmListHeader" id="osmListHeaderServices">
Our Services
</div>
<div class="mainCatHeader">
Software Development
</div>
<%-- Technologies --%>
<div class="secondCatHeader">
Technologies
<div class="secondaryMenuContainer" id="softwareDevTech">
<div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
<div class="osmMenuObject">
.NET/ C#
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
<div class="shortMenuDesc">
Our primary area of expertise, with over 5 years of experience.</div>
</div>
<div class="osmMenuObject">
MS-SQL
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" />
<div class="shortMenuDesc">
We have been working with SQL for over 6 years now.</div>
</div>
<div class="osmMenuObject">
MySQL
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" />
<div class="shortMenuDesc">
Open Source Database for faster, hassle-free deployment.</div>
</div>
<div class="osmMenuObject">
Silverlight
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
MVC
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Azure
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
<%-- Applications --%>
<div class="secondCatHeader">
Applications
<div class="secondaryMenuContainer" id="softwareDevApp">
<div class="secondaryMenu">
<div id="appMsCRM" class="osmMenuObject">
Microsoft CRM
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
<div class="shortMenuDesc">
Our primary area of expertise, with over 5 years of experience.</div>
</div>
<div id="appQb" class="osmMenuObject">
QuickBooks
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appGP" class="osmMenuObject">
Great Plains
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appSP" class="osmMenuObject">
Sharepoint
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appXero" class="osmMenuObject">
Xero
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appFB" class="osmMenuObject">
Freshbooks
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appSF" class="osmMenuObject">
SalesForce
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div id="appNav" class="osmMenuObject">
Navision
<input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
<%-- Independent Software Testing --%>
<div class="mainCatHeaderWithoutChild">
Independent Software Testing
<input type="hidden" value="ServicesHTML/Testing.html" />
</div>
<%-- Technnical Documentation --%>
<div class="mainCatHeaderWithoutChild">
Technnical Documentation
<input type="hidden" value="ServicesHTML/Documentation.html" />
</div>
<%-- Case Studies --%>
<div class="mainCatHeaderWithChild">
Case Studies
<div class="secondaryMenuContainer">
<div class="secondaryMenu" style="COLOR: #3e3e3e">
<div class="osmMenuObject">
Media - Astral
<input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Waste Disposal - RGMRM
<input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Insurance - IAAH
<input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Housing Providers - TalonPro
<input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Education and Training - Met Film
<input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Industry - Bates
<input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
<div class="osmMenuObject">
Industry - Atdec
<input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
<div class="shortMenuDesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
</div>
</div>
</div>
</div>
</div>
Please let me know if you need any other code, or have any other queries.
533
It appears to be a racing condition. I'm not sure about the "why" part, but this seems to overcome the problem:
Replace your checkAndDisplay function with the following version:
function checkAndDisplay(dialogToHide, divToShow) {
$("#" + divToShow).css('display', 'block');
setTimeout(function(){
$("#" + dialogToHide).dialog("close");
},500);
}
Edit: Seems there is a bug with Internet Explorer not refreshing the "hover" state, except on mouse move. Here is a reproducable sample. Try clicking on the green area in different browsers and NOT move the mouse. http://jsfiddle.net/5LR8Z/
I didn't find any solution for that particular bug. As a workaround, I would try manually closing the menu (set a variable on the click handler to know which menu to close on your checkAndDisplay function).
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
