Does IE9 support addEventListener? Does IE's attachevent method have
parameters similar to addEventListener?
http://msdn.microsoft.com/en-us/ie/ff468705.aspx
The above MSDN page "Internet Explorer 9 Beta Guide for Developers"
does mention that addEventListener is supported but I can't get it to work.
All non-IE browsers work with the following code.
<html>
<head>
<title>HTML Course</title>
<style>
ul.LinkedList { display: block; }
ul.LinkedList ul { display: none; }
ul.LinkedList ul ul { display: none; }
ul.LinkedList ul ul ul { display: none; }
ul.LinkedList ul ul ul ul { display: none; }
ul.LinkedList ul ul ul ul ul { display: none; }
</style>
<script type="text/JavaScript">
function toggleChildNodes(event) {
var i, cChildren, n;
cChildren = event.target.childNodes;
n = cChildren.length;
for (i = 0; i < n; i++) {
if (cChildren[i].style != undefined) {
if (cChildren[i].style.display != "block") {
cChildren[i].style.display = "block";
cChildren[i].style.cursor = "default";
cChildren[i].parentNode.style.cursor = "pointer";
} else {
cChildren[i].style.display = "none";
}
}
}
return(true);
}
function addToggleTrickToListItems(oList) {
var i, n;
for (i = 0, n = oList.childNodes.length; i < n; i++) {
oList.childNodes[i].addEventListener("click", toggleChildNodes, false);
}
}
function activateDeepNodes(oList) {
var i, n, cListItems;
var j, o, cChildNodes;
for (i = 0, cListItems = oList.getElementsByTagName("li"), n =
cListItems.length;
i < n;
i++) {
cChildNodes = cListItems[i].getElementsByTagName("ul");
if (cChildNodes.length > 0) {
cListItems[i].style.cursor = "pointer";
cListItems[i].style.fontWeight = "bold";
cListItems[i].style.color = "blue";
for (j = 0, o = cChildNodes.length; j < o; j++) {
activateDeepNodes(cChildNodes[j]);
}
} else {
cListItems[i].style.cursor = "auto";
cListItems[i].style.fontWeight = "normal";
cListItems[i].style.color = "black";
}
}
}
function addEventListeners() {
var oTree;
oTree = document.getElementById("LinkedList1");
addToggleTrickToListItems(oTree);
activateDeepNodes(oTree);
}
</script>
</head>
<body onload="addEventListeners();">
<ul id="LinkedList1" class="LinkedList">
<li>History of WWW
<ul>
<li>Arpanet - Packets - 1969</li>
<li>TCP/IP - Vinton Cerf - 1974</li>
<li>WorldWideWeb (Internet and program) - Tim Berners Lee - 1991</li>
<li>Public Domain WWW source code - 1993</li>
<li>NCSA Mosaic released - 1993</li>
<li>Opera released - 1994</li>
<li>Marc Anderseen (formerly NCSA) and Jim Clark release
Netscape - 1994</li>
<li>IE from Microsoft (based on Mosaic)
<ul>
<li>DHTML</li>
<li>ActiveX</li>
</ul>
</li>
<li>W3C at MIT (CERN, NCSA, EU)</li>
<li>W3C Recommendations</li>
<li>Mozilla Foundation</li>
</ul>
</li>
<li>HTML4 page structure
<ul>
<li>Comments</li>
<li>Tags
<ul>
<li>Head
<ul>
<li>title</li>
<li>meta</li>
<li>link</li>
<li>script</li>
</ul>
</li>
<li>Body
<ul>
<li>inline tags - <b>b (bold)</b>, <i>i (italic)</i>,
<s>s (strikeout)</s>,
<u>u (underline)</u>, <code>code (fixed-width)</code>,
<span style="background-color: lime; ">span</span>, <a
href="http://www.gnostice.com/">a (anchor - hyperlink)</a></li>
<li>block tags - div (box), table/tr/td (table), ul/ol/li
(list)</li>
<li>other tags - script, noscript</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>IE (see MSDN)</li>
<li>Mozilla (see MDC)</li>
<li>Ajax</li>
</ul>
</li>
<li>CSS2
<ul>
<li>Mozilla (see W3C reference)
<li>IE (see MSDN for filter style)</li>
<li>Accessibility</li>
</ul>
</li>
</ul>
</li>
<li>Doctype - HTML (Transitional/Strict) or XHTML </li>
<li>How Web Pages Work
<ul>
<li>HTTP request</li>
<li>HTTP response</li>
</ul>
</li>
<li>Web Applications - Server-side scripting
<ul>
<li>CGI</li>
<li>ASP, JSP, PHP</li>
<li>ASP.NET</li>
</ul>
</li>
<li>Browser engines
<ul>
<li>IE</li>
<li>Mozilla</li>
<li>KHTML/Webkit</li>
</ul>
</li>
<li>Mobile browsers
<ul>
<li>WAP - very old phones</li>
<li>XHTML - cheap phones</li>
<li>HTML, XHTML, HTML5 - new/expensive phones</li>
</ul>
</li>
<li>HTML 5 and CSS3 - What's New</li>
</ul>
</body>
</html>
--
Bwig Zomberi
> Does IE9 support addEventListener?
Yes, but contrary to other browsers addEventListener is not available in
quirks mode so
http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102001.html
does work while
http://home.arcor.de/martin.honnen/javascript/2010/10/test2010102002.html
does not work, giving an error that the method is not supported.
See also
http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx
--
Martin Honnen
http://msmvps.com/blogs/martin_honnen/
Thanks, Martin. It works when I used standards mode. It is a pity that
IE9 also requires this.
--
Bwig Zomberi
Requires what? Since feature testing with event handling is compulsory
(IE6 to IE8 will prevail for years to come), there's no need to care
about rendering mode and IE version.
Gregor
What you are saying is meant for the web developer. The browser
manufacturer (Microsoft) could have taken this opportunity to make IE
behave more like FireFox or Opera. Non-IE browsers do not require the
HTML source to be picture perfect to support standard API.
After Martin's post, I modified my code with feature testing. However, I
find that IE5.5 will throw an error if I set cursor style to "pointer".
I still have to check navigator.userAgent and set the style to "hand".
Any way I can avoid that?
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HTML Course</title>
<style type="text/css">
ul.LinkedList { display: block; }
ul.LinkedList ul { display: none; }
ul.LinkedList ul ul { display: none; }
ul.LinkedList ul ul ul { display: none; }
ul.LinkedList ul ul ul ul { display: none; }
ul.LinkedList ul ul ul ul ul { display: none; }
</style>
<script type="text/JavaScript">
function addEvents() {
activateTree(document.getElementById("LinkedList1"));
}
function activateTree(oList) {
if (oList.addEventListener) {
oList.addEventListener("click", toggleBranch, false);
} else if (oList.attachEvent) {
oList.attachEvent("onclick", toggleBranch);
}
addLinksToBranches(oList);
}
function toggleBranch(event) {
if (event.target) {
var oBranch = event.target;
} else if (event.srcElement) {
var oBranch = event.srcElement;
}
var cSubBranches = oBranch.getElementsByTagName("ul");
if (cSubBranches.length > 0) {
if (cSubBranches[0].style.display == "block") {
cSubBranches[0].style.display = "none";
} else {
cSubBranches[0].style.display = "block";
};
}
}
function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
cBranches[i].style.cursor = "hand";
} else {
cBranches[i].style.cursor = "pointer";
}
cBranches[i].style.color = "blue";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.cursor = "auto";
}
}
}
}
</script>
</head>
<body onload="addEvents();">
<a href="http://www.example.com/">a (anchor -
hyperlink)</a></li>
<li>block tags - div (box), table/tr/td (table), ul/ol/li
(list)</li>
<li>other tags - script, noscript</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>IE (see MSDN)</li>
<li>Mozilla (see MDC)</li>
<li>Ajax</li>
</ul>
</li>
<li>CSS2
<ul>
<li>Mozilla (see W3C reference)</li>
> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?
>
I seem to remember setting them to both:
cursor:hand;cursor:pointer;
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?
> if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
> cBranches[i].style.cursor = "hand";
> } else {
> cBranches[i].style.cursor = "pointer";
> }
Do you really need to support IE 5.5? If you need to do that then you
might be able to use conditional compilation
http://msdn.microsoft.com/en-us/library/121hztk3%28v=VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/s59bkzce%28v=VS.85%29.aspx
As you want to indentify an IE version and not a JScript version you
might want to use conditional comments in your HTML
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
not conditional JScript compilation.
For instance
<script type="text/javascript">
var cursor = 'pointer';
</script>
<!--[if lt IE 6]>
<script type="text/javascript">
var cursor = 'hand';
</script>
<![endif]-->
and now use the variable named 'cursor' in other script blocks e.g. when
you want to set the CSS cursor property of your elements.
>> Requires what? Since feature testing with event handling is compulsory
>> (IE6 to IE8 will prevail for years to come), there's no need to care
>> about rendering mode and IE version.
>
> What you are saying is meant for the web developer. The browser
> manufacturer (Microsoft) could have taken this opportunity to make IE
> behave more like FireFox or Opera. Non-IE browsers do not require the
> HTML source to be picture perfect to support standard API.
For MS it seems to be of utter importance to make "incompatible" pages
look good - even on their contemporary browsers. (Well, if not a lot of
people with broken webapps might stick to IE6 forever. Literally.)
> After Martin's post, I modified my code with feature testing. However, I
> find that IE5.5 will throw an error if I set cursor style to "pointer".
> I still have to check navigator.userAgent and set the style to "hand".
> Any way I can avoid that?
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <!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" xml:lang="en" lang="en">
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
> <title>HTML Course</title>
> <style type="text/css">
> ul.LinkedList { display: block; }
> ul.LinkedList ul { display: none; }
What are the lines below good for?
> ul.LinkedList ul ul { display: none; }
> ul.LinkedList ul ul ul { display: none; }
> ul.LinkedList ul ul ul ul { display: none; }
> ul.LinkedList ul ul ul ul ul { display: none; }
> <script type="text/JavaScript">
Nitpicking: type="text/javascript"
Do you have to set it via JS? You can use both conditional comments in
your markup and in JS.
[snip]
Gregor
I use IETester to test web pages in all versions of IE (5.5 to 9 Beta).
The page throws up error if I load it in IE 5.5. There are a lot of
people still using Win 2000 and Win 9x/Me.
--
Bwig Zomberi
This works in CSS. When I tried it in JS, the IE debugger finds it as an
invalid argument.
--
Bwig Zomberi
> For MS it seems to be of utter importance to make "incompatible" pages
> look good - even on their contemporary browsers. (Well, if not a lot of
> people with broken webapps might stick to IE6 forever. Literally.)
They should indeed provide backward compatibility. But supporting
standard API only under special conditions is ridiculous.
>
> Do you have to set it via JS? You can use both conditional comments in
> your markup and in JS.
>
I have steered clear of conditional comments because I never liked the
look of it. It now seems necessary but I don't know how to do it.
How do you use JS conditional comments in the following function to
expose cursor="pointer" to IE6 and non-IE browsers, and hide it from IE
5x? In IE 5.5 (I use IETester), the debugger catches cursor="pointer" no
matter what I try. All help is appreciated.
function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
cBranches[i].style.cursor = "hand";
} else {
cBranches[i].style.cursor = "pointer";
}
cBranches[i].style.color = "blue";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.cursor = "auto";
}
}
}
}
For now, I have used a try-catch block that does the job. It does not
feel right though.
try {
cBranches[i].style.cursor = "pointer";
} catch (e) {
cBranches[i].style.cursor = "hand";
}
--
Bwig Zomberi
maybe (without any conditional comments)
using a css class fixed for your purpose ?
.branch { cursor: pointer; cursor: hand; color: blue; }
> function addLinksToBranches(oList) {
> var cBranches = oList.getElementsByTagName("li");
> var i, n, cSubBranches;
> if (cBranches.length > 0) {
> for (i=0, n = cBranches.length; i < n; i++) {
> cSubBranches = cBranches[i].getElementsByTagName("ul");
> if (cSubBranches.length > 0) {
> addLinksToBranches(cSubBranches[0]);
cBranches[i].className = 'branch';
> if (navigator.userAgent.toLowerCase().indexOf("msie 5") > 1) {
> cBranches[i].style.cursor = "hand";
> } else {
> cBranches[i].style.cursor = "pointer";
> }
> cBranches[i].style.color = "blue";
no more usefull ( class 'branch')
> cSubBranches[0].style.color = "black";
> cSubBranches[0].style.cursor = "auto";
why "black" or/and "auto" ? when "" could be enough
> }
> }
> }
> }
--
Stéphane Moriaux avec/with iMac-intel
Yes, Evertjan suggested that but I was curious as to how JS conditions
could fix it.
--
Bwig Zomberi
I don't know "JS" conditional comments ...
<p id="test"> blah </p>
<script type="text/javascript">
var cursor = 'pointer';
</script>
<!--[if ite IE5.5]>
<script> cursor = 'hand'; </script>
<![Endif]-->
<script type="text/javascript">
document.getElementById('test').style.cursor = cursor;
</script>
cursor:hand; for any IE
<p id="test2"> blah </p>
<script type="text/javascript">
var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
document.getElementById('test2').style.cursor = cursor;
</script>
Google can do that for you. A search reveals (among a lot of other hits):
http://en.wikipedia.org/wiki/Conditional_comment
Gregor
No need for that, just manipulate classes in Javascript and use the style
as a compound property like in the class .branch above.
I found the documentation all right but I could not come up with a way
to use conditional comments in that JS function and yet expose
cursor="pointer" to other browsers. Other browsers ignore conditional
comments.
I have gone with Evertjan's and SAM's idea. Thanks.
function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches, sCursorStyle;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
// .HandCursorStyle { cursor: pointer; cursor: hand; }
cBranches[i].className = "HandCursorStyle";
cBranches[i].style.color = "blue";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.cursor = "default";
}
}
}
}
--
Bwig Zomberi
Yes, absolutely, it's like that that it works : comments only for IEs
So ... as shown in my previous post ...
JS : variables for other browsers
comment (for IE <= 5.5 for instance) + JS : variables for those IEs
JS : common variables and functions
> cursor:hand; for any IE
^^^
[…]
> var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
^^
There are only two problems with that code.
1) You didn’t bother to test it in any IE.
2) As has been mentioned countless times in this NG, there is no
relation between JScript and MSHTML(-features). Unsurprisingly,
the above does not work in IE beta 9 in IE 9 standards mode.
--
λ
> SAM <stephanemor...@wanadoo.fr.invalid> writes:
>> var cursor = /*@cc_on!cc@*/true? 'pointer' : 'hand';
> ^^
> 2) As has been mentioned countless times in this NG, there is no
> relation between JScript and MSHTML(-features). Unsurprisingly,
> the above does not work in IE beta 9 in IE 9 standards mode.
(to avoid confusion: even after the syntax error is corrected)
--
λ
possibly there is no need of the last 'cc' ...
> There are only two problems with that code.
>
> 1) You didn’t bother to test it in any IE.
as /*@cc_on ... @*/
is only understood by M$ products ...
Normally any IE will read and understand that, no ?
> 2) As has been mentioned countless times in this NG, there is no
> relation between JScript and MSHTML(-features).
Don't know of what you're speaking
> Unsurprisingly, the above does not work in IE beta 9 in IE 9 standards mode.
Ha ?
Tant mieux !
As IE9 certainly understands cursor: pointer; (I hope ! Does it?)
that's better again.