CODEWITHSUNDEEP
jquerycssinternet-explorer
onTheInternet
onTheInternet

Reputation: 7253

conditional css statements for Internet explorer

I am developing a website that has a div with a background image that is has the css 

background-attachment:fixed;

This looks good in all browsers MINUS internet explorer. Implementing smooth scrolling via javascript isn't an option.

So I found a plugin that allows me to determine when IE 10 and 11 is being used. https://github.com/stowball/Layout-Engine

I tested this with the following code

    <script type="text/javascript">
        if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
            alert("using IE 11");
        }
    </script>

And got the following IE Image

So I know this is working. So I used this same concept to use Jquery to add an additional class.

CSS

  .grouppic{
      background-attachment:fixed;
  }

  .grouppicIEVersion{
      background-attachment:inherit !important;
  }

Javascript

<script type="text/javascript">
    if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
        $('#groupPicture').addClass("grouppicIEVersion");
    }
</script>

HTML

  <div class="w-section grouppic " id="groupPicture">
    <div class="w-container">
    </div>
   </div>

But this doesn't work. The class doesn't get added in internet explorer. I'm not sure if this is a jquery error or something with the plugin I'm using. Some help would be great.

Upvotes: 1

Views: 83

Answers (3)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

but you can easily find out using the css hack's then why to use the other pluggin to find out that

<style>
    @media all and (-ms-high-contrast:none)
     {
     .grouppicIEVersion{ background-attachment:inherit !important;  } /* IE10 */
     *::-ms-backdrop, .grouppicIEVersion{background-attachment:inherit !important;
  } /* IE11 */
     }
  </style>

here the reference link you can check out
Reference Link

Upvotes: 1

Curtis
Curtis

Reputation: 103348

As @Ivanka has stated this needs to be wrapped in a document ready function or else the DOM may not have loaded and therefore the #groupPicture element may not exist yet.

A further point I would make is to attach a class to the body and use this in your CSS instead. This means you attach the class once and then can apply browser overrides using CSS only from then on.

For example:

$(function(){
   if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
      $("body").addClass("msie11");
   }
});

Then the CSS can just be:

.grouppic{
    background-attachment:fixed;
}

.msie11 .grouppic{
    background-attachment:inherit !important;
}

Upvotes: 1

Ivanka Todorova
Ivanka Todorova

Reputation: 10219

Wrap it in $.ready():

$(document).ready(function() {
    if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
        $('#groupPicture').addClass("grouppicIEVersion");
    }
});

Probably when you want to add this class, the element #groupPicture is not available in the DOM yet.

Also check for errors in your console.

Upvotes: 0

Related Questions