Re: [Proto-Scripty] how to center ajax spinning icon
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. On May 8, 2012 3:42 PM, Walter Lee Davis wa...@wdstudio.com wrote: 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. -- 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
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 On May 9, 2012, at 5:26 AM, Phil Petree wrote: 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. -- 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
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 On May 9, 2012 10:21 AM, Walter Lee Davis wa...@wdstudio.com wrote: 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 On May 9, 2012, at 5:26 AM, Phil Petree wrote: 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. -- 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
HOW DO I UNSUBSCRIBE FROM GETTING THESE EMAILS??? On Wed, May 9, 2012 at 7:33 AM, Phil Petree phil.pet...@gmail.com wrote: 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 On May 9, 2012 10:21 AM, Walter Lee Davis wa...@wdstudio.com wrote: 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 On May 9, 2012, at 5:26 AM, Phil Petree wrote: 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. -- 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
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
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
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
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
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.