src & docs : add containerStyle option

fix iteration but in ._destroy()

v1.5.14

_posts/docs/2010-12-03-options.mdown

@@ -8,6 +8,7 @@ toc:
   - { title: animationEngine, anchor: animationengine }
   - { title: animationOptions, anchor: animationoptions }
   - { title: containerClass, anchor: containerclass }
+  - { title: containerStyle, anchor: containerstyle }
   - { title: filter, anchor: filter }
   - { title: getSortData, anchor: getsortdata }
   - { title: hiddenClass, anchor: hiddenclass }
@@ -84,6 +85,16 @@ $('#container').isotope({
 
 The class applied to the container element.
 
+## containerStyle
+
+<dl class="clearfix">
+  <dt><code>containerStyle</code></dt>
+  <dd class="option-type">Object</dd>
+  <dd class="default"><code>{ position: <span class="s1">'relative'</span>, overflow: <span class="s1">'hidden'</span> }</code></dd>
+</dl>
+
+CSS styles applied to the container element. Relative positioning enables absolute positioning on child items. Hidden overflow ensures that filtered items that lie outside the container do not interfer with subsequent content.
+
 ## filter
 
 <dl class="clearfix">

jquery.isotope.js

@@ -1,5 +1,5 @@
 /**
- * Isotope v1.5.13
+ * Isotope v1.5.14
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -322,7 +322,7 @@
   };
   
   // styles of container element we want to keep track of
-  var isoContainerStyles = [ 'overflow', 'position', 'width', 'height' ];
+  var isoContainerStyles = [ 'width', 'height' ];
 
   var $window = $(window);
 
@@ -334,6 +334,10 @@
     hiddenClass : 'isotope-hidden',
     hiddenStyle: { opacity: 0, scale: 0.001 },
     visibleStyle: { opacity: 1, scale: 1 },
+    containerStyle: {
+      position: 'relative',
+      overflow: 'hidden'
+    },
     animationEngine: 'best-available',
     animationOptions: {
       queue: false,
@@ -359,15 +363,17 @@
       // get original styles in case we re-apply them in .destroy()
       var elemStyle = this.element[0].style;
       this.originalStyle = {};
-      for ( var i=0, len = isoContainerStyles.length; i < len; i++ ) {
+      // keep track of container styles
-        var prop = isoContainerStyles[i];
+      var containerStyles = isoContainerStyles.slice(0);
+      for ( var prop in this.options.containerStyle ) {
+        containerStyles.push( prop );
+      }
+      for ( var i=0, len = containerStyles.length; i < len; i++ ) {
+        prop = containerStyles[i];
         this.originalStyle[ prop ] = elemStyle[ prop ] || '';
       }
-      
+      // apply container style from options
-      this.element.css({
+      this.element.css( this.options.containerStyle );
-        overflow : 'hidden',
-        position : 'relative'
-      });
       
       this._updateAnimationEngine();
       this._updateUsingTransforms();
@@ -848,8 +854,7 @@
       
       // re-apply saved container styles
       var elemStyle = this.element[0].style;
-      for ( var i=0, len = isoContainerStyles.length; i < len; i++ ) {
+      for ( var prop in this.originalStyle ) {
-        var prop = isoContainerStyles[i];
         elemStyle[ prop ] = this.originalStyle[ prop ];
       }