124280 - Javascript: document.getElementById(...) returns null in Mozilla 0.9.7

Status: VERIFIED WORKSFORME

(Core :: DOM: Core & HTML, defect)

Description

[John Zuckerman]

The attached balloon help demo code works in Opera 6, NS4, IE5+, but not Mozilla
0.9.7. Javascript document.getElementById returns null in Mozilla (the correct
element is returned by Opera and code works there).  

Two files are attached:

  balloon.js (the java browser sniffer and balloon help Javascript code)
  balloon.html (the balloon help demo in html)

John

--- balloon.js


// Ultimate client-side JavaScript client sniff. Version 3.02
// (C) Netscape Communications 1999-2001.  Permission granted to reuse and
distribute.
// Revised 17 May 99 to add is_nav5up and is_ie5up (see below).
// Revised 20 Dec 00 to add is_gecko and change is_nav5up to is_nav6up
//                      also added support for IE5.5 Opera4&5 HotJava3 AOLTV
// Revised 22 Feb 01 to correct Javascript Detection for IE 5.x, Opera 4, 
//                      correct Opera 5 detection
//                      add support for winME and win2k
//                      synch with browser-type-oo.js
// Revised 26 Mar 01 to correct Opera detection

// Everything you always wanted to know about your JavaScript client
// but were afraid to ask. Creates "is_" variables indicating:
// (1) browser vendor:
//     is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV
// (2) browser version number:
//     is_major (integer indicating major version number: 2, 3, 4 ...)
//     is_minor (float   indicating full  version number: 2.02, 3.01, 4.04 ...)
// (3) browser vendor AND major version number
//     is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3,
//     is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_hotjava3,
is_hotjava3up,
//     is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up
// (4) JavaScript version number:
//     is_js (float indicating full JavaScript version number: 1, 1.1, 1.2 ...)
// (5) OS platform and version:
//     is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98,
is_winme, is_win2k
//     is_os2
//     is_mac, is_mac68k, is_macppc
//     is_unix
//     is_sun, is_sun4, is_sun5, is_suni86
//     is_irix, is_irix5, is_irix6
//     is_hpux, is_hpux9, is_hpux10
//     is_aix, is_aix1, is_aix2, is_aix3, is_aix4
//     is_linux, is_sco, is_unixware, is_mpras, is_reliant
//     is_dec, is_sinix, is_freebsd, is_bsd
//     is_vms
//
// See http://www.it97.de/JavaScript/JS_tutorial/bstat/navobj.html and
// http://www.it97.de/JavaScript/JS_tutorial/bstat/Browseraol.html
// for detailed lists of userAgent strings.
//
// Note: you don't want your Nav4 or IE4 code to "turn off" or
// stop working when new versions of browsers are released, so
// in conditional code forks, use is_ie5up ("IE 5.0 or greater") 
// is_opera5up ("Opera 5.0 or greater") instead of is_ie5 or is_opera5
// to check version in code which you want to work on future
// versions.

    // convert all characters to lowercase to simplify testing
    var agt=navigator.userAgent.toLowerCase();

    // *** BROWSER VERSION ***
    // Note: On IE5, these return 4, so use is_ie5up to detect IE5.
    var is_major = parseInt(navigator.appVersion);
    var is_minor = parseFloat(navigator.appVersion);

    // Note: Opera and WebTV spoof Navigator.  We do strict client detection.
    // If you want to allow spoofing, take out the tests for opera and webtv.
    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
    var is_nav2 = (is_nav && (is_major == 2));
    var is_nav3 = (is_nav && (is_major == 3));
    var is_nav4 = (is_nav && (is_major == 4));
    var is_nav4up = (is_nav && (is_major >= 4));
    var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||
                          (agt.indexOf("; nav") != -1)) );
    var is_nav6 = (is_nav && (is_major == 5));
    var is_nav6up = (is_nav && (is_major >= 5));
    var is_gecko = (agt.indexOf('gecko') != -1);


    var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    var is_ie3    = (is_ie && (is_major < 4));
    var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5")==-1) );
    var is_ie4up  = (is_ie && (is_major >= 4));
    var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
    var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
    var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);
    var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);

    // KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
    // or if this is the first browser window opened.  Thus the
    // variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
    var is_aol   = (agt.indexOf("aol") != -1);
    var is_aol3  = (is_aol && is_ie3);
    var is_aol4  = (is_aol && is_ie4);
    var is_aol5  = (agt.indexOf("aol 5") != -1);
    var is_aol6  = (agt.indexOf("aol 6") != -1);

    var is_opera = (agt.indexOf("opera") != -1);
    var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
    var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
    var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
    var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
    var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);

    var is_webtv = (agt.indexOf("webtv") != -1); 

    var is_TVNavigator = ((agt.indexOf("navio") != -1) ||
(agt.indexOf("navio_aoltv") != -1)); 
    var is_AOLTV = is_TVNavigator;

    var is_hotjava = (agt.indexOf("hotjava") != -1);
    var is_hotjava3 = (is_hotjava && (is_major == 3));
    var is_hotjava3up = (is_hotjava && (is_major >= 3));

    // *** JAVASCRIPT VERSION CHECK ***
    var is_js;
    if (is_nav2 || is_ie3) is_js = 1.0;
    else if (is_nav3) is_js = 1.1;
    else if (is_opera5up) is_js = 1.3;
    else if (is_opera) is_js = 1.1;
    else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;
    else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;
    else if (is_hotjava3up) is_js = 1.4;
    else if (is_nav6 || is_gecko) is_js = 1.5;
    // NOTE: In the future, update this code when newer versions of JS
    // are released. For now, we try to provide some upward compatibility
    // so that future versions of Nav and IE will show they are at
    // *least* JS 1.x capable. Always check for JS version compatibility
    // with > or >=.
    else if (is_nav6up) is_js = 1.5;
    // NOTE: ie5up on mac is 1.4
    else if (is_ie5up) is_js = 1.3

    // HACK: no idea for other browsers; always check for JS version with > or >=
    else is_js = 0.0;

    // *** PLATFORM ***
    var is_win   = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
    // NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
    //        Win32, so you can't distinguish between Win95 and WinNT.
    var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));

    // is this a 16 bit compiled version?
    var is_win16 = ((agt.indexOf("win16")!=-1) || 
               (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) || 
               (agt.indexOf("windows 16-bit")!=-1) );  

    var is_win31 = ((agt.indexOf("windows 3.1")!=-1) ||
(agt.indexOf("win16")!=-1) ||
                    (agt.indexOf("windows 16-bit")!=-1));

    var is_winme = ((agt.indexOf("win 9x 4.90")!=-1));
    var is_win2k = ((agt.indexOf("windows nt 5.0")!=-1));

    // NOTE: Reliable detection of Win98 may not be possible. It appears that:
    //       - On Nav 4.x and before you'll get plain "Windows" in userAgent.
    //       - On Mercury client, the 32-bit version will return "Win98", but
    //         the 16-bit version running on Win98 will still return "Win95".
    var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
    var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
    var is_win32 = (is_win95 || is_winnt || is_win98 || 
                    ((is_major >= 4) && (navigator.platform == "Win32")) ||
                    (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));

    var is_os2   = ((agt.indexOf("os/2")!=-1) || 
                    (navigator.appVersion.indexOf("OS/2")!=-1) ||   
                    (agt.indexOf("ibm-webexplorer")!=-1));

    var is_mac    = (agt.indexOf("mac")!=-1);
    // hack ie5 js version for mac
    if (is_mac && is_ie5up) is_js = 1.4;
    var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || 
                               (agt.indexOf("68000")!=-1)));
    var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) || 
                                (agt.indexOf("powerpc")!=-1)));

    var is_sun   = (agt.indexOf("sunos")!=-1);
    var is_sun4  = (agt.indexOf("sunos 4")!=-1);
    var is_sun5  = (agt.indexOf("sunos 5")!=-1);
    var is_suni86= (is_sun && (agt.indexOf("i86")!=-1));
    var is_irix  = (agt.indexOf("irix") !=-1);    // SGI
    var is_irix5 = (agt.indexOf("irix 5") !=-1);
    var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));
    var is_hpux  = (agt.indexOf("hp-ux")!=-1);
    var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));
    var is_hpux10= (is_hpux && (agt.indexOf("10.")!=-1));
    var is_aix   = (agt.indexOf("aix") !=-1);      // IBM
    var is_aix1  = (agt.indexOf("aix 1") !=-1);    
    var is_aix2  = (agt.indexOf("aix 2") !=-1);    
    var is_aix3  = (agt.indexOf("aix 3") !=-1);    
    var is_aix4  = (agt.indexOf("aix 4") !=-1);    
    var is_linux = (agt.indexOf("inux")!=-1);
    var is_sco   = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);
    var is_unixware = (agt.indexOf("unix_system_v")!=-1); 
    var is_mpras    = (agt.indexOf("ncr")!=-1); 
    var is_reliant  = (agt.indexOf("reliantunix")!=-1);
    var is_dec   = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) || 
           (agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) || 
           (agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1)); 
    var is_sinix = (agt.indexOf("sinix")!=-1);
    var is_freebsd = (agt.indexOf("freebsd")!=-1);
    var is_bsd = (agt.indexOf("bsd")!=-1);
    var is_unix  = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux || 
                 is_sco ||is_unixware || is_mpras || is_reliant || 
                 is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);

    var is_vms   = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));


