SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Ivanhoe's Avatar
    Join Date
    May 2001
    Location
    Ghent
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript that detects both browser and version

    Hi, I'm looking for a JavaScript that does not only detects wheather the visitor uses Netscape or IExplorer, but also which version.
    I would like to use one style.css for Netscape 6.x and IE 5 and up, and an alternative_style.css for Netscape 4.x.

    Is there anybody who can help me with this?
    "If I would have anything special to say, I would write it down below the row of asterisks."

    ****************************************

  2. #2
    SitePoint Member
    Join Date
    Feb 2001
    Location
    New Zealand
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I can give you a little bit of help here, you can detect the browser type and version, but i'm not sure how you would implement your style tags. Maybe others could lend some input to make this work.

    First of all you can detect browsers like this.

    document.all supported by IE4,5+
    document.layers supported by NS4+
    document.getElementById supported by NS6+
    document.images supported by NS3


    so working on this you can write:

    <Script>
    <!--

    if (document.all)
    style for IE
    else if (document.layers)
    style for NS4
    else if (document.getElementById)
    style for NS6
    else
    Default Style(includes NS3, IE3, NS2 etc)
    //-->
    </Script>

    it may be possible you could write your style tags using "document.write=", but I havent tried it yet. I hope this helps a little bit anyway.

  3. #3
    SitePoint Member
    Join Date
    Feb 2001
    Location
    New Zealand
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Been testing...

    Ok, this is a very simple example, but it does work in NS4, NS6 and IE5.

    <Script>
    <!--

    if (document.all) {
    document.write("<style type='text/css'>");

    document.write("a:link {color:#0000EE;text-decoration:none;}");

    document.write("A:visited {text-decoration: none;}");

    document.write("A:hover {text-decoration: underline;}");

    document.write("</style>");
    }
    if (document.layers) {
    document.write("<style type='text/css'>");

    document.write("A:link {color:#FF00EE;text-decoration: none;}");

    document.write("A:visited {text-decoration: none;}");

    document.write("A:hover {text-decoration: none;}");

    document.write("</style>");
    }
    if (document.getElementById) {
    document.write("<style type='text/css'>");

    document.write("A:link {color:#000000;text-decoration: none;}");

    document.write("A:visited {text-decoration: none;}");

    document.write("A:hover {text-decoration: underline;}");

    document.write("</style>");
    }
    else {
    document.write("<style type='text/css'>");

    document.write("A:link {text-decoration: none;}");

    document.write("A:visited {text-decoration: none;}");

    document.write("A:hover {text-decoration: underline;}");

    document.write("</style>");
    }
    //-->
    </Script>

    I hope this helps give you some idea and you can modify it to suit your needs. Good luck.


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
  •