resources/jquery/jquery.footHovzer.js

   1 /**
   2  * Utility to stack stuff in an overlay fixed on the bottom of the page.
   3  *
   4  * Usage:
   5  * <code>
   6  *     var hovzer = $.getFootHovzer();
   7  *     hovzer.$.append( $myCollection );
   8  *     hovzer.update();
   9  * </code>
  10  *
  11  * @author Timo Tijhof, 2012
  12  */
  13 ( function ( $ ) {
  14         var $hovzer, footHovzer, prevHeight, newHeight;
  15
  16         function getHovzer() {
  17                 if ( $hovzer === undefined ) {
  18                         $hovzer = $( '<div id="jquery-foot-hovzer"></div>' ).appendTo( 'body' );
  19                 }
  20                 return $hovzer;
  21         }
  22
  23         footHovzer = {
  24                 update: function () {
  25                         var $body, winTop;
  26
  27                         $body = $( 'body' );
  28                         if ( prevHeight === undefined ) {
  29                                 prevHeight = getHovzer().outerHeight( /*includeMargin=*/true );
  30                                 $body.css( 'paddingBottom', '+=' + prevHeight + 'px' );
  31                         } else {
  32                                 newHeight = getHovzer().outerHeight( true );
  33                                 $body.css( 'paddingBottom', ( parseFloat( $body.css( 'paddingBottom' ) ) - prevHeight ) + newHeight );
  34                                 // Update scroll so that page stays focusses on same area
  35                                 winTop = $(window).scrollTop();
  36                                 if ( $(document).height() - $(window).height() > winTop ) {
  37                                         $(window).scrollTop( winTop + ( newHeight - prevHeight ) );
  38                                 }
  39
  40                                 prevHeight = newHeight;
  41                         }
  42                 }
  43         };
  44
  45         $.getFootHovzer = function () {
  46                 footHovzer.$ = getHovzer();
  47                 return footHovzer;
  48         };
  49
  50 }( jQuery ) );