Question

I wrote some jQuery code that works perfectly in Chrome/Safari, somewhat in Firefox, and hardly at all in IE8.

Why is this and how can I fix it?

Here’s my code in case you’re curious to see what might cause problems in IE or Firefox (you can see the code in action over at http://keepskatinbro.com/):

jQuery(".wrap").append("<img src='" + base + "/wp-content/themes/shaken-grid/images/ajax-loader.gif' id='ajax-loader' style='position: fixed; margin-left: 50%; left:-154px; top: 30%; display: none;' />", function() {
    jQuery("#ajax-loader").hide();
});

var $mainContent     = jQuery("#grid"),
    $ajaxSpinner     = jQuery("#ajax-loader"),
    $clicked_item,
    $target_open,
    $target_close,
    $element;

jQuery('a.ajax_trigger_title, a.more-link, a.ajax_trigger_thumbnail').live('click', function(event) {

    var $element = jQuery(this);
    if ( $element.hasClass('ajax_trigger_title') ) {
        var $post_box = $element.parent().parent();
        $clicked_item = jQuery( '#' + $post_box.attr('id') + ' .ajax_trigger_title' );
    }
    if ( $element.hasClass('ajax_trigger_thumbnail') ) {
        var $post_box = $element.parent().parent();
        $clicked_item = jQuery( '#' + $post_box.attr('id') + ' .ajax_trigger_thumbnail' );
    }
    if ( $element.hasClass('more-link') ) {
        var $post_box = $element.parent().parent().parent().parent();
        $clicked_item = jQuery( '#' + $post_box.attr('id') + ' .more-link' );
    }
    $target_open = jQuery( '#' + $post_box.attr('id') );

    var path = jQuery(this).attr('href').replace(base, '');
    jQuery.address.value(path); // changes the address deep link (the part after the /#/)

    // Default action (go to link) prevented for comment-related links (which use onclick attributes)
    event.preventDefault();

    return false;
});

jQuery('a.ajax_trigger_close').live('click', function(event) {

    var $element = jQuery(this);
    var $post_box = $element.parent();
    $clicked_item = jQuery( '#' + $element.attr('id') );
    $target_close = jQuery( '#' + $post_box.attr('id') );

    var path = jQuery(this).attr('href').replace(base, '');
    jQuery.address.value(path); // changes the address deep link (the part after the /#/)

    // Default action (go to link) prevented for comment-related links (which use onclick attributes)
    event.preventDefault();

    return false;
});

/*jQuery('a#home_link').live('click', function(event) {

    var $element = jQuery(this);
    var $post_box = $element.parent();
    $clicked_item = jQuery( '#' + $element.attr('id') );

    var path = jQuery(this).attr('href').replace(base, '');
    jQuery.address.value(path); // changes the address deep link (the part after the /#/)

    // Default action (go to link) prevented for comment-related links (which use onclick attributes)
    event.preventDefault();

    return false;
});*/

function dim_box($target_box, callback) {
    $target_box.animate({ opacity: "0.1" }, function() {
        if (callback) callback();
    });
}

function undim_box($target_box, callback) {
    $target_box.animate({ opacity: "1" }, function() {
        if (callback) callback();
    });
}

function show_loader(position, callback) {
    $ajaxSpinner.fadeIn(function() {
        if (callback) callback();
    });
}

function hide_loader(callback) {
    $ajaxSpinner.fadeOut(function() {
        if (callback) callback();
    });
}

function open_box($target_box, $target_path, $target_content, masonize_on_open, callback) {
    $target_box.find('.opened_view')
        .load(base + $target_path + ' ' + $target_content, function() {
            $target_box.find('.closed_view').addClass('hidden');
            $target_box.find('.thumbnail_wrapper').addClass('hidden');
            $target_box.find('.ajax_trigger_title').addClass('opened_post_title');
            $target_box.width(660);
            $target_box.append('<a class="ajax_trigger_close" id="close_' + $target_box.attr('id') + '" href="' + base + '/">Close</a>');
            if (masonize_on_open) masonize();
            if (callback) callback();
        });
}

function close_box($target_box, masonize_on_close, callback) {
    $target_box.find('.opened_view').html('');
    $target_box.width(310);
    $target_box.find('.closed_view').removeClass('hidden');
    $target_box.find('.thumbnail_wrapper').removeClass('hidden');
    $target_box.find('.ajax_trigger_title').removeClass('opened_post_title');
    $target_box.find('a.ajax_trigger_close').remove();
    if (masonize_on_close) masonize();
    if (callback) callback();
}

function scroll_to_content($target, duration, top_margin, callback) { //scrolls the page to the $target. $target can be a jQuery object or the number of pixels to scroll from the top.
    if ($target instanceof jQuery) {
        jQuery('body').animate({
            scrollTop: $target.offset().top - top_margin
        }, duration, function() {
            if (callback) callback();
        });
    }
    //three ways to check for an integer below:
    else if ($target === parseInt($target,10)) { //else if integer
    //else if ( (typeof($target) == 'number') && ($target.toString().indexOf('.') == -1) ) { //else if integer
    //else if ( !isNaN(parseInt($target)) ) { //else if integer
        jQuery('body').animate({
            scrollTop: $target
        }, duration, function() {
            if (callback) callback();
        });
    }
}

jQuery.address.change(function(event) {
    if (event.value != '/' && $clicked_item) {
        if ($target_close) { //if not first item to be opened then close previously opened item.
            show_loader(0, function() {
                open_box($target_open, event.value, '.entry-content', false, function() {
                    close_box($target_close, true);
                    hide_loader(function() {
                        scroll_to_content($target_open, 360, 20);
                    });
                    $target_close = $target_open;
                });
            });
        }
        else { //otherwise just open target item since it is the first item to be opened.
            show_loader(0, function() {
                open_box($target_open, event.value, '.entry-content', true, function() {
                    hide_loader(function() {
                        scroll_to_content($target_open, 360, 20);
                    });
                    $target_close = $target_open;
                });
            });
        }
    }
    else if ( event.value == '/' && $clicked_item ) {
        if ( $clicked_item.hasClass('ajax_trigger_close') && $clicked_item.attr('id') != 'home_link' ) {
            close_box($target_close, true);
            scroll_to_content(0, 360);
        }
    }
});

Also, I basically pasted the above code in JSLint and got the following, but i’m not sure about all the results. Some of the results are bogus as the results don’t encompass all of the javascript on my page in it’s entirety. Results:

Error:
Problem at line 21 character 23: '$post_box' is already defined.

var $post_box = $element.parent().parent();

Problem at line 25 character 23: '$post_box' is already defined.

var $post_box = $element.parent().parent().parent().parent();

Problem at line 28 character 34: '$post_box' used out of scope.

$target_open = jQuery( '#' + $post_box.attr('id') );

Problem at line 72 character 23: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 78 character 23: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 84 character 23: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 90 character 23: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 102 character 35: Expected '{' and instead saw 'masonize'.

if (masonize_on_open) masonize();

Problem at line 103 character 27: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 114 character 28: Expected '{' and instead saw 'masonize'.

if (masonize_on_close) masonize();

Problem at line 115 character 19: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 123 character 27: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 133 character 27: Expected '{' and instead saw 'callback'.

if (callback) callback();

Problem at line 139 character 21: Expected '!==' and instead saw '!='.

if (event.value != '/' && $clicked_item) {

Problem at line 162 character 27: Expected '===' and instead saw '=='.

else if ( event.value == '/' && $clicked_item ) {

Problem at line 163 character 87: Expected '!==' and instead saw '!='.

if ( $clicked_item.hasClass('ajax_trigger_close') && $clicked_item.attr('id...

Implied global: jQuery 2,3,6,7,13,15,39,41,119,138, base 2,30,46,96,101, masonize 102,114

I understand some things like it wanting me to add {} around callback, but why does it want !== instead of != in some cases, etc?

Answer 1

I solved two of three problems:

When animating the entire page (like scrolling to content), you must target both the html and body tags like so: $('html, body'). Previously i had only $(‘body’) so the code didn’t work in IE. Chrome needs ‘body’ while IE needs ‘html’ so in total you need to include both.

Also, comments are stripped from ajax calls so my flash embed, that uses special conditiontionals with html comments for IE, comes back with the wrong tags for IE. That is why no video is played in IE.

The last problem that still persists: firefox fails to re-organize the boxes on my site properly after opening a box. Who knows why!