function maketheBalloon(id, width, message)
{
   document.write('<STYLE TYPE="text/css">#'+id+'{width:'+width+';}</STYLE>');
   document.write('<DIV CLASS="balloon" id="'+id+'">'+message+'</DIV >');
}

function makeItVisible(id, event)
{
	if (is_nav4) {
		var bw = document.layers[id].document.width;
		var bx = event.pageX + 10;	  
		var bxr = bx + bw;
		if (bxr > window.innerWidth) bx -= bxr - window.innerWidth;
		document.layers[id].left = bx;
		document.layers[id].top = event.pageY + 10;
		document.layers[id].visibility = "show";
	} else if (is_ie) {
		var bw = document.all[id].document.width;
		var bx = event.clientX + 10;	  
		var bxr = bx + bw;
		if (bxr > window.innerWidth) bx -= bxr - window.innerWidth;
		document.all[id].style.pixelLeft = document.body.scrollLeft + bx;
		document.all[id].style.pixelTop = (document.body.scrollTop + event.clientY) + 10;
		document.all[id].style.visibility = "visible";
	} else if (is_opera || is_js >= 1.5) {
		var elem = document.getElementById(id); /* mozilla returns null */
		var bw = elem.getAttribute("width");
		var bx = event.clientX + 10;	  
		var bxr = bx + bw;
		if (bxr > window.innerWidth) bx -= bxr - window.innerWidth;
		document.getElementById(id).style.pixelLeft = document.body.scrollLeft + bx;
		document.getElementById(id).style.pixelTop = 
			(document.body.scrollTop + event.clientY) + 10;
		document.getElementById(id).style.visibility = "visible";
	} else document.writeln("makeItVisible: unknown browser type");
}

