jquery.loadPage.js

/*
  jQuery plugin for dynamically loading pages

  $("#pageHolder").loadPage({
    file: 'index.html',
    effect: 'slide|fade',
    duration: 1000
  }).then(function() {
    // done loading, this = $(html)
  }, function(error) {
    // loading failed, error = error object
  });

 */


$(function() {

  $.fn.loadPage = function( props, callback ) {

    var _self = $(this);

    var config = $.extend({
      file: 'page.html',
      effect: 'slide',
      duration: 1000
    }, props);

    var effect = function() {
      return {
        in: config.effect + 'In',
        out: config.effect + 'Out'
      };
    }();

    return new Promise(function(resolve, reject) {

      $.load(config.file, function(html) {

        _self[effect.out](config.duration, function() {
          _self.html(html);
          _self[effect.in](config.duration, function() {
            resolve.apply(html);
          });
        });

      }, function(err) {

        reject(err);
        
      });

    });

  }

});