1

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.

3
  • 1
    Well are you calling it before the elements are added to the page? It is like someone calling your name before you show up. Aug 25, 2015 at 13:21
  • oh wow. did not even consider that. Hold on. Aug 25, 2015 at 13:22
  • 2
    generally better to use feature detection instead of checking browser and version
    – charlietfl
    Aug 25, 2015 at 13:23

3 Answers 3

1

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;
}
1
  • Wow, haven't though of this. Applying a class on the whole body is way more easier and less of a pain when writing CSS. Thanks! Aug 25, 2015 at 14:21
1

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

1
  • @onTheInternet please check out my answer Aug 25, 2015 at 13:55
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.