function hideHelp(id)
{
	if (is_nav4) document.layers[id].visibility="hide";
	else if (is_ie) document.all[id].style.visibility="hidden";
	else if (is_opera || is_js >= 1.5)
document.getElementById(id).style.visibility="hidden";
	else document.writeln("hideHelp: unknown browser type");
}


--- balloon.html

<HTML>
<TITLE>Department of Mathematics Ballon Help Demo</TITLE>

<style type="text/css">
<!--
.balloon {border-width: thin; border-style: none; border-color: black; 
    position: absolute; background-color: lightyellow;
    layer-background-color: lightyellow; visibility: hidden}
.isTip {text-decoration: none; color: red }
-->
</style>

<SCRIPT language=javascript src="./balloon.js"></SCRIPT>

<SCRIPT language=javascript>

maketheBalloon("first", 300, "this is the first balloon help");
maketheBalloon("second", 300, "This is the second balloon help. This is an extra
long, long, long, long, long, <em>long</em> <img src=./green.gif> <img
src=\"http://www.math.tamu.edu/~william.rundell/images/wrmugshot.jpg\">paragraph.");

</SCRIPT>


<BODY>



This is a test. <img src=./green.gif>

<A HREF=# 
   CLASS="isTip" 
   onMouseOver="makeItVisible('first', event)" 
   onMouseOut="hideHelp('first')"
>buzzwords</A> 

This is another test.

<A HREF=# 
   CLASS="isTip" 
   onMouseOver="makeItVisible('second', event)" 
   onMouseOut="hideHelp('second')"
>comic</A> 

This is the end.


</BODY>
</HTML>

Comment 1

[Phil Schwartau]

Attachment: Reporter's testcase with all JS placed in-line

Comment 2

[Phil Schwartau]

Browser, not engine. Reassigning to DOM Level 0. 

Comment 3

[Phil Schwartau]

The attachment WORKSFORME using Mozilla trunk binaries 20020206xx on WinNT,
and 20020207xx on Linux. There are no errors in the JavaScript Console,
and when I mouseover both red anchors, I get the "balloons" in each case.

[e-mail]: does the attachment I made above work for you?
It features all the JavaScript pasted in-line.

We've had some trouble recently in loading external JS files;
see bug 118404. That is now fixed, however. So I'm wondering also,
what build date do you have? 

Comment 4

[Johnny Stenback (:jst)]

WORKSFORME too, reporter, please reopen and supply a testcase that shows the
problem if the problem still exists.

Comment 5

[Prashant Desale]

worksfor me too. verified.

Comment 6

[Roumen Petrov]

Attachment: not fixed, not work for me

document.getElementById(...) return null for images on Gecko 0.9.9 WinME.
Please find attached file with simple html test.

Note:
document.IMGNAME, document['IMGNAME] and document.images['IMGNAME'] work fine -
this is work around for javascripts.

Comment 7

[Fabian Guisset]

[e-mail], getElementById() only finds elements with the "id"
attribute, not the "name" attribute.

Comment 8

[Roumen Petrov]

exact: document.getElementById must return null if id attribute isn`t specified
and image name attribute is obsolete. But for backward compatibility
getElementById might return a value like document.IMGNAME, document['IMGNAME']
or document.images['IMGNAME'].

Comment 9

[Christopher Aillon (sabbatical, not receiving bugmail)]

[e-mail], sorry but getElementById() is not backward
compatible.  It is for DOM capable browsers only.  If you need to support older
browsers then you will need to have multiple codepaths.  We will not be changing
the behavior of getElementById as you suggest.