RSS
 

Couple of JQuery Ajax Loaders

22 Dec

I had a couple of instances where I needed some nice, clean AJAX content loaders. Once to slide a page, one to page, and one with no effects.

Here is the code for them… enjoy (p.s. these require you include the JQuery library, also make sure to change any path inside to the path of your loading images)

  1. function loadPageFade(strPageToLoad, strWhereToLoadIt) {
  2.         $.ajax({
  3.                 url: strPageToLoad,
  4.                 beforeSend: function(){
  5.                         $(strWhereToLoadIt).queue( function() {
  6.                                 $(this).html(‘<p style="text-align:center;"><img src="/icons/loading_bar.gif" alt="Loading…" /></p>’);
  7.                                 $(this).animate({opacity:0}, 500);
  8.                                 $(this).dequeue();
  9.                         });
  10.                 },
  11.                 cache: false,
  12.                 success: function(html){
  13.                         $(strWhereToLoadIt).queue( function() {
  14.                                 $(this).html(html).animate({opacity:1}, 500);
  15.                                 $(this).dequeue();
  16.                         });
  17.                 },
  18.                 error: function(){
  19.                         $(strWhereToLoadIt).queue( function() {
  20.                                 $(this).html(‘<div class="err_message">There was an error processing your request.</div>’).animate({opacity:1}, 500);
  21.                                 $(this).dequeue();
  22.                         });
  23.                 }
  24.                 });
  25. }
  26. function loadPageSlide(strPageToLoad, strWhereToLoadIt) {
  27.         $.ajax({
  28.                 url: strPageToLoad,
  29.                 beforeSend: function(){
  30.                         $(strWhereToLoadIt).slideUp(300);
  31.                 },
  32.                 cache: false,
  33.                 success: function(html){
  34.                         $(strWhereToLoadIt).html(html).slideDown(500);
  35.                 },
  36.                 error: function(){
  37.                         $(strWhereToLoadIt).html(‘<div class="err_message">There was an error processing your request.</div>’).hide().slideDown(500);
  38.                 }
  39.                 });
  40. }
  41. function loadPage(strPageToLoad, strWhereToLoadIt) {
  42.         $.ajax({
  43.                 url: strPageToLoad,
  44.                 cache: false,
  45.                 success: function(html){
  46.                         $(strWhereToLoadIt).html(html);
  47.                 },
  48.                 error: function(){
  49.                         $(strWhereToLoadIt).html(‘<div class="err_message">There was an error processing your request.</div>’).hide().fadeIn(1000);
  50.                 }
  51.                 });
  52. }
Link to this post!
 
No Comments

Posted in Web Design

 

Tags: ,

Leave a Reply

 
 
 

Optimized by SEO Ultimate