Advertisement
Guest User

Untitled

a guest
Sep 12th, 2013
299
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Make filtering div appear to float to the right of the results div
  2. $('#filters').custFloat({width_guide_id: 'filters-width-guide', height_guide_el: '#results'});    
  3.  
  4. // Custom float (note: relies on underscore.js for throttling and debounce)
  5. (function ($, _) {
  6.     $.fn.custFloat = function (options) {
  7.         var opts = _.extend({
  8.                 width_guide_id: 'float-width-guide', // Should be a valid id string
  9.                 height_guide_el: 'body', // Should be a jquery selector
  10.                 pin_boundary_adjust_offset: 0,
  11.                 outer_height_adjust_offset: 100,
  12.                 scroll_throttle_ms: 15,
  13.                 debounce_timer_ms: 25
  14.             }, options);
  15.  
  16.         return this.each(function () {
  17.             var $this               = $(this),
  18.                 $parent             = $this.offsetParent(),
  19.                 $window             = $(window),
  20.                 $width_guide_el     = $('<div id=' + opts.width_guide_id + '></div>').insertBefore($this),
  21.                 top                 = Math.floor($this.offset().top - parseFloat($this.css('marginTop').replace(/auto/, 0))),
  22.                 floating            = false,
  23.                 pinned              = false,
  24.  
  25.                 scroll = function() {
  26.                     var y                   = $window.scrollTop(),
  27.                         height              = $this.outerHeight(true) + opts.outer_height_adjust_offset;
  28.                         parent_height       = $parent.height(),
  29.                         available_height    = $(opts.height_guide_el).height(),
  30.                         parent_top_offset   = $parent.offset().top,
  31.                         pin_boundary        = Math.ceil(parent_top_offset + parent_height - height - opts.pin_boundary_adjust_offset);
  32.  
  33.                     if (height < available_height) {
  34.                         if ((y >= top) && (y < pin_boundary) && (floating === false) && (pinned === false)) {
  35.                             floatIt();
  36.                         } else if ((y >= pin_boundary) && (pinned === false)) {
  37.                             pinIt();
  38.                         } else if ((y < pin_boundary) && (pinned)) {
  39.                             floatIt();
  40.                         } else if ((y < top) && (floating)) {
  41.                             restoreIt();
  42.                         } else {
  43.                             // Noop
  44.                         }
  45.                     } else {
  46.                         restoreIt();
  47.                     }
  48.                 },
  49.  
  50.                 resize = function() {
  51.                     var width = $width_guide_el.width();
  52.                     $this.css({width: width});
  53.                 };
  54.  
  55.             function floatIt() {
  56.                 var width = $width_guide_el.width();
  57.  
  58.                 floating = true;
  59.                 pinned = false;
  60.  
  61.                 $this.css({
  62.                     position: 'fixed',
  63.                     top: 0,
  64.                     pin_boundary: '',
  65.                     width: width
  66.                 });            
  67.             }
  68.  
  69.             function pinIt() {
  70.                 var width = $width_guide_el.width(),
  71.                     height = $this.outerHeight(true) + opts.outer_height_adjust_offset;
  72.  
  73.                 pinned = true;
  74.                 floating = false;
  75.  
  76.                 $this.css({
  77.                     position: 'absolute',
  78.                     top: $parent.height() - height - opts.pin_boundary_adjust_offset,
  79.                     pin_boundary: '',
  80.                     width: width
  81.                 });
  82.             }
  83.  
  84.             function restoreIt() {
  85.                 floating = false;
  86.                 pinned = false;
  87.  
  88.                 $this.css({
  89.                     position: '',
  90.                     top: '',
  91.                     pin_boundary: '',
  92.                     width: ''
  93.                 });
  94.             }
  95.  
  96.             $window.scroll(_.throttle(scroll, opts.scroll_throttle_ms));
  97.             $window.resize(_.debounce(resize, opts.debounce_timer_ms));            
  98.  
  99.         });
  100.     };
  101. })(jQuery, _);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement