jQuery Browser Detection Doesnt Seem To Be Working

Question

Due to IE's inability to fade transparent PNG's I have decided to change my fucntion to simply show PNG's if the user is using IE but to fade them if they are using any other browser. The function below works fine in IE and does what i expect it to but in any other browser i.e. Firefox, Safari it doesnt do anything, am i missing something or do I have a syntax error?

    $('#content2 a').click(function(){

 if($.browser.msie){

     var toLoad = $(this).attr('href')+' #content';
     $('#content').show(loadContent);

     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
     function loadContent() {
      $('#content').load(toLoad,'',showNewContent())
     }
     function showNewContent() {
      $('#content').show();
     }

     return false;

 }else{

     var toLoad = $(this).attr('href')+' #content';
     $('#content').fadeOut('slow',loadContent);
     $('#load').remove();
     $('#wrapper').append('<span id="load">LOADING...</span>');
     $('#load').fadeIn('slow');
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
     function loadContent() {
      $('#content').load(toLoad,'',showNewContent())
     }
     function showNewContent() {
      $('#content').fadeIn('slow',hideLoader());
     }
     function hideLoader() {
      $('#load').fadeOut('slow');
     }
     return false;

 };

});

Answer 1

Maybe you should add the ';' at the end of the line:

$('#content').load(toLoad,'',showNewContent());

in both definitions of loadContent().

Answer 2

Most of your callbacks are written like this:

$('#content').load(toLoad,'',showNewContent())

Which says to call showNewContent, and pass its return value to jQuery.

You mean:

$('#content').load(toLoad, '', showNewContent);

But you also have a potential problem here:

}else{
    ...
    $('#content').fadeOut('slow',loadContent);
    ...
    function loadContent() {

It's not actually legal to put a function statement inside an else or any other block than another function. This is because the magic of the function statement that allows you to use a function in code above where you define it can only work if the function definition is fixed before the start of the function is run. That can't happen if the definition is inside a conditional block.

As bleeding usual with JavaScript, instead of telling you about the error, browsers will let you get away with it but with inconsistent and weird results. Here's an obviously paradoxical test case:

x();
var isgood= Math.random()*2>=1;

if (isgood) {
    function x() {
        alert('Good!');
    }
} else {
    function x() {
        alert('Bad!');
    }
}

This example code tries to call a function that's dependent on the result of a coin toss before that event has actually taken place. It should be a syntax error just to say this, but every browser allows it. Mozilla at least leaves x holding undefined until a function statement is reached so the initial x() will cause an error. In IE, Webkit and Opera, however, the second function statement ‘wins’ and it always alerts “Bad!”. Bad browsers!

Avoid this issue by using inline function expressions instead of function statements any time you need a function whose definition changes. Although in this case, you could get around the fading problem by just using a speed of 0 for IE to make it callback instantly, which makes the whole thing much simpler:

$('#content2 a').click(function() {
    var speed= $.browser.msie? 0 : 'slow';
    $('#content').fadeOut(speed, function() {
        $('#content').load($(this).attr('href')+' #content', '', function() {
            $('#content').fadeIn(speed);
        });
    });
});