Repositionner le menu déroulant si près du bord de la fenêtre

J’utilise le code suivant pour repositionner mes menus déroulants s’ils sortent de la zone de la fenêtre du navigateur. Cependant, cela ne fonctionne pas dans Internet Explorer 7 et 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");} }); }); 

La propriété window.pageXOffset n’est pas prise en charge dans IE (au moins 7 et 8). Essayez $(window).offset().left place:

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

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

J’utilise ce 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 } 

N’a eu aucun problème dans IE. Le code suppose un positionnement absolu.