Topic: jQuery overlay for specific page element

Every jQuery overlay tutorial or demo online that I can find overlays 100% of the page.

What I want is to overlay a div (on the page) containing a simple form on submit with a spinner image while the form is posting and then change the innerhtml to display not the form but a response. I don't want the form to zoom like every other overlay tutorial shows...I want only to overlay the div container the form is in.

Anyone seen any good example of this? I know I've seen this done before.

Well, maybe this will help... Maybe not. JQuery is just a (lazy) means to access elements with javascript. The problem you're describing is really a styling issue more than it is a scripting problem.

Present a <div> that will act as a container for the form, the spinner, and the response. Be sure to provide this div with a real number for width and height

<div id="form-container"> </div>

Then place all three of elements inside that container, each with a width and height of 100%. Since the container has static dimensions, the 100% will trace backwards through its parents only to the container, and fill the container completely, but not more than that.

Then assign a .hidden class to the spinner, and the response divs.

Then, as you're on the page, once the submit button is pushed, catch the event of the submit, run hide() on the form, and show() on the spinner. On success, hide() the spinner, and show() the response. Got it?

Shine and shine. :: [old cell]