Browser compatibility help

@TonyC23Jul 01.2004

Howdy folks,

I’m new to dhtml and would greatly appreciate any advice on coding for browser compatibility. I am running a page that uses divs, css & js to show and hide layers. It works fine in ie6 but not at all in ns7

Here’s the js code:
<!–
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4)
{
if (navigator.appName == “Netscape”)
{
isNav = true
}
else
{
isIE = true
}
}

// Show & Hide layers
// Showlayer function
function showLayer(layerName)
{
if (isNav)
{
document.layers[layerName].visibility = ‘visible’
}
else
{
document.all[layerName].style.visibility = ‘visible’
}
}

// Hidelayer function
function hideLayer(layerName)
{
if (isNav)
{
document.layers[layerName].visibility = ‘hidden’
}
else
{
document.all[layerName].style.visibility = ‘hidden’
}
}
//–>

Can anyone tell me why this doesn’t work in netscape?

Thanxalot

TonyC

to post a comment

JavaScript

10 Comments(s) _↴

@KorJul 01.2004 — #the code must be an old one, for NS4 vs IE4, thus the browser detector is not accurate. And it is not a correct code anyway. Better use a detector based on methods rather than navigator name or version and use [b]id[/b] instead of [b]name[/b]:

[code=php]
 function showLayer(layerId){
 if(document.getElementById){//for IE5+,NS6+,Moz and compatible
 document.getElementById(layerId).style.visibility='visible';
 }
 else if(document.all){//for IE4
 document.all[layerId].style.visibility='visible';
 }
 else if(document.layers){for NS4.x
 document.layers[layerId]='show';
 }
 }
 
 function hideLayer(layerId){
 if(document.getElementById){
 document.getElementById(layerId).style.visibility='hidden';
 }
 else if(document.all){
 document.all[layerId].style.visibility='hidden';
 }
 else if(document.layers){
 document.layers[layerId]='hide';
 }
 }
 [/code]

@KorJul 01.2004 — #I omitted a comment //. the correct is:

[code=php]
 function showLayer(layerId){ 
 if(document.getElementById){//for IE5+,NS6+,Moz and compatible 
 document.getElementById(layerId).style.visibility='visible'; 
 } 
 else if(document.all){//for IE4 
 document.all[layerId].style.visibility='visible'; 
 } 
 else if(document.layers){//for NS4.x 
 document.layers[layerId]='show'; 
 } 
 } 
 
 function hideLayer(layerId){ 
 if(document.getElementById){ 
 document.getElementById(layerId).style.visibility='hidden'; 
 } 
 else if(document.all){ 
 document.all[layerId].style.visibility='hidden'; 
 } 
 else if(document.layers){ 
 document.layers[layerId]='hide'; 
 } 
 }
 [/code]

@KorJul 01.2004 — #i must be tired, I saw some mistakes again I omiited visibility for NS4

[code=php]
 function showLayer(layerId){ 

 if(document.getElementById){//for IE5+,NS6+,Moz and compatible 
 document.getElementById(layerId).style.visibility ='visible'; 

 } 

 else if(document.all){//for IE4 
 document.all[layerId].style.visibility ='visible'; 

 } 

 else if(document.layers){//for NS4.x 
 document.layers[layerId].visibility ='show'; 

 } 

 } 
 
 function hideLayer(layerId){ 

 if(document.getElementById){ 

 document.getElementById(layerId).style.visibility ='hidden'; 

 } 

 else if(document.all){ 

 document.all[layerId].style.visibility ='hidden'; 

 } 

 else if(document.layers){ 

 document.layers[layerId].visibility='hide'; 

 } 

 }
 [/code]

@TonyC23authorJul 01.2004 — #Thankyou very much KOR,

Your code works perfectly. I can see I need to do more reading.

yours gratefully,

TonyC

@JPnycJul 01.2004 — #Get rid of the sniffer altogether, and any statements with document.all in them. IE has supported the getElementByID() method for a couple of versions now. You only need the NS functions you have, for all browsers now.

@KorJul 01.2004 — #I did not know whitch is the purpose of the code. I tried to give him the most comprehensive solution. He may delete each [b]else if[/b] statement according to his needs.

@TheRealMVPAug 24.2004 — #?

Apparently, it's not just Netscape that's changed. A small example:

function changeText() {

document.all.div1.innerText="this is now some text!"

document.all.div2.innerHTML="<strong>bold text is now here!</strong>"

}

Can someone show how to do this for current IE (any alternate way) and Netscape 7?

Thanks!

@KorAug 25.2004 — #
Can someone show how to do this for current IE (any alternate way) and Netscape 7?
[/quote]

IE4 is the only one which uses document.all

IE5, IE5.5, IE6 use document.getElementById (or alternatively document.getElementByName) as object's reference.

innerText is a non standard method (non DOM compliant) and it is used only by IE.

innerHTML is a non standard method also but it is recognized (with small changes) also by Gecko and Mozilla browsers (NS6+, Moz)

Thus, your code should be

[code=php]
 function changeText() {
 document.getElementById('div1').innerHTML="this is now some text!"
 document.getElementById('div2').innerHTML="<strong>bold text is now here!</strong>"
 }
 [/code]

There is another modern cross-browser aproach, using DOM, with [b]createTextNode()[/b] and [b]appendChild()[/b] methods

[code=php]
 function changeText() {
 var newText= document.createTextNode('this is now some text!');
 var newHtml= document.createTextNode('<strong>bold text is now here!</strong>');
 document.getElementById('div1').appendChild(newText);
 document.getElementById('div2').appendChild(newHtml);
 }
 [/code]

you may also use other DOM methods such as [b]childNodes[][/b] and [b]nodeValue[/b]. Or [b]createElement()[/b] altogether with [b]createTextNode()[/b] and [b]appendChild()[/b] methods.

@TheRealMVPAug 25.2004 — #I don't suppose there is a nice "what's new" type of document - kind of "if you're used to doing this, now you can do this"?

BTW, IE appears to be backwards compatible - my 5+ versions all recognize my existing pages.

Now, a philosophical question:

if you were hiring for a developer position and the interview consisted of a dhtml (javascript and css) test, what would you hope to see?

@MikeFosterAug 25.2004 — #I don't suppose there is a nice "what's new" type of document - kind of "if you're used to doing this, now you can do this"?[/quote]

An older document but still a good starting point:

http://devedge.netscape.com/viewsource/2001/updating-dhtml-web-pages/

Also in #JavaScript _↴

highlight unhighlight link background?If checkbox checked, have more form fields appear.AJAX request() Question...

Success!

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

Tweet This

Browser compatibility help

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