Javascript error with new drop down menu

Menu doesn't show up in Netscape

[Lorel]

Hi All,

I found a drop down menu designed in HTML, CSS and Javascript (to control the mouseovers). I thought everything was working perfectly but Netscape 4.79 on the Mac doesn't bring up the menu at all and gives an error saying:

document.getElementById is not a function.

Does anyone know if there is a fix for this?

thanks,
Lori

[BlobFisk]

The error should point you at a line number in your code, could you post that code line?

[Bernard Marx]

document.getElementById is not a function

Simply as it says. Version 4 browsers (IE included) don't support getElementById

If you put this at the top of your code it will allow you to use

document.getElementById

with IE4.

if(document.all&&!document.getElementById)
  document.getElementById = function(id){return this.all[id]}

However, Netscape 4 can only reference certain elements anyway. Something like:

Positioned DIV
Forms and elements
Images (?)

It has no element style objects, and uses some now non-standard style property values.

..and apart from that, if your code is producing errors like that, there is bound to be some DOM functionality it uses that Netscape 4 (+ probably IE4) doesn't support. It may be easier to simply forget these old browsers, or make sure that the script ignores these browsers without error, and that the remaining page navigation is still enough to get around your site.

[Lorel]

Hi Blobfisk

Here is the js code. I got it from the site referenced below. This is supposed to work on several browsers:

/*
* DO NOT REMOVE THIS NOTICE
*
* PROJECT: mygosuMenu
* VERSION: 1.0.4
* COPYRIGHT: (c) 2003,2004 Cezary Tomczak
* LINK: [gosu.pl...]
* LICENSE: BSD (revised)
*/

var menuTimeout = 400

var menuSections = new Array()
var menuCountHide = new Array()

var menuSectionCnt = 0
var menuBoxCnt = 0

function menuShow(section, elements) {
for (var i = 0; i < menuSections.length; i++) {
if (menuSections[i]!= section) {
menuHide(menuSections[i], menuCountNodes(menuSections[i]))
}
}
for (var i = 1; i <= elements; i++) {
document.getElementById(section + '-' + i).style.visibility = 'visible'
}
}

function menuHide(section, elements) {
for (var i = 1; i <= elements; i++) {
document.getElementById(section + '-' + i).style.visibility = 'hidden'
}
document.getElementById(section).style.zIndex = -1
}

function menuTryHide(section, elements, countHide) {
if (countHide!= menuCountHide[section]) {
return
}
menuHide(section, elements)
}

function menuCountNodes(element) {
ret = 0
nodes = document.getElementById(element).childNodes.length
for (var i = 0; i < nodes; i++) {
if (document.getElementById(element).childNodes[i].nodeType == 1) {
ret++
}
}
return ret
}

function menuInitSection(section) {
var elements = menuCountNodes(section)
for (var i = 0; i <= elements; i++) {
var s = (i == 0? (section + '-top') : (section + '-' + i))
if (i == 0) {
document.getElementById(s).onmouseover = function() {
menuShow(section, elements)
menuCountHide[section]++
for (var ii = 0; ii < menuSections.length; ii++) {
document.getElementById(section).style.zIndex = 1
if (menuSections[ii]!= section) {
document.getElementById(menuSections[ii]).style.zIndex = -1
}
}
}
} else {
document.getElementById(s).onmouseover = function() {
//menuShow(section, elements)
menuCountHide[section]++
}
}
document.getElementById(s).onmouseout = function() {
setTimeout("menuTryHide('" + section + "', " + elements + ", " + menuCountHide[section] + ")", menuTimeout)
}
}
}

function menuMakeId(nodes) {
for (var i = 0; i < nodes.length; i++) {
switch (nodes[i].className) {
case 'top':
menuSectionCnt++
menuBoxCnt = 0
nodes[i].id = 'menu-' + menuSectionCnt + '-top'
break
case 'section':
nodes[i].id = 'menu-' + menuSectionCnt
menuSections[menuSections.length] = nodes[i].id
break
case 'box':
menuBoxCnt++
nodes[i].id = 'menu-' + menuSectionCnt + '-' + menuBoxCnt
break
}
if (nodes[i].childNodes) {
menuMakeId(nodes[i].childNodes)
}
}
}

function menuInit() {
menuMakeId(document.getElementById('menu').childNodes)
for (var i = 0; i < menuSections.length; i++) {
menuCountHide[menuSections[i]] = 0
}
for (var i = 0; i < menuSections.length; i++) {
menuInitSection(menuSections[i])
}
}

[Lorel]

Hi Bernard,

Simply as it says. Version 4 browsers (IE included) don't support getElementById

If you put this at the top of your code it will allow you to use document.getElementById with IE4.

if(document.all&&!document.getElementById)
document.getElementById = function(id){return this.all[id]}

Can you tell me, by the code I just posted, where to put it?

.and apart from that, if your code is producing errors like that, there is bound to be some DOM functionality it uses that Netscape 4 (+ probably IE4) doesn't support.

I posted a message on an HTML critique group and so far the only problem is (besides needing to widen the sub menu so text doesn't go beyond the background) it is not centering properly on some browsers, i.e., left hand side of menu starts in middle of page and they have to scroll to the right to see it all. I put the table at a width the same as menu and then centered the table but in IE 6 it messes up. I did it that way so it would work correctly in a higher resolution and 800x600 which I'm using. So I'm wondering if there is another way to center it--absolute positioning won't work at different resolutions from what I can tell.

It may be easier to simply forget these old browsers, or make sure that the script ignores these browsers without error, and that the remaining page navigation is still enough to get around your site.

I have a footer with all links on it but I'd like to incorporate as many browsers as possible otherwise it leaves a blank space at top of page.

thanks,
Lorel

[Bernard Marx]

Can you tell me, by the code I just posted, where to put it?

As long as it's executed before its effects are needed, so at the top. But it's nice to have your parameters and global variables first - like you have - so underneath them would be good.

Judging by the code you posted:

IE4 may work with the script (once the above is done)
NS4 will never understand it.

It wouldn't be to hard to get the menu to simply disappear if it meets a ver4 browser. These browsers are virtually non-existent these days (could we say < 5%?). The bigger issue is your problems with more modern browsers.

So I'm wondering if there is another way to center it--absolute positioning won't work at different resolutions from what I can tell.

Not quite sure what you meant by the last part of that. I'd try and avoid centering with script. The standard CSS method is complicated by the fact that IE doesn't respect the standard.

BODY{text-align:center;}
To center content in IE. Then you have to set text-align back to left in the top-level elements.
Then
menuContainer{margin-left:auto;margin-right:auto;}

Do you have a URL you could sticky, so I could see the HTML/CSS?