I was working on a project recently that had a dynamically populated container whose size varied greatly based on search, filter, and user preferences. I wanted to add a loading graphic to the center of the element during ajax operations, and found that if the container was very large, centering the graphic occured offscreen.

here’s a plugin to get the visible dimensions of an element – so if an element is at top:200, left:200, width:1000, height:1000 and the browser window only allows 500 square pixels of content, the return object would have a width and height of 300 pixels each.

here’s the jQuery version…

and the MooTools version…