src & docs : add containerStyle option

fix iteration but in ._destroy() v1.5.14
trafnar · Mar 7, 2012 · f29b8b0 · f29b8b0
1 parent 14632a1
commit f29b8b0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/_posts/docs/2010-12-03-options.mdown b/_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">

diff --git a/jquery.isotope.js b/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++ ) {
-        var prop = isoContainerStyles[i];
+      // keep track of container styles
+      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 ] || '';
       }
-
-      this.element.css({
-        overflow : 'hidden',
-        position : 'relative'
-      });
+      // apply container style from options
+      this.element.css( this.options.containerStyle );
 
       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++ ) {
-        var prop = isoContainerStyles[i];
+      for ( var prop in this.originalStyle ) {
         elemStyle[ prop ] = this.originalStyle[ prop ];
       }