IE does not support the W3C addEventListener, it uses attacheEvent so
you need a cross-browser way to attach events. Here's one:
function attachEventListener(target, eventType, functionRef, capture){
// function can be called with a pointer or a string representing
a function name
if (typeof(functionRef)== 'string') {
functionRef=eval(functionRef);
}
if (typeof target.addEventListener != "undefined"){
target.addEventListener(eventType, functionRef, capture);
} else if (typeof target.attachEvent != "undefined"){
target.attachEvent("on" + eventType, functionRef);
} else {
eventType = "on" + eventType;
if(typeof target[eventType] == "function"){
var oldListener = target[eventType];
target[eventType] = function(){
oldListener();
return functionRef();
};
}else{
target[eventType] = functionRef;
}
}
}
________________________________
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Alexander Uribe
Sent: Wednesday, 24 October 2007 10:09 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Javascript Code not working in IE6
In my javascript class at college, I have to find out why this piece of
code does not run in IE6.
I can't seem to figure out why.
If anyone knows, that would be great
cheers,
Alex.
Code below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>Exercise 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.borders {
border: 1px solid red;
width: 150px;
}
.li_borders {
background: yellow;
border: 1px solid blue;
color: red;
}
.li2_borders {
background: blue;
color: white;
}
#ul2 {
xwidth: 150px;
}
#ul2 li {
border-color: silver;
border-style: solid;
border-width: 1px 1px 0px 1px;
display: inline;
font-weight:bold;
margin: 0;
padding: 0 4px;
}
</style>
<script type="text/javascript">
window.onload = init;
function init()
{
var liArr = new Array();
var idx;
//--- process first UL block
var id = document.getElementById("ul1");
id.addEventListener("mouseover", ul1on, false);
id.addEventListener("mouseout", ul1off, false);
liArr = id.getElementsByTagName("li");
for(idx=0; idx<liArr.length; idx++ ) {
liArr[idx].addEventListener("click", li_s, false);
liArr[idx].addEventListener("mouseover", li_on, false);
liArr[idx].addEventListener("mouseout", li_off, false);
}
//--- process second UL block
id = document.getElementById("ul2");
liArr = id.getElementsByTagName("li");
for(idx=0; idx<liArr.length; idx++ ) {
liArr[idx].addEventListener("click", li_s, false);
liArr[idx].addEventListener("mouseover", li2_on, false);
liArr[idx].addEventListener("mouseout", li2_off, false);
}
}
function ul1on() { document.getElementById("ul1").className="borders";}
function ul1off(){ document.getElementById("ul1").className="";}
function li_s() { alert(this.innerHTML); }
function li_on() {
document.getElementById(this.id).className="li_borders";}
function li_off(){ document.getElementById(this.id).className="";}
function li2_on() {
document.getElementById(this.id).className="li2_borders";}
function li2_off(){ document.getElementById(this.id).className="";}
</script>
</head>
<body>
<p>This doesn't work in Internet Explorer 6. Why and whats the
solution?</p>
<ul id="ul1">
<li id="li11">item 1</li>
<li id="li12">item 2</li>
<li id="li13">item 3 </li>
</ul>
<ul id="ul2">
<li id="li21">item 1</li>
<li id="li22">item 2</li>
<li id="li23">item 3 </li>
</ul>
</body>
</html>
________________________________
Join Lavalife for free. What are you waiting for?
<http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Flavalife9%2Eninemsn%2Ec
om%2Eau%2Fclickthru%2Fclickthru%2Eact%3Fid%3Dninemsn%26context%3Dan99%26
locale%3Den%5FAU%26a%3D30288&_t=764581033&_r=email_taglines_Join_free_OC
T07&_m=EXT>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
**********************************************************************
This message is intended for the addressee named and may contain
privileged information or confidential information or both. If you
are not the intended recipient please delete it and notify the sender.
**********************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
