Dropdown Menu to open up when there isn't enough room on the screen - HTML/CSS/Javascript

Question

I have a drop-down that is in the middle of the document. When the drop-down shows up on the bottom of the screen, I want the drop-down to go up instead of down. When the drop-down shows up on the top of the screen, I want the drop-down to go down.

The drop-down is designed in HTML/CSS. I need the Javascript/jQuery code to make this work.

Any help will be much appreciated.

Thank you! –

I would suggest posting what code you have into a [jsfiddle](http://jsfiddle.net/) so that people can help you. — Jeemusu, Jul 13 '12 at 09:58
The HTML & CSS code can be found at the following location: http://jsfiddle.net/2h3Qw/ — Aliasger Matiwala, Jul 13 '12 at 12:23

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

First You have to find Top and Left coordinates of drop-down component. let coordibnates are x1,y1. Then find width and height of screen via screenX and screenY. then you can compare x1,y1 with screenX and screenY respectively.

you can do like this

edited May 23 '17 at 10:30

Community

1
1

answered Jul 13 '12 at 09:58

SilentBomb

168
2
11

The HTML & CSS code can be found at the following location: http://jsfiddle.net/2h3Qw/ – Aliasger Matiwala Jul 13 '12 at 12:23

Dropdown Menu to open up when there isn't enough room on the screen - HTML/CSS/Javascript

1 Answers1