CODEWITHSUNDEEP
jqueryinternet-explorer-8internet-explorer-7drop-down-menuoffset
GhostPool
GhostPool

Reputation: 173

Reposition drop down menu if near edge of window

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");}
    });
});

Upvotes: 4

Views: 3412

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272396

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.

Upvotes: 3

jensgram
jensgram

Reputation: 31518

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");
        }
    });
});

Upvotes: 6

Related Questions