Need Help with Ajax + AJaxStart + spinner

Hi

I want to have a spinner animation when ever an ajax request happens. So what I did was I made an div with an image in it of the spinner.

Now it all works when a call is made it works and stuff and when it is done it goes away(I have the AjaxStop one setup)

Now the thing is where should I display it? Like I would like to put it right where the user is looking at but I don't know how to even do that. Like I going to be using this on a couple pages so I can't even try to do somthing like middle of the page since each page would be a different size. Plus my pages are longer then they have content so middle of page might be like in no mans land where they won't see it since thats now where they are scrolled.

So I have no clue how to even do this. I was thinking maybe try to find out the middle of tabs container(I am using jquery UI tabs) so I am not sure that would be a good solution but I don't know how to find that out either.

I generally put mine where the Ajax data will be loaded. That directs the users eye to that location and they don't miss when the data appears.

P.S. I don't call this a "spinner" because there is a type of control called a "spin control" and there's too much opportunity for confusion. I call mine a "whirlybug" but I can assure you that that is not a standard term!

Bear Bibeault wrote:I generally put mine where the Ajax data will be loaded. That directs the users eye to that location and they don't miss when the data appears.

P.S. I don't call this a "spinner" because there is a type of control called a "spin control" and there's too much opportunity for confusion. I call mine a "whirlybug" but I can assure you that that is not a standard term!

ya I noticed it was hard to find an icon first for it since I could figure out a name for it. Tried a couple till I found the image I was looking for.

so how do I put it by the ajax data that will be loaded. Like most of my ajax is really for sending info to the server so I will have a set of like textboxes where the user fills in the info and then they hit the save button.

So I would like to put it there. I been looking into the css position but still not sure if this is what I need.

Place it in the middle of the screen if you are not sure where it should go.

Did you look at this: http://www.ajaxload.info/

Eric

Eric Pascarello wrote:Place it in the middle of the screen if you are not sure where it should go.

Did you look at this: http://www.ajaxload.info/

Eric

Ya I was thinking of that but not sure how to make it the middle for each page. Like I said each page has a different size so not sure what to use to make it to the middle of the screen(css? margin? position? then pixels or precent?)

Try something liek this:

Eric

I just place it inline with the other page stuff and hide/show it as appropriate.

Eric Pascarello wrote:Try something liek this:

var x = document.createElement("div"); x.innerHTML = "test"; x.style.position = "absolute"; x.style.top = "50%"; x.style.width = "20%"; x.style.marginLeft = "40%"; x.style.backgroundColor = "#CCC"; x.style.zIndex= 1001; x.style.textAlign = "center"; document.body.appendChild(x);

Eric

What does this do?

Try it....

Eric