I’ve got a div that appears when a visitor clicks a link on the page, the DIV has a position of absolute and jquery animates the opening of the DIV so that it’s drops down over the content of the page.
the problem is that the client has started to enter a lot of text into the DIV and now it’s height extends off the bottom of the page and cuts the content off.
Is there any way to make it so that when an absolute DIV extends off the page the browser automatically adjusts the page height so that the user can scroll down to see the rest of the content?
Welcome to why those types of “gee ain’t it neat” effects usually are a bad idea on a page. I learned that lesson about six years ago when a page I had been maintaining by hand for two years was handed off to the client. In general, such ‘trickery’ is usually just bad accessibility, bad code, and completely unsustainable in the long term.
My advice: Pageloads aren’t evil, split that out into a separate page if it’s getting that long.
That way people can directly link to it (good for SEO), use normal navigation (forward/back) in relation to it, and it will probably save on bandwidth by not needing the extra code in the form of scripting. File it alongside scripted tags, animated banners, fancy fonts with illegible color contrasts, fixed height containers behind dynamic sized text, and all the other garbage that turns perfectly good website concepts into accessibility train wrecks that few people bother exploring deeper than the home page on.
Though… an APO element extending off the bottom SHOULD add the scrollbar – if not then you’ve got something else on the page interfering with that like say… a min-height layout? Overflow:hidden on body maybe?
I’d have to see the site to say for sure… but normally an APO should NOT get cut off on the bottom or right – only on the top or the left…
Could just be the page got too fancy for it’s own good with some effects… May be time to cut it down a bit.
I agree with what you’re saying, though these effects were specifically requested by my client. I probably should of said no, but when I did mention problems they just said ‘well blah blahs site has managed to do it’.
I’ll have another look, there’s an absolute load of effects on this page so it may be possible that something else is interfering with it.
As Jason (desathshadow) said the page should get a scrollbar when the absolute element is too long but if its a hover only effect then you can’t get to the scrollbar before the menu disappears although you could scroll with the mouse wheel while still hovering. You said it was opened on click so you should still see a scrollbar in the main window through unless the parent is overflow:hidden perhaps.
An alternative solution may be to set a height for the drop downs and add overflow:auto so that you get a scrollbar if the content is too long.
There is a solution at CSS tricks but uses the dreaded jquery library (which Jason hates) but may be a solution if you are not up to coding it yourself. The menu seems very awkward to me to use though so it’s not something I would use.
All in all it does sound however as though the element has evolved into something else now and outlived its usefulness so perhaps the client should be coerced into using something more usable.
#1. this is what I mean that the biggest problem in design is the client.
#2… perhaps a naive solution, but based on the description it sounds like your effect is one of those APO “pop-ups”, just animated differently and now misused by your client to include a large amount of content as opposed to a quick burst or link or gallery image, etc. IF this is the case, I wonder if you could add overflow-y:auto; to that div ?
down sides: limited IE support and double scroll bar( I hate that aesthetically), but it would make your content accessible w/o adding extra js tricks.
