Ensure the shuffle container has css styles it needs applied to it #26

dist/jquery.shuffle.js

@@ -313,13 +313,11 @@ Shuffle.prototype._init = function() {
   $window.on('resize.' + SHUFFLE + '.' + this.unique, this._getResizeFunction());
 
   // Get container css all in one request. Causes reflow
-  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position']);
+  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position', 'overflow']);
   var containerWidth = Shuffle._getOuterWidth( this.element );
 
-  // Position cannot be static.
-  if ( containerCSS.position === 'static' ) {
-    this.element.style.position = 'relative';
-  }
+  // Add styles to the container if it doesn't have them.
+  this._validateStyles(containerCSS);
 
   // Get offset from container
   this.offset = {
@@ -344,6 +342,7 @@ Shuffle.prototype._init = function() {
   }
 };
 
+
 /**
  * Returns a throttled and proxied function for the resize handler.
  * @return {Function}
@@ -382,6 +381,24 @@ Shuffle.prototype._getElementOption = function( option ) {
 };
 
 
+/**
+ * Ensures the shuffle container has the css styles it needs applied to it.
+ * @param {Object} styles Key value pairs for position and overflow.
+ * @private
+ */
+Shuffle.prototype._validateStyles = function(styles) {
+  // Position cannot be static.
+  if ( styles.position === 'static' ) {
+    this.element.style.position = 'relative';
+  }
+
+  // Overflow has to be hidden
+  if ( styles.overflow !== 'hidden' ) {
+    this.element.style.overflow = 'hidden';
+  }
+};
+
+
 /**
  * Filter the elements by a category.
  * @param {string} [category] Category to filter by. If it's given, the last
@@ -389,6 +406,7 @@ Shuffle.prototype._getElementOption = function( option ) {
  * @param {ArrayLike} [$collection] Optionally filter a collection. Defaults to
  *     all the items.
  * @return {jQuery} Filtered items.
+ * @private
  */
 Shuffle.prototype._filter = function( category, $collection ) {
   category = category || this.lastFilter;

dist/jquery.shuffle.modernizr.js

@@ -319,13 +319,11 @@ Shuffle.prototype._init = function() {
   $window.on('resize.' + SHUFFLE + '.' + this.unique, this._getResizeFunction());
 
   // Get container css all in one request. Causes reflow
-  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position']);
+  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position', 'overflow']);
   var containerWidth = Shuffle._getOuterWidth( this.element );
 
-  // Position cannot be static.
-  if ( containerCSS.position === 'static' ) {
-    this.element.style.position = 'relative';
-  }
+  // Add styles to the container if it doesn't have them.
+  this._validateStyles(containerCSS);
 
   // Get offset from container
   this.offset = {
@@ -350,6 +348,7 @@ Shuffle.prototype._init = function() {
   }
 };
 
+
 /**
  * Returns a throttled and proxied function for the resize handler.
  * @return {Function}
@@ -388,6 +387,24 @@ Shuffle.prototype._getElementOption = function( option ) {
 };
 
 
+/**
+ * Ensures the shuffle container has the css styles it needs applied to it.
+ * @param {Object} styles Key value pairs for position and overflow.
+ * @private
+ */
+Shuffle.prototype._validateStyles = function(styles) {
+  // Position cannot be static.
+  if ( styles.position === 'static' ) {
+    this.element.style.position = 'relative';
+  }
+
+  // Overflow has to be hidden
+  if ( styles.overflow !== 'hidden' ) {
+    this.element.style.overflow = 'hidden';
+  }
+};
+
+
 /**
  * Filter the elements by a category.
  * @param {string} [category] Category to filter by. If it's given, the last
@@ -395,6 +412,7 @@ Shuffle.prototype._getElementOption = function( option ) {
  * @param {ArrayLike} [$collection] Optionally filter a collection. Defaults to
  *     all the items.
  * @return {jQuery} Filtered items.
+ * @private
  */
 Shuffle.prototype._filter = function( category, $collection ) {
   category = category || this.lastFilter;

src/shuffle.js

@@ -296,13 +296,11 @@ Shuffle.prototype._init = function() {
   $window.on('resize.' + SHUFFLE + '.' + this.unique, this._getResizeFunction());
 
   // Get container css all in one request. Causes reflow
-  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position']);
+  var containerCSS = this.$el.css(['paddingLeft', 'paddingRight', 'position', 'overflow']);
   var containerWidth = Shuffle._getOuterWidth( this.element );
 
-  // Position cannot be static.
-  if ( containerCSS.position === 'static' ) {
-    this.element.style.position = 'relative';
-  }
+  // Add styles to the container if it doesn't have them.
+  this._validateStyles(containerCSS);
 
   // Get offset from container
   this.offset = {
@@ -327,6 +325,7 @@ Shuffle.prototype._init = function() {
   }
 };
 
+
 /**
  * Returns a throttled and proxied function for the resize handler.
  * @return {Function}
@@ -365,6 +364,24 @@ Shuffle.prototype._getElementOption = function( option ) {
 };
 
 
+/**
+ * Ensures the shuffle container has the css styles it needs applied to it.
+ * @param {Object} styles Key value pairs for position and overflow.
+ * @private
+ */
+Shuffle.prototype._validateStyles = function(styles) {
+  // Position cannot be static.
+  if ( styles.position === 'static' ) {
+    this.element.style.position = 'relative';
+  }
+
+  // Overflow has to be hidden
+  if ( styles.overflow !== 'hidden' ) {
+    this.element.style.overflow = 'hidden';
+  }
+};
+
+
 /**
  * Filter the elements by a category.
  * @param {string} [category] Category to filter by. If it's given, the last
@@ -372,6 +389,7 @@ Shuffle.prototype._getElementOption = function( option ) {
  * @param {ArrayLike} [$collection] Optionally filter a collection. Defaults to
  *     all the items.
  * @return {jQuery} Filtered items.
+ * @private
  */
 Shuffle.prototype._filter = function( category, $collection ) {
   category = category || this.lastFilter;

test/specs.js

@@ -59,7 +59,8 @@ describe('Shuffle.js', function() {
       expect(shuffle.$el).toHaveClass('shuffle');
       expect(shuffle.$items).toHaveClass('shuffle-item filtered');
       expect(shuffle.$el).toHaveCss({
-        position: 'relative'
+        position: 'relative',
+        overflow: 'hidden'
       });
       expect(shuffle.$items).toHaveCss({
         opacity: '1',