Reposition drop down menu if near edge of window

Question

I'm using the following code to reposition my drop down menus if they fall outside of the browser window area. However it does not work in Internet Explorer 7 and 8.

jQuery(document).ready(function(){
jQuery("#nav>ul>li").each(function() {
    pos = jQuery(this).offset();
    if(pos.left + 100 > jQuery(window).width()+window.pageXOffset-jQuery(this).width()) {
    jQuery(this).addClass("nav-shift");}
});
});

Answer 1

The window.pageXOffset property is not supported in IE (7 and 8, at least). Try $(window).offset().left instead:

jQuery(document).ready(function(){
    jQuery("#nav>ul>li").each(function() {
        pos = jQuery(this).offset();
        if(pos.left + 100 > jQuery(window).width()+jQuery(window).offset().left-jQuery(this).width()) {
        jQuery(this).addClass("nav-shift");}
    });
});

More readable, IMO:

jQuery(document).ready(function() {
    jQuery("#nav > ul > li").each(function() {
        var $this = jQuery(this),
            $win = jQuery(window);

        if ($this.offset().left + 100 > $win.width() + $win.offset().left - $this.width()) {
            $this.addClass("nav-shift");
        }
    });
});

Answer 2

I use this code:

var absoluteLeft   = $(this).offset().left;
var absoluteTop    = $(this).offset().top;
var absoluteRight  = absoluteLeft + $(this).outerWidth();
var absoluteBottom = absoluteTop + $(this).outerHeight();

var viewportRight  = $(window).width()  + $(window).scrollLeft(); // scroll left will take into account the position of the horizontal scrollbar
var viewportBottom = $(window).height() + $(window).scrollTop();  // scroll top will take into account the position of the vertical scrollbar

if (absoluteRight > viewportRight) {
    // do whatever to handle horizontal bleeding
}
if (absoluteBottom > viewportBottom) {
    // do whatever to handle vertical bleeding
}

Did not have any problems in IE. The code assumes absolute positioning.