SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape 7 not finding document.layers

    I've tried to look for document.layers in Netscape 7 and couldn't get it... Here's the script:
    Code:
    var NS6 = (document.layers) ? 1 : 0;
    var IE = (document.all) ? 1 : 0;
    function bananas() {
    	if (IE)
    		alert("this is IE");
    	else if (NS6)
    		alert("this is NS6");
    	else
    		alert("bananas");
    }
    I'm only concerned with IE 5.5 or higher, and Netscape 6.2 or higher.
    In IE, it gives me the right stuff. But in Netscape 7 it gives me "bananas" (I haven't tried in Netscape 6.2)
    Why doesn't it work?

    TIA
    Claudia

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: Netscape 7 not finding document.layers

    Originally posted by Trilliann
    I've tried to look for document.layers in Netscape 7 and couldn't get it... Here's the script:
    Code:
    var NS6 = (document.layers) ? 1 : 0;
    var IE = (document.all) ? 1 : 0;
    function bananas() {
    	if (IE)
    		alert("this is IE");
    	else if (NS6)
    		alert("this is NS6");
    	else
    		alert("bananas");
    }
    I'm only concerned with IE 5.5 or higher, and Netscape 6.2 or higher.
    In IE, it gives me the right stuff. But in Netscape 7 it gives me "bananas" (I haven't tried in Netscape 6.2)
    Why doesn't it work?

    TIA
    Claudia
    Oh no here we go again! (Sorry but this question is asked on a weekly basis in different forms).

    Short answer: document.all and document.layers are DINOSAURS. document.layers only works in netscape 4, document.all only works (well) in IE4. document.all is kept for legacy apps in IE5/6 but do not use it. use document.getElementById (the standards-based way to get elements in javascript) to reference your tags. Here's an example, and a better working JS detector:

    Code:
    <script language="javascript" type="text/javascript">
    function sniffTypes() {
      //get IE4
      if(document.all && !document.getElementById) {
        return "IE4";
      }
      //get NS4
      else if (document.layers) {
        return "NS4";
       }
       //get all other browsers (opera, NS6+, IE5+, even   
       //Konqueror!)
       else if (document.getElementById) {
       return "standards";
       }
    }
    //use the previous function like this:
    var getObjectModel = sniffTypes();
    if (getObjectModel == "IE4") {
      alert("You are using Internet Explorer 4.0.");
    }
    else if(getObjectModel == "NS4") {
      alert("You are using Netscape 4.x.");
    }
    else if(getObjectModel == "standards") {
      alert("You are using a browser that supports standards.\nGood for you!");
    }
    </script>
    Hope this helps!

    --Vinnie

  3. #3
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Vinnie. I searched for it in the Forums but didn't find it.
    But let me explain what the problem is: I want to loop through all the elements in the page and change the color of some elements that match a criteria. In IE I create a collection = document.all and loop through it, works great. I don't know what to do with Netscape. How can I do it, then?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this:
    Code:
    <head>
    <script language="javascript" type="text/javascript">
    function changeNodes(criteria, newColor) {
     //set up collection of all child nodes in body of document
     var all = document.getElementById("theBody").childNodes;
     for (i = 0; i < all.length; i++) {
      //do your thing in this loop, in this case all elements
      // that meet the color criteria become the new color
      if (all[i].style.backgroundColor== criteria) {
          all[i].style.backgroundColor= newColor;
         }
      }
    }
    //use it like the commented example below
    //the example changes all blue elements to red.
    //<select name="changer" onchange="changeNodes('blue', 'red');">
    </script>
    </head>
    <body id="theBody">
    Hope this helps!

    --Vinnie
    Last edited by vgarcia; Dec 6, 2002 at 11:58.

  5. #5
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi vinnie... sorry for my ignorance, but do I have to set up "theBody" first?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by Trilliann
    Hi vinnie... sorry for my ignorance, but do I have to set up "theBody" first?
    "theBody" can be any string, it just has to be the ID for your <body> tag. So if your code is set up like this:
    Code:
    <body id="theBody">
    Then my function will work with no modification. However, if your body's ID has a different value then you also need to change it in your JavaScript.

    Also, you're not ignorant, I was once a newbie at Javascript too, and it really wasn't all that long ago!

    --Vinnie

  7. #7
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Vinnie.
    Now at least the script runs till the end. But it only find three child nodes (I only know that because I've set some "alerts" as it loops through them). Maybe what I need is children of one of these child nodes. I haven't even been able yet to identify which three nodes are those directly under "theBody".

    Which sends me to another question - how can I debug with Netscape? It doesn't give me any clue. It doesn't even tell me there was an error, it just stops running the script.
    Thanks again,
    Trillie

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by Trilliann
    Thanks, Vinnie.
    Now at least the script runs till the end. But it only find three child nodes (I only know that because I've set some "alerts" as it loops through them). Maybe what I need is children of one of these child nodes. I haven't even been able yet to identify which three nodes are those directly under "theBody".

    True, I forgot about that! Let's try to modify our function to get the "grandchild" nodes. Recursion is fun!
    Code:
    <head>
    <script language="javascript" type="text/javascript">
    function changeNodes(criteria, newColor, elem) {
     //set up collection of all child nodes in body of document
     var all = document.getElementById(elem).childNodes;
     for (i = 0; i < all.length; i++) {
      //do your thing in this loop, in this case all elements
      // that meet the color criteria become the new color
      if (all[i].style.backgroundColor== criteria) {
          all[i].style.backgroundColor= newColor;
         }
      //here's where the recursion comes in. since we saw the
      //first child nodes, this will get the active node's child
      //nodes and so on and so forth until all nodes have been
      //checked. It may be a performance hit though.
      changeNodes(criteria, newColor, all[i]);
      }
    }
    //use it like the commented example below
    //the example changes all blue elements to red.
    //<select name="changer" onchange="changeNodes('blue', 'red', 'theBody');">
    </script>
    </head>
    <body id="theBody">
    Now you have an extra parameter to pass in, the starting element. In this case it starts with the body of the document so it should get everything.
    Which sends me to another question - how can I debug with Netscape? It doesn't give me any clue. It doesn't even tell me there was an error, it just stops running the script.
    Thanks again,
    Trillie
    I know Mozilla (http://www.mozilla.org/) has a built-in Javascript debugger known as Venkman. Netscape is based on Mozilla so I think it's in there too. Go to Tools -> Web Development -> Javascript Debugger in Mozilla (may also be there in Netscape).

    Hope this helps!

    --Vinnie

  9. #9
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! This seems to work:
    Code:
    function resetStyles(elem) {
       //set up collection of all child nodes in body of document
       var all = document.getElementById(elem).childNodes;
    
       for (i = 0; i < all.length; i++) {
          // do stuff
       }
    
       // some elements had id undefined
       // those were elements that didn't matter to me anyway, so I will ignore them
       thisId = all[i].id;
       if (thisId)
          resetStyles(thisId);
    }
    I'm still testing it.

    So, I see a JavaScript Console in Netscape... would be just great if I could actually debug there, but I don't see how to do it. At least I get the error messages!

    Thanks vinnie, that was very helpful

  10. #10
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: Netscape 7 not finding document.layers

    Originally posted by vgarcia
    Oh no here we go again! ...
    And again I ask; isn't the best method to get the browser version simply to examine navigator.appVersion?
    I mean, if the browser is IE4, then document.all && !document.getElementById is true, but just because document.all && !document.getElementById is true, the browser isn't necessarily IE4 (bad example, but I think you get my point...)

    An engineer, a physicist, and a mathematician were on a train heading north, and had just crossed the border into Scotland.
    The engineer looked out of the window and said "Look! Scottish sheep are black!"
    The physicist said, "No, no. Some Scottish sheep are black."
    The mathematician looked irritated. "There is at least one field, containing at least one sheep, of which at least one side is black."

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nice observation jofa. In my first example I was just showing everyone how to find the various object models to use depending on browser. There are also things you don't want to use navigator.appVersion for, such as various browsers that use document.getElementById (does anybody even know what version Konqueror is up to compared to IE/Netscape?). For a strict IE/Netscape comparison though, navigator.appVersion is the simplest way to get to it, although then you have to deal with Opera users spoofing user-agent headers.

    --Vinnie

  12. #12
    SitePoint Enthusiast Trilliann's Avatar
    Join Date
    Apr 2002
    Location
    California
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There was something weird with that method. It looked like it was looping at a specific point, even though it doesn't make sense. Anyway, I got another one from blufive that works much better (and I don't even have to do the recursive thingie):
    object.getElementsByTagName("*") or object.getElementsByTagName("div").

    Thanks all,
    Claudia

  13. #13
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyway, I got another one from blufive
    Hey, cool, I did that without typing anything. I have psychic powers!

    (Oh, you mean in another thread. Damn.)

    vgarcia, jofa:
    navigator.appversion isn't really the best for browser sniffing. If you really insist on using JS browser sniffing, stick to navigator.userAgent (which may be what you meant anyway), but be prepared for a long haul. This article gives a good rundown of the pros and cons, together with some alternatives.
    So, I see a JavaScript Console in Netscape... would be just great if I could actually debug there, but I don't see how to do it. At least I get the error messages!
    Mozilla (and, I suspect, Netscape 7) has a full-blown javascript debugger, though you have to ask for it when installing. If it's installed, it'll be under Tools->Web Development. Be warned, however, it's not exactly an easy-to-use beginner's tool.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by blufive
    vgarcia, jofa:
    navigator.appversion isn't really the best for browser sniffing. If you really insist on using JS browser sniffing, stick to navigator.userAgent (which may be what you meant anyway), but be prepared for a long haul. This article gives a good rundown of the pros and cons, together with some alternatives.
    [/B]
    I try to avoid browser detection as much as possible. If I need to do it on the client-side using JS it's usually because of DHTML and object model differences, so I detect by document.layers || document.all || document.getElementById.

    --Vinnie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •