IF condition to enable a script property (jquery) for IE7 users?

Question

To condition something in jquery for IE7, I read here it's best to use this in the <HEAD>:

<!--[if IE 7]>         <html class="ie7"> <![endif]-->

Now, out of the following code,

I want transition: "elastic", to be there only if it's ie7:

$(document).ready(function() {
    $(".cbox").click(function(e) {
        e.preventDefault();
        $.colorbox({
            transition: "elastic",
            overlayClose: false,
            opacity: 0.8,
        });
        return false
    })
});

So I tried doing something like:

$(document).ready(function() {
    $(".cbox").click(function(e) {
        e.preventDefault();
        $.colorbox({
            if ($('html').hasClass('ie7') {transition: "elastic",}
            overlayClose: false,
            opacity: 0.8,
        });
        return false
    })
});

But it's not the way to do this I guess... how should this be done?

score 2 · Answer 1 · answered Sep 25 '14 at 12:33

2

If the html element definitely has that class on it, the proper way to structure your options for the colorbox would be something like:

$(document).ready(function() {
    $(".cbox").click(function(e) {
        e.preventDefault();
        var opt = {
            overlayClose: false,
            opacity: 0.8
        };
        if ($('html').hasClass('ie7'))        
            opt.transition = 'elastic';
        $.colorbox(opt);
        return false
    });
});

answered Sep 25 '14 at 12:33

James Thorpe

31,411
5
72
93

I'm seeing a syntax error with Dreamweaver, maybe something is missing? – rockyraw Sep 25 '14 at 12:36
sorry, had missed a bracket. Fixed it (and added a missing semicolon that most browsers would ignore) – James Thorpe Sep 25 '14 at 12:37

Patrick Evans · Accepted Answer · 2014-09-25T12:45:09.137

2

You can use a ternary operator to dynamically set the transition

transition: $("html").hasClass("ie7") ? "elastic":"none",

Note according to the documentation the default value is elastic so really you do not need to set a transition at all, unless you want non-ie7 browsers to have some other transition type.

edited Sep 25 '14 at 12:45

answered Sep 25 '14 at 12:37

Patrick Evans

41,991
6
74
87

+1, I forgot about ternary :) one note of caution though - it assumes `""` is the default value, rather than it not being specified at all – James Thorpe Sep 25 '14 at 12:39
Yea wasnt sure of what the actual default value for transition was so just left it blank, edited it to be `none` – Patrick Evans Sep 25 '14 at 12:39
Thanks! this is working good as well. the elastic was just a quick example :) – rockyraw Sep 25 '14 at 12:52

Pradip R. · Answer 3 · 2014-09-25T12:40:23.053

0

Very straight forward answer to this, just read carefully this link : jQuery.browser

jQuery.browser property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin.

The best practice when you do have jQuery 1.9 or earlier version is that you should use this approach for specific browser detection.

edited Sep 25 '14 at 12:40

answered Sep 25 '14 at 12:33

Pradip R.

450
1
14
31

2

Note that [jQuery.browser](http://api.jquery.com/jquery.browser/) was deprecated and then removed in jQuery 1.9 – James Thorpe Sep 25 '14 at 12:34
@James Thorpe: Agreed! but this feature is available through the jQuery.migrate plugin. – Pradip R. Sep 25 '14 at 12:35

IF condition to enable a script property (jquery) for IE7 users?

3 Answers3