SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide layer dependent on Browser

    Hi, I'm rather new to this so please excuse the naievety

    I'm using the scroll function with a layer containing a graphic that sits over the slider on the y axis. This works fine in IE but overhangs the lower scrollbar arrow in Netscape, Firefox and Opera, killing its functionality, so I'd like to hide it in these browsers.

    Could someone show me the best way to work a function that says (taking the layer ID as 'Bar')

    IF browser = IE
    THEN 'Bar' = visible

    or (better?)

    IF browser <> IE
    THEN 'Bar' = hidden

    And how should I allow this to behave in Safari?

    I've seen the topic touched on in http://www.sitepoint.com/forums/showthread.php?t=63973 but it's still not clear, so any help would be gratefully received.

    D

  2. #2
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any code?

    there are many ways it depends what you a running
    is it a static html page or dynamic? (php / asp)

    with static html pages you need to use the
    <!--[if IE]> <![endif]-->
    trick

    so make default invisible
    but inside the if IE you set it on.


    <!--[if !IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:hidden;position:absolute}
    </style>
    <![endif]-->

    <!--[if IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:visible;position:static}
    </style>
    <![endif]-->

    is one way.
    the if !IE .. is in a way redudant but I've added for illustration purposes
    (and sometimes I use myself to keep track)


  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks hgilbert - I can see how to set the default to hidden in the layer, but I couldn't grasp what was telling the layer to show for IE but be hidden for the other browsers. Could you re-clarify what else I have to do and where I do it?

    This is the code I have for the layer:

    <div id="Bar" style="position:absolute; width:15px; height:300px; z-index:2; left: 858px; top: 110px; visibility: visible;">
    <div align="center"><img src="Images/abc.jpg" width="9" height="360"></div></div>

    and this is the page code above:

    <html>
    <style type="text/css">
    <!--
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    -->
    </style>
    <link href="Stylesheets/Rollovers.css" rel="stylesheet" type="text/css">
    <head>
    <script language="JavaScript" type="text/javascript">
    <!--

    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <style type="text/css" media="screen">
    body {
    SCROLLBAR-FACE-COLOR: #D1D1D1;
    SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    SCROLLBAR-SHADOW-COLOR: #FFFFFF;
    SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
    SCROLLBAR-ARROW-COLOR: #FFFFFF;
    SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;
    background-image: url(Images/xyz.jpg);
    margin-top: 22px;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=2.0)" />
    <script language="JavaScript" type="text/javascript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    function P7_OpResizeFix(a) { //v1.1 by Project VII
    if(!window.opera){return;}if(!document.p7oprX){
    document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
    document.onmousemove=P7_OpResizeFix;
    }else{if(document.p7oprX){
    var k=document.p7oprX-window.innerHeight;
    var j=document.p7oprY - window.innerWidth;
    if(k>1 || j>1 || k<-1 || j<-1){
    document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
    location.reload();}}}
    }
    P7_OpResizeFix();
    //-->
    </script>

  4. #4
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (Still trying to work this out, no luck so far)

    I also need to give focus to my scrollbar when the page loads, so users can use their up and down arrows stright away - can anybody point me to how I can do this (or mimic clicking on the scrollbar which gives it focus). Thanks D

  5. #5
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!--[if !IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:hidden;position:absolute}
    </style>
    <![endif]-->

    <!--[if IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:visible;position:static}
    </style>
    <![endif]-->

    you are not using the correct syntax
    <!-- alone will not work
    Internet Explorer is extremely fussy at its own Include/Ignore syntax
    you have to use the specific markers


  6. #6
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry hgilbert, but I'm obviously still missing the point somehow

    Exactly where should I put

    <!--[if !IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:hidden;position:absolute}
    </style>
    <![endif]-->

    <!--[if IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:visible;position:static}
    </style>
    <![endif]-->

    in my code, as I can't get it to override the default (and the <!--[!if IE]> and <!--[if IE]> grey out everywhere I try them).

    And how do I write my layer ID 'Bar' here -

    #idLayer{visibility:hidden;position:absolute}

    is it as #Bar, #"Bar" or "Bar"?

  7. #7
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    greyed-out?

    are you using dreamweaver? or frontpage?

    my sincere opinion would be for you to revise HTML, CSS from ground-up.
    but avoid dreamweaver, frontpage altogether
    (ie use notepad instead or any *non*-highlighting editor)

    only then by acquaintance with raw HTML code will you be able to see what is happening

    I wish I knew of a good link for you - to revise xHTML and CSS proper.

    anyway

    #idLayer

    is a reference to

    <div id="idLayer">Some words here</div>


  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Text editors with syntax highlighting are only a problem when you become dependent on it.

    WYSIWYG editors create junk code. It's always better to code by hand or to hire a professional to do it for you.

    Why the conditional comment for browsers other than IE? Only IE/Win supports these conditional comments so, since that is telling IE that it is for browsers other than IE, which don't support conditional comments, all browsers will ignore it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .
    the if !IE .. is in a way redudant but I've added for illustration purposes
    (and sometimes I use myself to keep track)


  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right.

    I still don't see the point. Just remember how the cascade works.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is redudant, it is a mere highlight

    there is only one situation I know of
    where you need to explicitly use the !IE directive as well

    but I will keep you in suspense :P
    (while I track the code)


  12. #12
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternative to the Satay method.
    I can't find the original URL.
    Anyway this is the only example I've come across where !IE is used strategically.

    HTML Code:
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
               codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
               width="490" height="80">       
    <!--[if !IE]> 
    <-->
    <object data="flash.swf"
     width="490" height="80" type="application/x-shockwave-flash">
    <param name="movie" value="flash.swf" />
    <h1>no flash? I don't blame you!</h1>
       </object>
       <!-->
    <![endif]-->
      <!--[if IE]>
      <h1>no flash? I don't blame you!</h1>
      <![endif]-->
    </object>


  13. #13
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also make use of CSS and the star-html IE bug:
    HTML Code:
    #bar {display: none;} /* For good browsers */
    * html #bar {display: block;} /* For IE */
    This will hide the layer from all decent browsers, and IE, which for some reason activates CSS rules it finds even when the selector starts with "* html" (which is of course impossible because the <html> tag is never a descendant of another element), will show the layer.

    Just make sure the layer has the ID of "bar" and you're set.
    Check out my new vcard at RonnyO.com
    BlinkIP.com - The fastest way to your IP

  14. #14
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the official name for this "static html" programming?:

    <!--[if IE]>
    blah blah
    <![endif]-->

    Where can I find info on how to use it?
    Thanks

  15. #15
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  16. #16
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by effectwebmedia
    What is the official name for this "static html" programming?:

    <!--[if IE]>
    blah blah
    <![endif]-->

    Where can I find info on how to use it?
    Thanks
    IE Conditional Comment

    there is also a very interesting one I came the other day,
    works only with IE

    CSS Expressions

    I haven't read up on it yet, but apparently you can recreate stuff like min-width, max-width that is missing from IE


  17. #17
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* How can you search when you don't know what something is called? Sometimes my replies don't always make a lit of sense. Though really my reply did answer both questions this time.


    IE's proprietary CSS Expressions allows you to use JavaScript code to calculate the value of a CSS property. Since they are not valid CSS, IE's conditional comments are often used to hide the CSS Expressions from the CSS Validator.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  18. #18
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    often IE specific CSS will make a page fail validation
    this is where IE conditional commenting can help

    cursor: hand is one of those IE bugs


  19. #19
    Non-Member
    Join Date
    Dec 2004
    Location
    Cluj
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!--[if !IE]>
    <style type="text/css" media="all">
    #idLayer{visibility:hidden;position:absolute}
    </style>
    <![endif]-->

  20. #20
    SitePoint Member designcodes's Avatar
    Join Date
    May 2004
    Location
    Portsmouth, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Degas" can u show the page or url where you have this problem?


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
  •