Ajax Loading/Preload

[Sina]

Hello everybody,
I want to know how is it possible to create a loading for a page.
I mean for example if you've ever been in google analytics, when you change the date, all the page get something like disabled, and a loading appears.
and after ajax loaded the whole page, it gets disappeared.
and one other thing is that I'm in need of a way to create a loading for a page.
I'll appreciate your helps.
Thanks
Sina

 

[Kate]

Here is a decent tutorial: http://www.w3schools.com/ajax/default.asp
If you have a bit of PHP, Javascript, HTML knowledge it shouldn't be too difficult to tweak the sample code to your needs :tu:

 

[Sina]

sdsinc, the link you provided is about Ajax, but not what I want.
I know PHP and HTML nearly well.
but not well in javascript. I've searched a lot about this article.
but hadn't found anything.
Can anyone help me?

 

[xrvel]

One example is on tracenic dot com index page. Main ajax script is http://www.tracenic.com/others/ajax_whois.js

Explanation :

var xmlHttp;
var id;

function ajax_go() {
	//
	// URL of your ajax php script
	//
	url='your_script.php?';
	url=url+"sid="+Math.random();

	// Enter your form field, hidden inputs, etc below
	post_data='';
	post_data=post_data+"your_text_field="+escape(document.getElementById('your_textfield').value);

	// Post the form via AJAX
	xmlHttp1.open("POST",url,true);
	xmlHttp1.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	xmlHttp1.onreadystatechange=function() {
		if(xmlHttp1.readyState==4 && xmlHttp1.status==200) {
			//
			// Add code when page is in "ok state" here.
			// e.g. enable some object,
			// hide loading image, etc.
			//
			document.getElementById('ajax_result').innerHTML = xmlHttp1.responseText;

			//
			// Let's add an alert code here...
			//
			alert(' Hello , i am done :-) ');
		} else if (xmlHttp1.readyState>0 && xmlHttp1.readyState<4) {
			//
			// Add code when page is in "loading state" here.
			// e.g. disable some object,
			// create loading image, etc.
			//
			document.getElementById('ajax_result').innerHTML = '<img  alt="Wait" src="wait.gif" />';
		}
	}
	xmlHttp1.send(post_data);
}

//
// you don't need to change the code below
//
function getXmlHttpRequest() {
	var xmlHttp=null;
	try {
		xmlHttp=new XMLHttpRequest();	
	} catch (e) {
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (E) {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

--------

How to use?
attach the ajax code to a button for example.

<input type="button" value="Hit Me" onclick="ajax_go()" />

 

[Sina]

well, I think nobody gets what I mean.
My problem is not the Ajax itself.
I want to know how I can place a new layer on the screen and put everything else in gray(as I've described on the first post)
I'll appreciate your helps

 

[anantshri]

I can give you one suggestion

use some ready made libraries, i think greybox has a simmilar feature what you want, or you can try scriptaculous.

 

[Albino]

you can do that using css, add a new div, set the z position to top, make it 100%, and have the bacground as grey.

you cna keep it on top as youscroll with javascript as well.

 

[xrvel]

you can do that using css, add a new div, set the z position to top, make it 100%, and have the bacground as grey.

you cna keep it on top as youscroll with javascript as well.

Yes that should work. Btw, can you put a div above a flash?
I still can't make the div on top of the flash (z-index, position absolute).

I hope Sina does not have a flash in his/her page.

 

[cerebus]

Yes that should work. Btw, can you put a div above a flash?
I still can't make the div on top of the flash (z-index, position absolute).

I hope Sina does not have a flash in his/her page.

Setting wmode to opaque/transparent on the flash object solves this (<param name="wmode" value="opaque"> to the object and wmode="opaque" to the embed). Alternatively it can possibly be solved by adding an IFRAME also covering the entire screen.

 

[Sina]

Thank you all guys.
Specially anantshri. although you didn't gave the address, but I searched and found that its exactly what I wanted.
Does anyone know any other libraries like these?
Thank you

 

[DylanButler]

I reccommend the YUI library (Yahoo User Interface). You can then create a new Panel() object and give it such incredible features as modal, overlay, stick to center, show/hide, and tons more without worrying about browser complications.

http://developer.yahoo.com/yui/examples/container/index.html

 

[Sina]

DylanButler, thank you so much! this is really amazing!
I've downloaded the library, but don't know what to do, can you give a help how can I create the panel?

 

[DylanButler]

I would start by doing the tutorial on this page:

http://developer.yahoo.com/yui/container/panel/

and then finding something that suits you on the example pages and do what they did there.

I also found this link: http://icant.co.uk/sandbox/yuipanel/

Looks like you need example #5

 

[Sina]

DylanButler, you are a great help.
I really appreciate your great help.
I tried to add another rep, but the system don't allow me
btw, have you any other tutorial about the manu component to(from YUI) ?
and, do you know how can I nearly maximize(nearly fit the panel into the screen?(not by putting the pixel, because different screens are viewing the page)
Thank you so much...