www.webdeveloper.com
Results 1 to 6 of 6

Thread: Simple browser detect then change visibility of a layer

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

    Simple browser detect then change visibility of a layer

    Hi all,

    I am using CSS text-shadow but of course IE doesn't like it. I've looked into some methods for achieving the same effect in IE, but it's not at all the same so I've opted for another method...

    I'm going to have two layers. In layer1, it will be standard text, shadowed with CSS. I then screenshotted that and will use the resulting jpeg for layer2.

    I was then planning to find a script that:

    1. Detects if browser is IE
    2. If IE, layer2 is visible, layer1 is invisible
    3. If not IE, layer1 is visible, layer2 is invisible

    The problem is that I can't find a simple script to detect if the browser's IE or not. I can find loads of scripts that check what version of IE someone's using. The version isn't important!

    I'll have another look tomorrow (bed time now) but can you point me in the right direction?

    thanks guys

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Simple... very simple; but maybe not the best.

    Code:
    <div id="ieonly" style="display:none;">You Fail</div>
    <div id="others" style="display:none;">very good</div>
    <script language="javascript">
    which="others";
    if(document.all)
     which="ieonly";
    document.getElementById(which).style.display="block";
    </script>
    Otherwise, read up on attributes of the bowser available to JavaScript:

    http://www.w3schools.com/js/js_browser.asp
    Colin Fiat Simple Solutions To Complex Problems

  3. #3
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Additional:

    IE9 does not support document.all but there is a workaround. However, MS specify that
    below is the best way to detect what browser is being used:

    if (window.navigator.appName == "Microsoft Internet Explorer")

    But this requires another check for version number.

    IE9 will let you emulate IE7 with this:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

    However, all this technicality is probably pointless because the aim of the exercise is to
    determine if the browser is an IE style. If IE9 is HTML5 compliant and does not support
    document.all, then that's all you need; probably. Since IE9 does not support document.all
    you have been able to determine if the browser is complaint to standards.

    http://msdn.microsoft.com/en-us/libr...8VS.85%29.aspx
    Colin Fiat Simple Solutions To Complex Problems

  4. #4
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Ok thanks guys. I've tried this

    Code:
    <script type="text/javascript">
    if (window.navigator.appName == "Microsoft Internet Explorer") { 
    document.getElementById(showie).style.display="block"; 
    document.getElementById(showother).style.display="none"; 
    }
    </script> 
    <style type="text/css">
    #showie { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    }
    #showother { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 400px; 
    height: 400px; 
    background-color: red; 
    }
    </style>
    But it doesn't work.

    Theoretically this should work instead?... but it doesn't

    Code:
    <style type="text/css">
    <!--[if IE]>
    #showie { 
    visibility: visible; 
    }
    #showother { 
    visibility: hidden; 
    }
    <![endif]-->
    #showie { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    }
    #showother { 
    visibility: visible; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 400px; 
    height: 400px; 
    background-color: red; 
    }
    </style>
    I'm going to carry on trying to cram javascript into my head and hopefully I'll overcome this bloody thing in time something so simple...

  5. #5
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    I've got it. I can't use...

    Code:
    <!--[if IE]>...<![endif]-->
    ...inside a style sheet.

    So I resolved it by setting #showother to z-index: 0 and #showie to z-index: 1 and then:

    Code:
    <!--[if IE]>
    <div id="showie">Internet Explorer</div>
    <![endif]-->
    <div id="showother">Other browser........</div>
    booya

  6. #6
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Yes, that's it. I was most of the way through my explanation below when you posted
    your discovery. Here it is anyway.

    Ah, I see what you want. You've almost got it but have the implementation wrong.

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
    <![endif]-->

    The above is the most common way to use the conditional HTML.

    Your first example attempts to hide something which is already hidden; or actually does
    not even have a display method. Regardless of your efforts the declarations are still
    there.

    The second example attempts to execute some conditional HTML inside a Style
    declaration. This won't work because the conditional HTML is not executed inside the
    style /style tags.

    Try this (I mean try because I could not be bothered to drag out different browsers to
    try myself.

    Code:
    <!--[if IE]>
    <style type="text/css">
    #ieStyle { height:200px; 
    }
    </style>
    <![endif]-->
    Colin Fiat Simple Solutions To Complex Problems

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles