jQuery 'resize' event handler behaves differently in IE8 (possibly other vers.) than Firefox.

[MrAnderson69UK]

Hi,

This isn't a bug per se, but an inconsistency between browsers.

When handling the 'resize' event in non IE browsers to get the height of the element - the reason for using this library, I could write

var resizeNavArrow = function () {
    var anchor = $(this).find("a");
    var newButtonHeight = parseInt(anchor.innerHeight(), 10);
    .
    .
    .
}

In IE8, I noticed $(this) wasn't working and my newButtonHeight was NaN, so modified the function with the 'el' parameter. In testing, 'el' was an MSObject for an event - so I guess I can change it to 'evt'. I could access the element I wanted via srcElement.

var resizeNavArrow = function (el) {
    var anchor = null;
    if (utility.IsIEOlderOrEqualTo(8)) {
        anchor = $(el.srcElement).find("a");
    } else {
        anchor = $(this).find("a");
    }
    var newButtonHeight = parseInt(anchor.innerHeight(), 10);
    .
    .
    .
}

But back in Firefox, 'el' was 'scroll' - which I guess is the source element of the event you're handling - and 'srcElement' isn't a method of 'scroll' hence the IE logic.

So this is good as I can now support IE and non-IE browser. But it would be good if the element the 'resize' event handler was registered against was passed to the handler.

I have some

elements that are bound to the 'resize' event hanlder i.e.

var navButtons = $(".nav-wizard li");
navButtons.each(function (i) {
    if (i < navButtons.length - 1) {
        var li = $(this);
        li.resize(resizeNavArrow);
        .
        .
        .

If I try binding to the event handler passing params, it simply calls the function during the binding e.g. li.resize(resizeNavArrow(li));

Regards Mr A