Menu icon Foundation
Foundation 5 Orbit Slider IE8 issue

In IE8 showing error "Foundation.Stylesheet" is Null or not an object due to which orbit slider not loadin in IE8

I am rendering following JS files only for IE8
jquery.min.1.11.js
rem.min.js

and in my header i am using this code for IE8 media query support

<!--[if lt IE 9]>
<script src="</script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="</script" rel="nofollow">https://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="</script" rel="nofollow">https://html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="</script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Still facing errors in ie8

Foundation5 and ie8 issue

In IE8 showing error "Foundation.Stylesheet" is Null or not an object due to which orbit slider not loadin in IE8

I am rendering following JS files only for IE8
jquery.min.1.11.js
rem.min.js

and in my header i am using this code for IE8 media query support

<!--[if lt IE 9]>
<script src="</script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="</script" rel="nofollow">https://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="</script" rel="nofollow">https://html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="</script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

Still facing errors in ie8

Jonathan Devine over 5 years ago

Thanks Randy and Ben. Got me out of a tight spot!

Martin Eberle over 5 years ago

This fixes Foundation Dropdown (foundation.dropdown.js) in IE8 as well.

Brent Ransom over 5 years ago

This is not a great solution for the Orbit slider but to show one of your slides and not have it rotate you could do this
.example-orbit class {
height: what ever the slide height is;
overflow: hidden;
}
I use this as a work around to the site looks clean. If anyone has a way the get orbit to slide please let me know.

Ben Lamb over 5 years ago

Thanks Randy - great stuff.

In case it helps anyone else: it seems Randy's code needs to be executed after foundation.min.js has been loaded, but before calling $(document).foundation();. Preferably within IE8-and-less conditional comments, and preferably in an external file to reduce bloat for most users:

<script src="path/to/foundation.min.js"></script>
<!--[if lt IE 9]>
<script src="path/to/randys/code.js" type="text/javascript"></script>
<![endif]-->
<script>$(document).foundation();</script>

Randy Jones over 5 years ago

We got this working with the following javascript:

(function($) {
  if (!Foundation.stylesheet) {
    Foundation._style_element = $("<style></style>").appendTo("head")[0];
    Foundation.stylesheet = Foundation._style_element.styleSheet;
    if (Foundation.stylesheet) {
      Foundation.stylesheet.cssRules = {
        length: 0
      };
      Foundation.stylesheet.insertRule = function(rule, index) {
        var media, mediaMatch, mediaRegex, namespace, ruleMatch, ruleRegex;
        mediaRegex = /^\s*@media\s*(.*?)\s*\{\s*(.*?)\s*\}\s*$/;
        mediaMatch = mediaRegex.exec(rule);
        media = "";
        if (mediaMatch) {
          media = "@media " + mediaMatch[1] + " ";
          rule = mediaMatch[2];
        }
        ruleRegex = /^\s*(.*?)\s*\{\s*(.*?)\s*\}\s*$/;
        ruleMatch = ruleRegex.exec(rule);
        namespace = "" + media + ruleMatch[1];
        rule = ruleMatch[2];
        return this.addRule(namespace, rule);
      };
    } else if (window.console) {
      console.log("Could not fix Foundation css rules...");
    }
  }
})(jQuery);

Chris over 5 years ago

Sorry, I only wanted to say the IE 8 isn't supported oficially any more.

But it's a good idea to show the user a notification to update his browser.

Updating the browser ist useful for security reasons, too.

Daryl Knight over 5 years ago

That isn't a useful reply Chris. Whether IE8 is 'supported' or not, you should still be able to put some form of fix/hack/redirect in - the javascript error message is stopping us from being able to do that at the moment.

I don't support IE8 anymore either, but at least if someone views the page in that browser they should be able to see a browser update notification or something. The F5 Javascript error in the original post prevents that.

Chris over 5 years ago

Foundation 5 doesn't support IE 8.