CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8css-selectors
Mohammad
Mohammad

Reputation: 7418

window.parent jQuery selector not working in IE8

This code below works fine

$('html').bind('mousewheel', function(event, delta) {
    window.parent.scrollBy(-120 * delta,0);
    return false;
});

but this one doesn't, can anyone tell me why. I'd love to know.

$(window.parent).bind('mousewheel', function(event, delta) {
    window.parent.scrollBy(-120 * delta,0);
    return false;
});

I'd like to clarify that the window selector doesn't work in this case either.

Upvotes: 0

Views: 3455

Answers (1)

bobince
bobince

Reputation: 536389

The problem may be that jQuery's event handler wrapper must use window.event to retrieve the current event in IE. If you set a handler from window A on an event in window B, the script in window A will be looking at window A's window.event, whilst the event is actually occurring on window B.

But there may be more issues than that, too. Cross-window/frame scripting is fraught with difficulties and jQuery is not particularly designed to work around them. To make jQuery work properly cross-frame you will generally need an instance of jQuery in both windows, and you should only use the corresponding instance of jQuery ($) to interact with each window.

eta re comment:

OK, having looked into mousewheel further, I don't know how your code can be working in Firefox (it certainly doesn't for me). Firefox doesn't support mousewheel events at all; instead it supports DOMMouseScroll events. Also for the other browsers that support mousewheel, it should be bound to a DOM Node rather than the window. So I guess what you're looking for is:

if ('MouseScrollEvent' in window) {
    $(document).bind('DOMMouseScroll', function(event) {
        return scroll(event.detail*-40);
    });
} else {
    $(document).bind('mousewheel', function(event) {
        return scroll(event.wheelDelta);
    });
}

function scroll(d) {
    window.scrollBy(-d, 0);
    return false;
};

(However in WebKit this will stop scrolling when the mouse moves out of the horizontal area corresponding to the viewport width. You may prefer to bind the events to the wider element like the div, if it fills the browser.)

Upvotes: 1

Related Questions