Keeping a div fully visible within browser window

[Terry]

I'm working on a web page that consists primarily of an unordered list.
When the user mouses over any list item, a div appears immediately to
the right of that item, containing supplemental information about that
item.

Vertically, I'm positioning the div with its top slightly higher than
the list item, as determined by the list item's offsetTop value.

My problem: If a list item appears near the bottom of the browser
window, the div is too tall to fit in the window, and is partially
concealed. So, I need to determine whether the div will fit vertically
in the browser window, and if it won't, assign the div a top position
that will ensure that the entire div is visible. How do I do this???

Thanks!

 

[Eduardo Omine]

My problem: If a list item appears near the bottom of the browser
window, the div is too tall to fit in the window, and is partially
concealed. So, I need to determine whether the div will fit vertically
in the browser window, and if it won't, assign the div a top position
that will ensure that the entire div is visible. How do I do this???

You first have to know the div's height, the div's top position and the
window's height.

To calculate the window's height, use the getWindowHeight function
explained here:
http://alistapart.com/articles/footers

How to retrieve the div's height and top position depends on the
element's CSS properties.
Usually, offsetHeight and offsetTop do the job.

* * * * *

var windowHeight = getWindowHeight();
var divHeight = div.offsetHeight;
var divTop = div.offsetTop;

var diff = windowHeight - divHeight - divTop;
if(diff < 0){ divTop = divTop + diff; }

* * * * *

 

[TheBagbournes]

I'm working on a web page that consists primarily of an unordered list.
When the user mouses over any list item, a div appears immediately to
the right of that item, containing supplemental information about that
item.

Vertically, I'm positioning the div with its top slightly higher than
the list item, as determined by the list item's offsetTop value.

My problem: If a list item appears near the bottom of the browser
window, the div is too tall to fit in the window, and is partially
concealed. So, I need to determine whether the div will fit vertically
in the browser window, and if it won't, assign the div a top position
that will ensure that the entire div is visible. How do I do this???

Thanks!

It might be a good idea to use a YAHOO.ext.BasicDialog object to do that. You can instantiate them from an existing DIV, and use the constraintoviewport:true config option and it will constrain the position within the browser viewport. If you don't want to see a header and footer in this dialog, just use CSS (You'll obviously have your own class name to give to this informational DIV) to set them to display:none.

YAHOO.ext library: http://www.jackslocum.com/blog/ (Read the blog entries since September last year to familiarize yourself first)

Docs: http://www.yui-ext.com/deploy/yui-ext/docs/

 

[Terry]

var windowHeight = getWindowHeight();
var divHeight = div.offsetHeight;
var divTop = div.offsetTop;

var diff = windowHeight - divHeight - divTop;
if(diff < 0){ divTop = divTop + diff; }

Thanks, Eduardo. I actually tried this approach but the value of
div.offsetTop is relative to the document, not the window. If the height
of the unordered list is greater than the window size (which is ok),
then the user may be mousing over a list item, and thereby spawning a
div, that has a divTop value that's much higher than the windowHeight
value.

The logic in your approach is good, but how to I get a value of divTop
that reflects the div's position within the window, not within the
document?

 

[VK]

The logic in your approach is good, but how to I get a value of divTop
that reflects the div's position within the window, not within the
document?

The task to find the exact pixel position of any element in any layout
is not solvable. For that current DOM methods are way too weak and
current UAs are too buggy (each on its different way). This way the
request could only be to have a program solving the problem in the
biggest amount of circumstances. AFAIK currently the best is the
library by Matt Kruse
<http://www.javascripttoolbox.com/lib/objectposition/>. It still cannot
be exact in all possible situations, because as it was explained this
task currently is not solvable. But in 99% of situations you are
getting pixel-exact position.

 

[Eduardo Omine]

http://www.javascripttoolbox.com/lib/objectposition/

You can also try PPK's findPos, a simpler script:
http://www.quirksmode.org/js/findpos.html

 

[Matt Kruse]

You can also try PPK's findPos, a simpler script:
http://www.quirksmode.org/js/findpos.html

Simpler because is handles fewer situations correctly and returns incorrect
values in those situations.