standards for accessing id’s from javascript in ns & ie

@noisearchitectNov 27.2002

ok, I’m confused about the whole cross-browser stuff. Before I thought that there was just a lot of complicated code i would take a long time ever to understand required to make it work in both browsers. However, having learned more, it seems that both browsers are trying to conform to these w3c standards, meaning that only one type of code is required (i.e. instead of document.all or document.layers use document.getElementById(id) ).

So can you tell me exactly how it works? Here’s my up-to -the-minute understanding of it (i’m sure it’s all very wrong:

You have document.all for IEx.x. However IE5 and above supports document.getElementById(). document.getElementById() is the w3c standard and is supported by Netscape 6 and above. Any netscape below used document.layers

according to w3schools.com, ie4 accounts for 0.3% of users, so to be honest, I’m not worried about catering for it. Netscape<5 account for 3.1% (a lot of which is probably web designers just using it to check their pages work?). 4.6% use Netscape5 or greater. However, i would assume that most users of Netscape for surfing would upgrade their software when it became an upgrade, so i assume that most of this 4.6% will be using Netscape 7, which is compatible with w3c standards, and hence compatible with document.getElementById().

Finally, 83.8% of users use IE>5, and hence are also compatible with document.getElementById().

So surely you’re excluding very few users (a number ever decreasing) by using document.getElementById()?

And to use document.getElementById(), I need to give an id to all the elements of the page (eg a table or a cell or a div). These elements are assigned a class also, which links to styles of a CSS. So to make an element of id ‘m1’ hidden, I need to put in my javascript:

document.getElementById(m1).style.visibility=’hidden’;

And this code will work for just about everyone.

Ok – so that’s it as I understand it. So if anyone has the time, i’d appreciate it if they’d go through what I’ve written and explain where I’m right and where I’ve gone wrong and why.

to post a comment

JavaScript

8 Comments(s) _↴

@gil_davisNov 27.2002 — #I use a goofy little chunk of script that adds getElementById (sort of) to an older browser:

if (!document.getElementById) {
 document.getElementById = function(strID) {
 if (document.layers) return document[strID];
 if (document.all) return document.all[strID];
 return null;    // expect the unexpected
 }
 }

At least you get the object. The style caveat is still lurking for you to stumble on.

@noisearchitectauthorNov 27.2002 — #could you be a little more explanatory? I don't really understand how that little bit of code works, or even what exactly it does.

Plus, I'd appreciate a little more detail on the questions I posed, if anyone has the time.

@gil_davisNov 28.2002 — #

if (!document.getElementById) { // non-W3C compliant
 document.getElementById = function(strID) { // create the function
 if (document.layers) return document[strID]; // NS 4.x
 if (document.all) return document.all[strID]; // IE 3.x and up
 return null;    // expect the unexpected
 }
 }

Is that enough detail?

You call it just like the "real" document.getElementById(). It has a limitation of single layer depth in NS 4, but you could call it recursively if you have to use embedded layers.

As to your questions,

[b]So can you tell me exactly how it works?[b][/quote]

JavaScript is an object-oriented language. The objects are created by the browser from the HTML, and provided to the script interface. The original browsers had a unique document object model (DOM) and provided access to this model in proprietary ways.

Netscape 4.x was the first browser to offer Dynamic HTML by combining cascaded style sheets (level 1, almost) with JavaScript. Primarily their implementation was limited to position, z-index, and visibility on layers only (you can make any object into a layer by declaring it's style "position: absolute" or "relative", but not all tags will support all features). They provided the "layer" array to automatically gather all layers created in the document, as a convenience. Each layer had it's own document, which in turn could possibly contain more layers. You can even create and destroy layers at run-time. Many object did not handle events, and some events could be assigned to the window or document object to make custom event handlers.

IE 4.x followed, but expanded greatly on the interface between (VB and Java) script and objects. Their idea of gathering objects was the "all" array (hey, it contains all the objects). They also introduced the "style" collection which allows you to access every style sheet property on any object. Not only that, but their list of events is huge compared to Netscape's, and every object could produce every event. Also, they "bubble" events through the document tree (powerful, but confusing).

Then came the W3C and ECMA (tree killers anonymous) to stress standards (really, a good thing to a point). The first browsers to attempt to be standard was NS 5 and Mozilla 0. NS 5 died before it was released, because the the specs kept changing (design by committee).

Microsoft came out with IE 5, followed rather quickly by IE 5.5. The W3C methods were added, and IE 4-isms remained for backwards compatibility.

Mozilla kept growing and eventually became NS 6. It looked and acted like a slow IE 5. It is extremely strict about sticking to the W3C specs, even to the point of dropping their proprietary layers stuff (so much for backwards compatibility thank you very much).

I'll leave IE 6 and NS 7 to someone else, because I haven't bothered trying either one of them yet.

Is anybody still awake? Sorry, that was pretty long. Maybe I should have made a web page...

@noisearchitectauthorNov 28.2002 — #long...but inbeleivably helpful! thanx so much - I've looked at many a webpage and tutorial, but none have explained it as well as that!

a couple more questions tho :p , more confirmations, really:

so an object is any element on the page (i.e. a table or cell, an anchor, an image etc.)? And to access an individual element (i.e. the 4th cell of a table, rather than all cells) you give it an id (i.e. cell4)?

Finally, if you look at [URL=http://www.intraspin.com/iracmenu.html]this page[/URL] you'll see a menu I created, in which I neglected to use the getElementById function. Why does this still work?

Oohps, one more. On that same page, you'll notice that I was unable to get the hide function to work as I wanted it work, like the show function (one function for many menus). This is something to do with the fact that I have a function within a function. This is also an issue if I try to use the getElementById function.

So, if you could explain in similar laymans terms as you did before, why that is an issue, and how to fix it, that'd be awesome.

Thanks so much,

Iain

P.S. sorry about the terrible highlight color! if ur using a desktop monitor - it looks totally different on a laptop screen - amazing. I haven't got around to putting a new color in yet.

@gil_davisNov 28.2002 — #[i]Originally posted by noisearchitect [/i]

[B]so an object is any element on the page (i.e. a table or cell, an anchor, an image etc.)?[/b][/quote]

In the DOM compliant world, yes. In the NS 4 world, no (maybe, well, they aren't all accessible by script).

[b]to access an individual element (i.e. the 4th cell of a table, rather than all cells) you give it an id (i.e. cell4)?[/b][/quote]

Yes, you can do that and then use document.getElementById("cell4") to access the cell.

[b]a menu I created, in which I neglected to use the getElementById function. Why does this still work?[/b][/quote]

I viewed your page using IE 5.5. I would not have expected it to work at all. The only explanation I can give you is that IE lets anything go. It certainly does not work in NS 6.2. (Isn't Bill Gates diabolical? He gets people to code "crap" by allowing it to work in his browser, and then the competition can't keep up and their browsers look lousy because they try to support the "standards"!)

[b]if you could explain in similar laymans terms as you did before, why that is an issue, and how to fix it, that'd be awesome.[/b][/quote]

The easiest thing to try that would be cross-browser friendly would be to pass the ID (as a string) of the thing you want to manipulate, and use the document.getElementById() method. For example:

m.style.visibility='visible';

becomes

document.getElementById(m).style.visibility='visible';

assuming that m is a var that contains a string.

If you change all instances, then you can be compatible with NS 6+ and Mozilla. If you add the bit of code that I posted earlier, then IE 4 will also work with no further changes. NS 4 however, would take a lot more work.

This part:

[font=courier]<td id="mtitle1" class="mtitle" onmouseover="show(m1, mtitle1);" onmouseout="turnOff(); hide1();">[/font]

could change to:

[[font=courier]]<td id="mtitle1" class="mtitle" onmouseover="show('m1', 'mtitle1');" onmouseout="turnOff(); hide('m1', 'mtitle1');">[/font]

with this script:

[[font=courier]]function hide(obj, ttl) {

setTimeout("if (on == false) {document.getElementById(" + obj + ").style.visibility='hidden'; document.getElementById(" + ttl + ").style.backgroundColor='#FFFFFF';}",1000);

}[/font]

Does that help?

@noisearchitectauthorNov 28.2002 — #cool - thanks, I'm going to go and try to do that. Before I do however, what are the '[]' at the beginning of your suggested code:could change to:

[]<td id="mtitle1" class="mtitle" onmouseover="show('m1', 'mtitle1');" onmouseout="turnOff(); hide('m1', 'mtitle1');">

with this script:

[]function hide(obj, ttl) {

setTimeout("if (on == false) {document.getElementById(" + obj + ").style.visibility='hidden'; document.getElementById(" + ttl + ").style.backgroundColor='#FFFFFF';}",1000);

}[/quote]

Also, so I can understand what I'm doing, what difference does it making them a string instead of a variable? Is it because you can't pass variables between functions? If so, why isn't this possible?

I'm afraid that, when it comes to webwork, I seem to leap and then learn to swim once in deep water - the opposite of my normal over-cautious way!

cheers again,

Iain

@gil_davisNov 28.2002 — #[i]Originally posted by noisearchitect [/i]

[B]cool - thanks, I'm going to go and try to do that. Before I do however, what are the '[]' at the beginning of your suggested code:[/b][/quote]

Must have been fat fingers. ? Should have been:
could change to:

[font=courier]<td id="mtitle1" class="mtitle" onmouseover="show('m1', 'mtitle1');" onmouseout="turnOff(); hide('m1', 'mtitle1');">[/font]

with this script:

[font=courier]function hide(obj, ttl) {

setTimeout("if (on == false) {document.getElementById(" + obj + ").style.visibility='hidden'; document.getElementById(" + ttl + ").style.backgroundColor='#FFFFFF';}",1000);

}[/font][/quote]

what difference does it making them a string instead of a variable?[/quote]

It looked easier for some reason. It's certainly shorter code in the link.

Is it because you can't pass variables between functions?[/quote]

You can pass them, but you can't change them in the function unless they are global variables.

I seem to leap and then learn to swim once in deep water[/QUOTE]

(glub, glub) Someone get a life preserver, quick!

@noisearchitectauthorNov 28.2002 — #tried it, but it didn't work. I tried just changing the hide function for the moment (i.e. not worring about making the show function proper yet). I've put the page up [URL=http://www.intraspin.com/iracmenu2.html]here[/URL]. I get the error message "'style' is null or not an object" when trying to show a menu, and then "object required" when trying to exit preview.

Iain

Also in #JavaScript _↴

Close SELECT Dropdown Newbie needs help with Arrays Collapsing/Expanding() All nodes in a TreeMenu using javascript

Success!

Help @noisearchitect spread the word by sharing this article on Twitter...

Tweet This

standards for accessing id’s from javascript in ns & ie

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

standards for accessing id’s from javascript in ns & ie

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