Détection est div hors de l'écran

Question

J'ai codé le menu déroulant via javascript (w/jQuery) et CSS. Le menu déroulant fonctionne bien mais si le menu déroulant situé au coin par exemple le plus à droite ou le plus à gauche de l'écran de l'utilisateur puis si l'utilisateur ouvre le menu déroulant, il déborde à la zone invisible de la fenêtre et provoque la barre de défilement horizontale.

Comment arrêter le débordement?

HTML

<ul class="dropdown"> 
    <li class="headlink"> 
     <a href="javascript://">Menu</a> <img src="/static/images/mini/sort_down.png" /> 

     <ul class="arrowlist invisible"> 
      <li>Hello 1</li> 
      <li>Hello 2</li> 
      <li>Hello 3</li> 
     </ul> 
    </li> 
</ul> 

CSS

.dropdown {z-index: 1} 
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;} 
.dropdown li{} 
.dropdown a{outline:none} 
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px} 
.dropdown ul li{margin:2px;white-space:nowrap} 

JS

$('.dropdown li.headlink') 
    .click(function() { 
     $(this).css('position', 'relative'); 
     $('ul', this).slideDown(100); 
    }); 

     $('.dropdown li.headlink') 
    .mouseleave(function(){ 
     var headlink = this; 
     $('ul', this).slideUp(100, function(){ 
      $(headlink).css('position', 'static'); 
     }) 
    }); 

Answer 1

J'ai trouvé une solution:

$('.dropdown li.headlink') 
    .click(function() { 
     $(this).css('position', 'relative'); 

     if($('ul', this).width() + 10 > $(window).width() - $(this).offset().left) $('ul', this).css('left', 'auto').css('right', '-1px'); 
     else $('ul', this).css('left', '-4px').css('right', 'auto'); 

     $('ul', this).slideDown(80); 
    }); 

Answer 2

Je pense que vous devrez peut-être stocker dans un var la HEIG ht en px de votre liste déroulante et vérifiez son y-offset. Ce message pourrait être en mesure de vous pointer dans la bonne direction How to see if an element in offscreen Je voudrais pouvoir vous fournir un code de travail.

Answer 3

Essayez cette

remplacerons:

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px} 

avec

.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;position:relative} 

et remplacer

.dropdown ul { 
    z-index:100; 
    border:1px solid #C7C9CF; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    behavior:url(/static/css3pie.php); 
    background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom; 
    position:absolute; 
    top:-1px; 
    left:-4px; 
    padding:8px; 
} 

avec

.dropdown ul { 
    z-index:100; 
    border:1px solid #C7C9CF; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    border-radius:4px; 
    behavior:url(/static/css3pie.php); 
    background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom; 
    position:absolute; 
    left:-4px; 
    padding:8px; 
} 

Hope it helps

Answer 4

La solution générale à un problème comme celui-ci est à, en utilisant CSS ou JavaScript, ajouter une classe au premier ou au dernier élément de menu déroulant pour que ce soit l'alignement est corrigé. Dans ce cas spécifique, avec un positionnement absolu, il est conseillé de modifier la propriété left et right. Un exemple simple, lorsque le menu est aligné à droite et que la liste déroulante la plus à droite dépasse de l'écran, est d'ajouter une classe avec JavaScript qui déplace le menu de l'alignement aligné vers le côté gauche du menu élément à droite:

.dropdown ul { 
    left: 0; 
} 

.dropdown ul.last { 
    right: 0; 
    left: auto; 
} 

une démonstration simple de ce peut être trouvé ici: http://www.jsfiddle.net/yijiang/HyXuy/1/