CODEWITHSUNDEEP
javascriptjquerycss
mTuran
mTuran

Reputation: 1834

Detecting is Div Out Of Screen

I coded dropdown menu via javascript(w/ jQuery) and CSS. Dropdown menu works fine but if dropdown menu located at corner for example rightmost or leftmost of user screen then if user opens the dropdown menu, it overflows to unseen area of window and causes horizontal scroll-bar.

How can I stop overflowing ?

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

Upvotes: 7

Views: 2142

Answers (4)

mTuran
mTuran

Reputation: 1834

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

Upvotes: 1

Yi Jiang
Yi Jiang

Reputation: 50155

The general solution to a problem like this is to, using either CSS or JavaScript, add a class to the first or last dropdown menu element so that it's alignment is corrected. In this specific case, with absolute positioning, changing the left and right property should do.

A simple example, for when the menu is right aligned and the right-most dropdown protrudes out of the screen, is to add a class with JavaScript which will shift the menu from the been aligned to the left side of the menu item to the right: 

.dropdown ul {
    left: 0;
}

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

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

Upvotes: 0

Hasan
Hasan

Reputation: 33

Try this

replace:

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

with

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

with 

.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

Upvotes: 0

The Muffin Man
The Muffin Man

Reputation: 20004

I think you may need to store in a var the height in px of your drop down and check its y-offset. This post might be able to point you in the right direction How to see if an element in offscreen I wish I could provide you with working code.

Upvotes: 0

Related Questions