Geek Answers Handbook

Detecting Div Out Of Screen

I encoded a dropdown menu through javascript (w / jQuery) and CSS. The drop-down menu works fine, but if the drop-down menu is located in the corner, for example, to the right or left of the user's screen, then if the user opens the drop-down menu, it overflows into the invisible area of ​​the window and causes a horizontal scroll bar.

How to stop overflow?

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'); }) });
+7
source share
4 answers

I found a 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); });
+1
source

I think you may need to save at var height to px of your drop down and check its y-offset. This message may point you in the right direction. How to see if an item behind the scenes I would like to provide you with a working code.

0
source

try it

replace:

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

from

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

and replace

 .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; }

from

 .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 this helps

0
source

A general solution to the problem, for example, using CSS or JavaScript, adds the class to the first or last element of the drop-down menu so that its alignment is fixed. In this particular case with absolute positioning, the left and right property should be changed.

A simple example: when the menu is right-aligned and the pop-up window on the right exits the screen, you need to add a class with JavaScript that will move the menu from the menu item left-justified to the right:

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

A simple demonstration of this can be found here: http://www.jsfiddle.net/yijiang/HyXuy/1/

0
source

More articles:


All Articles