date:20120508

[Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread 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

-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Re: [Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread 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

On May 8, 2012, at 10:54 AM, Phil Petree wrote:

 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
 
 -- 
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at 
 http://groups.google.com/group/prototype-scriptaculous?hl=en.

-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Re: [Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread Walter Lee Davis

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

Walter

On May 8, 2012, at 11:03 AM, Walter Lee Davis wrote:

 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
 
 On May 8, 2012, at 10:54 AM, Phil Petree wrote:
 
 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
 
 -- 
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at 
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
 -- 
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at 
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 

-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Re: [Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread Phil Petree

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

On Tue, May 8, 2012 at 11:39 AM, Walter Lee Davis wa...@wdstudio.comwrote:

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

 Walter

 On May 8, 2012, at 11:03 AM, Walter Lee Davis wrote:

  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
 
  On May 8, 2012, at 10:54 AM, Phil Petree wrote:
 
  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
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 

 --
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.



-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Re: [Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread 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.

On Tue, May 8, 2012 at 12:10 PM, Phil Petree phil.pet...@gmail.com wrote:

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


 On Tue, May 8, 2012 at 11:39 AM, Walter Lee Davis wa...@wdstudio.comwrote:

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

 Walter

 On May 8, 2012, at 11:03 AM, Walter Lee Davis wrote:

  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
 
  On May 8, 2012, at 10:54 AM, Phil Petree wrote:
 
  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
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 

 --
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at
 http://groups.google.com/group/prototype-scriptaculous?hl=en.




-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Re: [Proto-Scripty] how to center ajax spinning icon

2012-05-08 Thread 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

On May 8, 2012, at 12:10 PM, Phil Petree wrote:

 Thanks... i was just getting ready to try this...
 
 On Tue, May 8, 2012 at 11:39 AM, Walter Lee Davis wa...@wdstudio.com wrote:
 Sorry, make that position: fixed (brain fade). static means something else.
 
 Walter
 
 On May 8, 2012, at 11:03 AM, Walter Lee Davis wrote:
 
  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
 
  On May 8, 2012, at 10:54 AM, Phil Petree wrote:
 
  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
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to 
  prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at 
  http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
  --
  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-scriptaculous@googlegroups.com.
  To unsubscribe from this group, send email to 
  prototype-scriptaculous+unsubscr...@googlegroups.com.
  For more options, visit this group at 
  http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
 
 --
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at 
 http://groups.google.com/group/prototype-scriptaculous?hl=en.
 
 
 
 -- 
 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-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 For more options, visit this group at 
 http://groups.google.com/group/prototype-scriptaculous?hl=en.

-- 
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-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Proto-Scripty] how to center ajax spinning icon

Re: [Proto-Scripty] how to center ajax spinning icon

Re: [Proto-Scripty] how to center ajax spinning icon

Re: [Proto-Scripty] how to center ajax spinning icon

Re: [Proto-Scripty] how to center ajax spinning icon

Re: [Proto-Scripty] how to center ajax spinning icon

6 matches

Site Navigation

Mail list logo

Footer information