Expanding DIV how to check when it has exceeded screen size

Question

We have a DIV that is loaded with content based on user options in a form. The DIV can grow to large to be seen on screen as it is also a sticky element and follows the user on the screen.

How would we get the DIV to work out if some of itself is off screen and if so show a button that can then link to the full content.

Any ideas?

Marvellous

Mohammed Swillam · Answer 1 · 2011-03-29T13:17:22.940

0

if you can force the maximum width of your div, try this with CSS :

max-width: *YOUR_PAGE_WIDTH*px;

edited Mar 29 '11 at 13:17

answered Mar 29 '11 at 13:11

Mohammed Swillam

9,119
4
36
47

score 0 · Answer 2 · edited Aug 15 '12 at 15:29

0

This can be done via CSS,

overflow:auto;

edited Aug 15 '12 at 15:29

Andrew

13,757
13
66
84

answered Mar 29 '11 at 13:12

Damian

219
5
14

I'm afraid not. Overflow must remail :hidden in order to facilitate the sticky element. I suppose a better way to put it would be can we detect if there is an overflow, and if so enact a script – Walrus Mar 29 '11 at 13:16

score 0 · Accepted Answer · answered Mar 29 '11 at 13:15

0

If you are looking for a JS solution perhaps, this would work:

var topoffset = $div.offset().top;
var height = $div.height();
var pageHeight = $(window).height();

if ((topoffset + height) > pageHeight) {
  //the div is going outside the page
}

answered Mar 29 '11 at 13:15

sv_in

13,929
9
34
55

that should have worked. But I do not think it is calculating the topoffset correctly as the script is being triggered regardless. I tried it without the top offset and the script did not trigger anything – Walrus Mar 29 '11 at 13:33

Expanding DIV how to check when it has exceeded screen size

3 Answers3