• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Need Help with Ajax + AJaxStart + spinner

 
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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?)
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Try something liek this:




Eric
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I just place it inline with the other page stuff and hide/show it as appropriate.
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Eric Pascarello wrote:Try something liek this:




Eric



What does this do?
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Try it....

Eric
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic