Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Constellation AJAX load with effect

By: a guest on Sep 12th, 2012  |  syntax: JavaScript  |  size: 2.50 KB  |  views: 29  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /**
  2.  * Binds a loading layer effect to an ajax call
  3.  * @param  jqXHR        deferred the jqXHR object returned by an $.ajax() call
  4.  * @param  function     retry    function to call to re-lauch the request
  5.  * @return jQuery
  6.  */
  7. $.fn.ajaxWithEffect = function(deferred, retry)
  8. {
  9.         // Add effect layer
  10.         this.addEffectLayer({
  11.                 message: $.fn.ajaxWithEffect.defaults.message
  12.         });
  13.  
  14.         // Callbacks
  15.         deferred.done(function()
  16.         {
  17.                 // Get the effect layer
  18.                 var refElement = getNodeRefElement(this);
  19.                 var layer = $(refElement).next('.loading-mask');
  20.                 var span = layer.children('span');
  21.  
  22.                 // Remove effect layer
  23.                 layer.stop(true);
  24.                 span.stop(true);
  25.                 var currentMarginTop = parseInt(span.css('margin-top'));
  26.                 var marginTop = parseInt(span.css('margin-top', '').css('margin-top'));
  27.                 span.css({'marginTop':currentMarginTop+'px'}).animate({'opacity':0, 'marginTop':(marginTop-40)+'px'}, {
  28.                         'complete': function()
  29.                         {
  30.                                 layer.fadeAndRemove();
  31.                         }
  32.                 });
  33.         });
  34.         deferred.fail(function()
  35.         {
  36.                 // Get the effect layer
  37.                 var refElement = getNodeRefElement(this);
  38.                 var layer = $(refElement).next('.loading-mask');
  39.                 var span = layer.children('span');
  40.  
  41.                 // Error layer
  42.                 if (retry)
  43.                 {
  44.                         span.addClass('error').html($.fn.ajaxWithEffect.defaults.errorMessage+'<br><a href="#">'+$.fn.ajaxWithEffect.defaults.retry+'</a> / <a href="#">'+$.fn.ajaxWithEffect.defaults.cancel+'</a>');
  45.                         span.children('a:first').click(function(event)
  46.                         {
  47.                                 event.preventDefault();
  48.  
  49.                                 // Remove current layer
  50.                                 layer.stop(true).remove();
  51.  
  52.                                 // Relaunch request
  53.                                 retry();
  54.                         });
  55.                 }
  56.                 else
  57.                 {
  58.                         span.addClass('error').html($.fn.ajaxWithEffect.defaults.errorMessage+'<br><a href="#">'+$.fn.ajaxWithEffect.defaults.close+'</a>');
  59.                 }
  60.                 span.children('a:last').click(function(event)
  61.                 {
  62.                         event.preventDefault();
  63.  
  64.                         // Remove effect layer
  65.                         layer.stop(true);
  66.                         span.stop(true);
  67.                         var currentMarginTop = parseInt(span.css('margin-top'));
  68.                         var marginTop = parseInt(span.css('margin-top', '').css('margin-top'));
  69.                         span.css({'marginTop':currentMarginTop+'px'}).animate({'opacity':0, 'marginTop':(marginTop-40)+'px'}, {
  70.                                 'complete': function()
  71.                                 {
  72.                                         layer.fadeAndRemove();
  73.                                 }
  74.                         });
  75.                 });
  76.  
  77.                 // Centering
  78.                 span.css('margin-left', -Math.round(span.outerWidth()/2));
  79.         });
  80.  
  81.         return this;
  82. };
  83.  
  84. // Default texts for the loading effect layer
  85. $.fn.ajaxWithEffect.defaults = {
  86.         message: 'Loading...',
  87.         errorMessage: 'Error while loading',
  88.         retry: 'Retry',
  89.         cancel: 'Cancel',
  90.         close: 'Close'
  91. };
clone this paste RAW Paste Data