My site is /

I can't get JQuery to work on my site in IE9 down. It works fine in every other browser.

I've realised that it is the code below, which detects if it's a small screen (mobile), that stops it from working. If I remove this bit, everything works. I use this because I don't know how else I'd disable JS for mobiles, but keep it for desktop. Suggestions welcome.

$(document).ready(function(){
if(matchMedia('only screen and (max-width: 1023px)').matches)
{}
else { 

CODE HERE

    }
});

I have a feeling there's a bug or something that I'm not aware of. Please could someone put me out of my misery?

Thanks

My site is http://www.thetruenorth.co.uk/

I can't get JQuery to work on my site in IE9 down. It works fine in every other browser.

I've realised that it is the code below, which detects if it's a small screen (mobile), that stops it from working. If I remove this bit, everything works. I use this because I don't know how else I'd disable JS for mobiles, but keep it for desktop. Suggestions welcome.

$(document).ready(function(){
if(matchMedia('only screen and (max-width: 1023px)').matches)
{}
else { 

CODE HERE

    }
});

I have a feeling there's a bug or something that I'm not aware of. Please could someone put me out of my misery?

Thanks

• javascript
• jquery
• internet-explorer-9

6 Answers 6

Simple Debugging in IE9

1. Open IE9
2. Press F12 to open the Developer window
3. Click the 'Script' tab
4. Click 'Console' on the right pane
5. Attempt to load your page

You will see the following error:

SCRIPT5009: 'matchMedia' is undefined 
scripts.js, line 2 character 2

IE9 does not support the 'matchMedia' function and thus does not define it. Attempting to reference it in code stops the execution of the JavaScript completely at that point because it doesn't know what to do with a reference to something that is undefined.

What is going on

jQuery is loading on your page. You can confirm this by typing '$' into the text input line below the console output and press enter. The console will output some data about how $ is defined. This is a very good sign that jQuery loaded. It isn't conclusive in all situations, but for this one we are set.

What is happening is that your callback that is running onDomReady (via $(document).ready(...)), but it is erroring on the very first line. This error causes the rest of the callback to not execute.

Verifying Functionality Support

You can use caniuse.com to check to see what browsers support functionality (JS, CSS, etc). In this case: http://caniuse.com/matchmedia. You will note that IE10 is the first version that supports the matchMedia function. You can assume that in any earlier version you will not have matchMedia by default and referencing it will cause errors.

What You Can Do Now

On the caniuse.com site, at the top is a horizontal list titled "Resources". In this area you will generally find ways to patch browsers that do not support specific functionality.

In the case of matchMedia there is a link to a 'polyfill' which will use custom js to emulate the functionality of matchMedia. The url is: https://github.com/paulirish/matchMedia.js/.

Polyfills sometimes have limitations or catches to using them so be careful. It is also interesting to note that the matchMedia polyfill was written by Paul Irish, who is a very public figure for web technologies.

A Note On Conditional IE Includes

IE supports conditional comments, so you can include the polyfill defined above only for specific versions of IE; in your case anything < IE10. This is documented on the MDN here: http://msdn.microsoft.com/library/ms537512.aspx

<!--[if lte IE 10]]>
    <script src="polyfill.js"></script>
<![endif]-->

This is done so that we can use the browser's implementation when possible (generally faster and potentially with more functionality) and polyfill only when needed.

j08691 found the problem you have.

If you need matchMedia to work with IE9 and down, or Firefox 6 and down or Safari 5.1 and down you must shim it. Here is a polyfill for matchMedia which will let you use it on older browsers.

Note, this is not a jQuery issue, this issue is with matchMedia browser support

That's because matchMedia only works with IE10.

Ref: https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

You may be better off doing this with PHP. ie probably isn't able to run matchMedia correctly. I always keep things like that on the server side because that'll run the same for any client. If you're using PHP try get_browser(). Really easy to write a quick if statement. Check the examples if you need help.

Andrew Martinez's answer is fairly thorough and correct, and I personally found it to be very useful.

The markup for getting the matchMedia method in IE9 would look as follows

<![if lt IE 10]>
<script src="scripts/matchMedia.js"></script>
<![endif]>

I just check if the browser is Chrome or not and then add the matchMedia code from github, have a look below:

$(document).ready(function() {
    var isChrome = !!window.chrome;
    if (isChrome == true) {

        //do this for chrome

    } else if (isChrome != true) {

        //do this for all other browsers including IE

        //so copy and paste current matchMedia.js script form here https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js like below

        /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */

        window.matchMedia || (window.matchMedia = function() {
            "use strict";

            // For browsers that support matchMedium api such as IE 9 and webkit
            var styleMedia = (window.styleMedia || window.media);

            // For those that don't support matchMedium
            if (!styleMedia) {
                var style       = document.createElement('style'),
                    script      = document.getElementsByTagName('script')[0],
                    info        = null;

                style.type  = 'text/css';
                style.id    = 'matchmediajs-test';

                script.parentNode.insertBefore(style, script);

                // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
                info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

                styleMedia = {
                    matchMedium: function(media) {
                        var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

                        // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
                        if (style.styleSheet) {
                            style.styleSheet.cssText = text;
                        } else {
                            style.textContent = text;
                        }

                        // Test if media query is true or false
                        return info.width === '1px';
                    }
                };
            }

            return function(media) {
                return {
                    matches: styleMedia.matchMedium(media || 'all'),
                    media: media || 'all'
                };
            };
        }());

        //below you can add your own matchMedia code



    }

});