How to create a custom event listener for Respond.js

Question

I'm using Respond.js to ensure bootstrap 3 compatibility for one of my projects in IE8.

I'm loading a large CSS file with respond.proxy.js. After the CSS has been loaded and ripped by Respond, I'd have to initialize some jQuery Plugins that rely on that CSS.

I'd like to be able to do something like jQuery does with $(document).ready().

Is it possible to create a custom event listener eg. $(respond).finished(...) that gets called after Respond has finished it's work? I need to initialize those plugins in different scripts and files.

Answer 1

Since respond.js doesn't trigger any events or provide any way of applying a callback function, your only option is to modify respond.js to have it trigger an event.

I suggest modifying this line:

https://github.com/scottjehl/Respond/blob/master/src/respond.js#L298

if (requestQueue.length) {
    var thisRequest = requestQueue.shift();

    ajax(thisRequest.href, function (styles) {
        translate(styles, thisRequest.href, thisRequest.media);
        parsedSheets[thisRequest.href] = true;

        // by wrapping recursive function call in setTimeout
        // we prevent "Stack overflow" error in IE7
        w.setTimeout(function () {
            makeRequests();
        }, 0);
    });
}/* from here on was added*/ else {
    var event = new Event("respondFinished");
    document.dispatchEvent(event);
}

Now you can add an event listener to the document in the scripts that need it.

if (window.respond.mediaQueriesSupported) {
    doSomething();
} else {
    $(document).on("respondFinished", doSomething);
}

You'll want to add this event handler as soon as possible, preferably before document ready to ensure that the event gets bound before respond.js finishes.