PDA

View Full Version : IE6 List Hover Fix

itsallkizza
11-25-2008, 06:03 PM
It seemed difficult to find a non-intrusive/versatile IE6 fix for ul>li hover based drop-downs, so I scripted one myself.

Isolated JS:

var menu_classes_that_need_fixing = ["my_menu","mm_sub1"];
function fixListsForIE6()
{
if (document.all)
{
var uls = document.getElementsByTagName("ul");
var my_menus = new Array();
for (var i=0;i<uls.length;i++)
{
for (var c=0;c<menu_classes_that_need_fixing.length;c++)
{
if (checkClass(uls[i],menu_classes_that_need_fixing[c])) my_menus.push(uls[i]);
}
}
for (var i=0;i<my_menus.length;i++)
{
var children = my_menus[i].childNodes || [];
for (var n=0;n<children.length;n++)
{
if (children[n].nodeName == "LI")
{
children[n].onmouseover = function()
{
this.className = this.className + " over";
}
children[n].onmouseout = function()
{
this.className = (this.className).replace(/ over/gi,"");
}
}
}
}
}
}

function checkClass(element,name)
{
var element_class = "";
if (element.attributes["class"]) element_class = element.attributes["class"].value;
else if (element.className) element_class = element.className;
else if (element.getAttribute) element_class = element.getAttribute("class");
var classes_to_check = element_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (classes_to_check[i] == name) return true;
}
return false;
}

if (window.addEventListener) window.addEventListener("load",fixListsForIE6,false);
else if (window.attachEvent) window.attachEvent("onload",fixListsForIE6);

Note: Since we are browser detecting (ie testing for document.all) then it would have been safe to assume that className would be available, but instead I wrote checkClass as an external function that can be reused cross-browser.

Example of code in action:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
ul
{
list-style: none;
}

ul,li
{
padding: 0;
margin: 0;
}

ul.my_menu li
{
float: left;
background: transparent url(blank.gif);
width: 10em;
}

ul.my_menu li a
{
display: block;
width: 100%;
height: 1em;
}

ul.my_menu li ul
{
display: none;
padding: 0.3em 0 0 0;
float: left;
}

ul.my_menu li:hover ul,ul.my_menu li.over ul
{
display: block;
}

ul.my_menu li:hover ul li ul,ul.my_menu li.over ul li ul
{
display: none;
}

ul.my_menu li ul li
{
float: none;
padding: 8px 0;
position: relative;
width: 140px;
}

ul.my_menu li ul li ul
{
display: none;
position: absolute;
top: 0px;
left: 140px;
padding: 0 0 0 10px;
}

ul.my_menu li ul li:hover ul,ul.my_menu li ul li.over ul
{
display: block;
}
</style>
<script type="text/javascript">
// <![CDATA[

//personally I hate browser detection, but since IE6 doesnt support pseudo classes at all,
//if you absolutely need your site to work in IE6 then youll want something like this
var menu_classes_that_need_fixing = ["my_menu","mm_sub1"];
function fixListsForIE6()
{
if (document.all)
{
var uls = document.getElementsByTagName("ul");
var my_menus = new Array();
for (var i=0;i<uls.length;i++)
{
for (var c=0;c<menu_classes_that_need_fixing.length;c++)
{
if (checkClass(uls[i],menu_classes_that_need_fixing[c])) my_menus.push(uls[i]);
}
}
for (var i=0;i<my_menus.length;i++)
{
var children = my_menus[i].childNodes || [];
for (var n=0;n<children.length;n++)
{
if (children[n].nodeName == "LI")
{
children[n].onmouseover = function()
{
this.className = this.className + " over";
}
children[n].onmouseout = function()
{
this.className = (this.className).replace(/ over/gi,"");
}
}
}
}
}
}

function checkClass(element,name)
{
var element_class = "";
if (element.attributes["class"]) element_class = element.attributes["class"].value;
else if (element.className) element_class = element.className;
else if (element.getAttribute) element_class = element.getAttribute("class");
var classes_to_check = element_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (classes_to_check[i] == name) return true;
}
return false;
}

if (window.addEventListener) window.addEventListener("load",fixListsForIE6,false);
else if (window.attachEvent) window.attachEvent("onload",fixListsForIE6);

// ]]>
</script>
</head>
<body>

<ul class="my_menu">
<li>
<a href="#">Primary Item One</a>
<ul class="mm_sub1">
<li>
<a href="#">Secondary Item One</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Two</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Three</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Primary Item Two</a>
<ul class="mm_sub1">
<li>
<a href="#">Secondary Item One</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Two</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Three</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Primary Item Three</a>
<ul class="mm_sub1">
<li>
<a href="#">Secondary Item One</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Two</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
<li>
<a href="#">Secondary Item Three</a>
<ul>
<li><a href="#">Tertiary Item One</a></li>
<li><a href="#">Tertiary Item Two</a></li>
<li><a href="#">Tertiary Item Three</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</body>
</html>
Kor
12-22-2008, 12:32 PM
Hm...
Two notes:
1.

if (document.all){...}

this is not an IE6 detector, it might act as an IE all versions detector. If you need an IE5-IE6 only, you may use something like:

var isIE6 = /*@cc_on!@*/false && (!window.XMLHttpRequest); //IE6 detector
if(isIE6){...}

2.

function checkClass(element,name){...}

I don't understand what this function should do. As far as I know element.className is a complete crossbrowser reference, thus you don't need a special function to check the className of an element. You may simply check the class like this:

if(element.className==name){...}
abduraooft
12-22-2008, 12:39 PM
I don't understand what this function should do. As far as I know element.className is a complete crossbrowser reference, thus you don't need a special function to check the className of an element. May be considering the case of having more than one class for an element.
Kor
12-22-2008, 12:42 PM
May be considering the case of having more than one class for an element.
In this case:

var reg=new RegExp(name,'g');
if(element.className.match(reg){...}
itsallkizza
12-23-2008, 12:20 AM
Changes in red:

<script type="text/javascript">
// <![CDATA[

var menu_classes_that_need_fixing = ["my_menu","mm_sub1"];
function fixListsForIE6()
{
if ((/*@cc_on!@*/false) && (!window.XMLHttpRequest)) //IE6 detector - thanks to Kor
{
var uls = document.getElementsByTagName("ul");
var my_menus = new Array();
for (var i=0;i<uls.length;i++)
{
for (var c=0;c<menu_classes_that_need_fixing.length;c++)
{
if (checkClass(uls[i],menu_classes_that_need_fixing[c])) my_menus.push(uls[i]);
}
}
for (var i=0;i<my_menus.length;i++)
{
var children = my_menus[i].childNodes || [];
for (var n=0;n<children.length;n++)
{
if (children[n].nodeName == "LI")
{
children[n].onmouseover = function()
{
this.className = this.className + " over";
}
children[n].onmouseout = function()
{
this.className = (this.className).replace(/ over/gi,"");
}
}
}
}
}
}

function checkClass(element,name)
{
var reg = new RegExp(name,'g');
if (element.className.match(reg) return true;
return false
}

// ]]>
</script>


The reason I wrote that checkClass with getAttribute and attributes["class"] was because I vaguely remember having issues with older browsers when testing classes I added dynamically using XHTML DOM methods. Since I can't recreate my error right now I'm going to assume you're right in that className is cross-browser.