Topic: jQuery overlay for specific page element (Page 1 of 1) Pages that link to <a href="" title="Pages that link to Topic: jQuery overlay for specific page element (Page 1 of 1)" rel="nofollow" >Topic: jQuery overlay for specific page element <span class="small">(Page 1 of 1)</span>\

Maniac (V) Mad Scientist

From: Jacks raging bile duct....
Insane since: Mar 2000

IP logged posted posted 11-07-2010 18:42 Edit Quote

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.

Bipolar (III) Inmate

From: Raleigh, NC
Insane since: Mar 2001

IP logged posted posted 11-29-2010 16:37 Edit Quote

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]

Post Reply
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
Your Text:
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu