div overlay

[anujgarg]

I want to show a div overlay (interstitial) after submitting a form. I found one here (but not exact):

http://www.lokeshdhakar.com/projects/lightbox2/

 

But here, overlay doesn't get closed automatically. I want to have closed it automatically after 2 secs. Also, I want to let action performed on back side (form submission) when the overlay is on the screen....

 

How can we do this...

 

TIA

[o3d]

Have a look at http://www.prototypejs.org/

 

They have a lot of javascript features including div styling and action handling

[nadeemshafi9]

Sorry bud i know what ur trying to do but you will have issues showing any image inside that DIV you can put text only in a DIV overlay light box style ON FORM SUBMISSION cos on FORM SUBMISSION there is issues with loading images dynamically so when a form is being submitted text will be loaded dynamically into ur light box but images will not cos of some underlying issue, If you are however able to load an image on form submission please let me know how cos i have a search engine that says searching on form submission and id like to add an animated gif to it, my SE dosent use light box just a plain div insert.

[nadeemshafi9]

Have a look at http://www.prototypejs.org/

 

They have a lot of javascript features including div styling and action handling

 

i dont use prototype yet but am looking into it as i write alot of JS for varied functions.

[valtido]

look up settimeout on javascript.

[anujgarg]

settimeout is OK but the thing is to incorporate in effective manner so that I can handle the overlay properly...

Anyone had implemented it??

[nadeemshafi9]

this is from my library lol

 

function showsearchloading() {
//setTimeout(showsearchloading,1000); 
if (! document.getElementById('spinnerdiv') || ! document.getElementById('searchimage')) {

	spinnerdiv = document.createElement('div');
	spinnerdiv.setAttribute('id', 'spinnerdiv');
	spinnerdiv.setAttribute('class', 'spinner');
	spinnerdiv.setAttribute('className', 'spinner');
	spinnerdiv.innerHTML = "<h1>Searching ...</h1>";

	//spinnerimg = document.createElement('img');
	//spinnerimg.setAttribute('src', 'images/common/loader.gif');
	//spinnerimg.setAttribute('id', 'searchimage');

	document.body.appendChild(spinnerdiv);
	//document.getElementById('spinnerdiv').appendChild(spinnerimg);
}
}

 

as you can see i was unable to get the image to go into the div on submit of form so i resorted to just text instead, it does work the code works if your not submiting form at teh same time.