Search code examples
javascriptjquerypluginsdetection

jquery feature detection - how can I implement this?


I need to prevent IE from recognizing the fadeIn/Out effect in this plugin. How can I add a line of jquery feature detection code to this:

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;



$("nav#footer").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.show().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                    });
                    $("nav#footer a").removeClass("current");
                    $("nav#footer a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

I had some code like

var FADE_TIME = 500; if(!($.support.opacity)) { FADE_TIME = 0}

$('element').fadeOut(FADE_TIME)

Where would I add this in the code? can someone help me get this working for real?please!!


Solution

  • Can't figure out why somebody didn't just edit the code and answer the question. All you needed to do was create a new variable with it's value determined by the $.support.Opacity property then reference that in the fade in/out sections of the code.

    $(function() {
    
    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el,
        // new fadeTime property.
        fadeTime = $.support.opacity ? 500 : 0;
    
    
    
    $("nav#footer").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
    
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(fadeTime, function() {
                    $mainContent.show().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(fadeTime, function() {
                        });
                        $("nav#footer a").removeClass("current");
                        $("nav#footer a[href="+newHash+"]").addClass("current");
                    });
                });
        };
    
    });
    
    $(window).trigger('hashchange');
    
    });