jQuery plugin to ensure the bottom toolbars are always visible in iOS7

ios7bottom.js

/**
 * ios7bottom
 *
 * Listen to changes in safari window size to ensure the position:fixed
 * elements are always visible.
 *
 * Usage
 *
 *   $('#toolbar').ios7bottom();
 */

(function($) {
  "use strict";

  // Store the browser version
  var iOS7 = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);

  // We are going to store the max `window.innerHeight` for each orientation.
  var heights = {};

  $.fn.ios7bottom = function() {

    // Don't do anything if we are not in iOS 7
    if (!iOS7) {
      return this;
    }

    return this.each(function () {
      var $this = $(this);
      if (!$this.data('ios7bottom')) {
        $this.data('ios7bottom', new IOS7Bottom(this));
      }
    });
  };



  function IOS7Bottom(element) {
    this.$ = $(element);
    this.original_bottom = parseInt(this.$.css('bottom'), 10);
    setInterval($.proxy(this.repositionElement, this), 500);
  }

  IOS7Bottom.prototype = {
    constructor: IOS7Bottom,

    repositionElement: function() {
      var current_height = window.innerHeight;

      // Set the maximum height for the current orientation. The first load has
      // the height with the toolbars so we need to update it when the user
      // scrolls.
      if (!heights[window.orientation] || heights[window.orientation] < current_height) {
        heights[window.orientation] = current_height;
      }

      // The height of the toolbar is maximum_height - window.innerHeigth. Move
      // the element those pixels up.
      this.$.css('bottom', this.original_bottom + ( heights[window.orientation] - current_height ));
    }
  };


})(jQuery);