Help with javascript code--proper functioning in IE

JavaScript
1

Hello,
I am having some compatibility issues with some code I wrote–the code works fine in Firefox and Safari, but not at all in IE. Here is the code:

<style type=“text/css”>

.label
{

display:block;
font: Bold 12px Verdana;
color:#6d4450;
margin:0;
padding:10px;
cursor: pointer;
}

.label:hover { font: Bold Verdana;
color: #9fda7f;
text-decoration: none; }

p.label { color:#1597d4;
display:block;
font: 12px Verdana;
margin:0;
padding: 3px; }

.elements
{
display:block;
}

a {

font: Bold 12px Verdana;
color:#6d4450;

}

</style>

<script type=“text/javascript”>
//<! [CDATA[
window.onload = function() {

var elems = null;
var labels = null;

if (document.querySelectorAll) {

  elems = document.querySelectorAll('div.elements');
  labels = document.querySelectorAll('div.label');

} else if (document.getElementsByClassName) {
window.alert(“In here”);
elems = document.getElementsByClassName(‘elements’);
labels = document.getElementsByClassName(‘label’);
}

if (elems) {
for (var i = 0; i < elems.length; i++) {
elems[i].style.display=‘none’;
}
for (var i = 0; i < labels.length; i++) {
labels[i].onclick=showBlock;
}
}
}
function showBlock(evnt) {

var theEvent = evnt ? evnt : window.event;
var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
var itemId = “elements” + theSrc.id.substr(5,1);
var item = document.getElementById(itemId);
if (item.style.display==‘none’) {
item.style.display=‘block’;
} else {

item.style.display=‘none’;
}
}
// ]]></script>

<div class=“label” id=“label1”>
Where Do I Begin with My Research?
</div>
<div class=“elements” id=“elements1”>

<h1 class=“heading”>Not Sure Where to Go?</h1>

The purpose of the code is to create accordion-style menu items on a help page–you click a heading, and the text associated with that heading is revealed…

I must admit, I am a studier of textbooks when it comes to programming–I like to know what is going on in the code…so, this code came from a textbook, and I adapted it to my setting. The code is written so it degrades gracefully–so, instead of interactivity in IE, the text is just displayed…this is good, because the content is still readable, even if the javascript does not become enabled…

It would great, however, if I could get this to work in IE…the textbook indicated that it probably wouldn’t (the author being unsure if IE would eventually support document.querySelectorAll or document.getElementsByClassName)…my one idea was that I could use getElementsByTagName…I tried it, but had some trouble getting it to work.

I am fairly new at this…sorry if the question is rubbish…

I appreciate your help, or any advice you could give!

Michael

2

Your document needs to be in “IE8 standards mode” for queryselectorall to be available.

This means using an appropriate doctype for your page, for example:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>

</body>
</html>
3

Hi,

I did a bit of research on query selectors in IE8, and reviewed the book I got the above code in.

Interestingly, the book indicates this code should work in IE8–there is even a screen shot of it working in IE8.

Additionally, I found this page on the Microsoft Developer’s Forum:

It has this example:

function doit()
{
var oAllPs = document.querySelectorAll(“div.detail”);
var sFound = ( oAllPs == null ) ?
“No matches found” : allPs.length;
alert( "Results: " + sFound );
}

This matches the approach I am using with my code–even if it is nonstandard, it should work with IE8, right? If not, why would IE include this information on their developer’s Web site–something else is wrong, I think…

4

Just about all of the JavaScript you have used is in the latest additions to FireFox/Safari and hasn’t actually been added to the JavaScript standards yet. To get it to work you need to add your own functions to emulate those commands for the browsers that don’t already understand them.

5

I appreciate the response–I had assumed that the principles of interaction with the style properties, while a bit new, was standard–for the simple reason that it came from a good source! (And, from my understanding that IE is terribly behind standards, hence Google’s offer to help IE “modernize” shortly after releasing Chrome–which is sort of like having your friend who is better at basketball giving you a 10-point handicap–you probably need it, but admitting it is hard).

I will see if I can’t write some functions to replicate it in IE–if not, not a huge deal–it doesn’t prevent the content from being read if it doesn’t work (a beautiful thing)–and, I styled the layout in such a way that it doesn’t look amiss if the javascript doesn’t function–just not as easy to interact with…