how to center ajax spinning icon

[Phil Petree]

Lets say I have this div imbedded in my page:

<div id='systemWorking'><img src='spinner.gif'>Saving...</div>

 

And I have a list with 1000 entries and the user has scrolled down mid way... if I unhide the spinner using this:

    document.getElementById('inProgress').style.display = 'inline';

It shows but it shows in the location where it's imbedded in the page (top, bottom etc.) but not necessarily viewable to the user.  I want to reposition the div so that its always centered in the screen.

 

How does one go about this?

 

Thanks,

 

Pete

[Walter Lee Davis]

One way to do this is to add an overlay to your page.

<div id="overlay"></div>

#overlay {
position: static;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(spinner.gif) rgba(0,0,0,0.7);
z-index: 1000;
}

document.observe('dom:loaded',function(){ $('overlay).hide();});

Then slave the show/hide to your Ajax methods, or use the technique outlined in the AjaxResponders docs to have one listener for all Ajax events: http://api.prototypejs.org/ajax/Ajax/Responders/

Walter

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Walter Lee Davis]

Sorry, make that position: fixed (brain fade). static means something else.

Walter

[Phil Petree]

Thanks... i was just getting ready to try this...

[Phil Petree]

I'm completely daft when it comes to css...

 

background: url("/images/working.gif") rgba(0,0,0,0.7);

 

Doesn't get loaded in the page in ie9.

[Walter Lee Davis]

Try splitting it apart.

background-color: rgba(0,0,0,0.7);
background-image: url(foo.gif);

Also set a solid color for IE < 8 or whatever version can't do rgba… Just set background-color: #777; before the one with the rgba color. Or, have a look here http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ for an IE-only "filter" attribute you can use in those browsers.

Walter

[Phil Petree]

I had already tried that...  that set the spinner as the background image for the page.  Spent two hours mucking around with it and had to move on to something else.  Ill revist it later thus week.

[Walter Lee Davis]

Here's an example. I realize I left a couple of points out of the CSS -- background-position and repeat.

http://scripty.walterdavisstudio.com/loading

This page also demonstrates two different uses of the overlay technique. The first, as in a lightbox, is click to show, click on the overlay to hide. The second uses the Ajax.Responders.register method to hook all Ajax requests on the page with one behavior. (It also disables the click-to-close behavior for the duration, so it becomes a modal overlay.)

Once this is hooked up, you could have dozens of separate Ajax functions running on this page, and each one would trigger the overlay while it was running. Note the use of defer inside these methods, you really need that in Firefox, maybe Safari, or the overlay will either never show, or never hide -- the page will just get stuck during the request.

Walter

[Phil Petree]

Awesome! Other than this, the UI portion of this feature set is done. I have to finish off the "engine" today and tomorrow,  then Friday Ill do this part.

And as usual, you're a gentleman and a scholar!!!

Pete

[Joao De Faria]

HOW DO I UNSUBSCRIBE FROM GETTING THESE EMAILS???