0

Has anybody got any experience of getting Selectivizr to work with IE7/8 and RequireJS?

I've tried adding the conditional comments as per usual, I've had this working no problem before, I'm running off a localhost.

I think it has something to do with jQuery needing to be run before Selectivizr, something that RequireJS seems to complicate.

Any help would be great, cheers.

hcharge
  • 1,216
  • 2
  • 24
  • 43

2 Answers2

3

For some reason the yepnope method didn't work, it still would load selectivizr as the first script, even before modernizr, this must be something to do with the asynchronous way yepnope works.

The way I've solved this in my case is to add a conditional comment before my html tag

<!--[if (gte IE 6)&(lte IE 8)]><html class="lt-ie9"><![endif]-->

I've then got a separate "ie-tidy.js" which I call from require js. So my config looks something like this (this is trimmed down)

requirejs.config({

paths: {
    jquery: "../jquery-1.7.2.min",
    app: ".",
    selectivizr: '../selectivizr-min'
},
"shim": {
    "cookie": ["jquery"],
    "selectivizr": ["jquery"]
}
});
requirejs(['jquery', 'app/header', 'app/ie-tidy'], function ($) {
});

Then inside my ie-tidy.js I do the following (amongst other ie-specific scripts)

define(['jquery'], function ($) {
"use strict"

$(function() {
    if ($('html.lt-ie9').size()) {
           require(['jquery', 'selectivizr']);
        }
    });
});

This works exactly how I'd like it to, loading selectivizr after jQuery and applying the selectivizr classes as expected. Thanks for your help @Dzulqarnain

hcharge
  • 1,216
  • 2
  • 24
  • 43
0

According to the Selectivizr website you do need to specify one of the libraries defined in the table located on the front page.

You could always load Selectivizr using YepNope or something similar after jQuery has been defined.

Eg.

require.config({
    shim: {
        'yepnope' : {
            exports: 'yepnope'
        }
    },

    paths: {
        'jquery' : 'jquery-min',
        'yepnope' : 'yepnope-min'
    }
});

require(['jquery', 'yepnope'], function($){
    yepnope({
        load: ['iegt5!ielt9!selectivizr-min.js']
    });

    // do other stuff
});
Dzulqarnain Nasir
  • 2,150
  • 1
  • 19
  • 16
  • hmmm this seems like it should work, however it's still loading selectivizr before everything else, it's also giving it the property onload="null" – hcharge Aug 09 '12 at 13:09
  • I thought that was how it works? If you need it to load on DOM ready, you can use jQuery's .ready() method. – Dzulqarnain Nasir Aug 09 '12 at 15:00
  • i had wrapped it in a $(function() and it's still doing it, it definitely needs to be loaded after jQuery in the head, i think i'm close though, thanks for your help – hcharge Aug 09 '12 at 15:50
  • I see what you mean. You don't actually need to wrap the above code in anything. The above code will run once jQuery and YepNope is loaded. So by the time it runs the yepnope.load method, jQuery has already been defined. So Selectivizr will still be loaded **after** jQuery. – Dzulqarnain Nasir Aug 10 '12 at 07:57