You are here: Home / Documentation / How To's / Using Conditional Comments and JQuery to Fix the IE6 Hover Issue

Using Conditional Comments and JQuery to Fix the IE6 Hover Issue

by klotzj27 — published Oct 02, 2009 03:37 PM, last modified Aug 16, 2016 10:50 AM
Since IE6 is the bane of web developers existence hover events only work on anchor tags and have erractic behavior in this delightful browser. To make on hover events work in IE6 we must add a conditional comment in our page template, as well as a javascript to make our on hover events work correctly.

1) In the header section of the page template add a conditional comment to only load the javascript if the browser is IE6 like so:

<head>
<!--[if IE 6]>
<script type="text/javascript" src="IE6Hover.js"></script>
<![endif]-->
</head>

NOTE: Conditional comments use the HTML comment structure and are ignored by browsers other than IE as they just treat them as comments. IE will use what is in the conditional if the condition is met.

2a) Create a blank file in a text editor and save it as IE6Hover.js.

2b) Navigate to portal_skins/custom and add a File. Name it IE6Hover.js, add it, and edit it.

3) Add the following code to IE6Hover.js:

jq(document).ready(function(){
jq("#linksPortlet > ul").hover(
function()
{jq("#linksPortlet > ul > #hiddenlinks").css({'display' : 'block'});
},
function()
{jq("#linksPortlet > ul > #hiddenlinks").css({'display' : 'none'});
});
});

 -We are using this jQuery statement to create a rollout menu.

If there are still problems displaying the rollover menu or when hovering on any element make sure this isn't an AlphaImageLoader problem

 

Navigation