SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute DIV height and page height

    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?

    Thanks in advance

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •