Question

I have the following function – it works fine in Firefox:

How I can I get this to fire on body resize in IE??

function sizeColumnHeadings() {
    var $headingsTable = $('#TopicPostList_hdiv > table').eq(0),
        $rowsTable = $('#TopicPostList_div > table').eq(0);

    if ($headingsTable.length && $rowsTable.length) {
        $headingsTable.width($rowsTable.width());
    }
}




$(window).on('resize', function() {
        sizeColumnHeadings();
    }).trigger('resize');

Answer 1

If you use jquery, I found the following code works in IE, Firefox and Chrome.

var cnt = 0;
// this is called when the document finishes loading (similar to onLoad in the body tag)
$(function() {
    // this asssigns a callback function each time the browser is resized
    // it turns out that it is triggered multiple times on one resize
    $(window).resize(function() {
        cnt++;
        // this code simply displays the # of times the callback is triggered
        // I defined a <div id=show> in the body, and this updates its html.
        $('#show').html('cnt = ' + cnt);
    });
});

I recommend using jquery for this sort of problem, as it often takes care of the incompatibilities between different browser.