• 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

Fade in-Fade out effect

 
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello all,

I've a HTML page where a fragment of the page needs to be replaced regularly (say every 5 seconds) and after this interval the existing div contents would fade out and the new contents would fade in. I'm using ajax to fetch this content from the server after a timeout. I'm stuck on how to fadeout the existing content and load the new HTML fragment from the HTML with a fade-in.



What i thought was to load the HTML from the ajax call into a hidden div and replace the "Now showing" div's after it fades out.Somehow i am not able to get the desired effect. Can someone help me on this?

P.S: This code sets out a timeout which hits the server regularly after 5 seconds.(which means his/her session would be active forever). How can i stop this fade in - fade out if the user is not looking at it ? I think i need to start a timer after every mouse activity on the screen and if this timer rings, this should stop the ajax call timer. Ufff.How could that be done?


Thanks,
Srikkanth
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You want to use the callback in the fadeout

http://docs.jquery.com/Effects/fadeOut

Eric
 
Srikkanth Mohanasundaram
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Eric,
That came out really well. Any ideas on how to detect user inactivity and stop this ajax call?
And one more doubt,what happens if the server doesn't respond back in 5 secs?

Thanks,
Srikkanth
 
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

That came out really well. Any ideas on how to detect user inactivity and stop this ajax call?



There is no real way to detect this, you can maybe monitor the window blur. You can also look at onmousemove and other events such as keypress.

And one more doubt,what happens if the server doesn't respond back in 5 secs?



You can either abort the request. Most people will not use intervals, they use setTimeouts. You fire the setTimeout after you get the response back. You are using setTimeout, so looks to be fine with me.

Eric
 
Srikkanth Mohanasundaram
Ranch Hand
Posts: 243
1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I used the mousemove for good effect. Looks cool now.

Thanks for your help and time.


Srikkanth
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic