Search code examples
jquery-tools

jQuery Tools overlay too large for screen, cannot access lower content

I've been using jQuery Tools' overlay for some time, but I don't know what to do when the browser window isn't large enough to accomodate the contents of the overlay.

Check out the jQuery Tools example page and see what I mean:

  1. Click one of the images to make an overlay appear
  2. Resize your window so that the entire overlay can't fit

This may seem like a simple problem with an easy solution (make your browser window larger), but I work on a website that caters to older people, whose monitors may be set at low resolutions.

Any idea what I can do, short of building my own javascript overlay utility?

Solution

  • You could specify the size of the overlay div in % so that it always fits on the screen.

    overlay_div {
height: 60%;
overflow-y: auto;
}