Search code examples
javascriptjqueryhtmlcssouterwidth

.outerWidth() returning different widths with different viewport sizes

I have a horizontally scrolling gallery of images. The <div> which contains all of the images has its width generated dynamically by summing up the outerWidths of all the children.

Here is how the gallery is set up: 

<div class="categoryImageArea">       
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/test-1'">
		<img src="http://localhost/kitkittle/uploads/images/full/58172669e54ea075971494d6293444f5.jpg"><br> 
		<h3>Half Bubble -  $50.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-mitosis'">
		<img src="http://localhost/kitkittle/uploads/images/full/23aacfda65e43671bede87bc18902b81.jpg"><br> 
		<h3>Bubble Mitosis -  $300.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water'">
		<img src="http://localhost/kitkittle/uploads/images/full/1e2dc5352f831ebacd3ccbb7a9b4717a.jpg"><br> 
		<h3>Bubble on Water -  $10.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/bubble-on-water1'">
		<img src="http://localhost/kitkittle/uploads/images/full/69f7b2c3b640444dd5a23c3037c3cc84.jpg"><br> 
		<h3>Bubble on Ocean -  $210.00</h3> 
	</div>
	<div class="categoryImage" onclick="window.location = 'http://localhost/kitkittle/product/swimming-bubbles'">
		<img src="http://localhost/kitkittle/uploads/images/full/2d66a56b9f51f29ad5c6f58c82b2ab39.jpg"><br> 
		<h3>Swimming Bubbles -  $0.00</h3> 
	</div>
</div>

The width of categoryImageArea is generated using the following function:

function change(){
	if($(window).width() > 768){ 
		var width = 0; 
		$('.categoryImage').each(function(index, element){ 
			width += $(element).outerWidth(true); 
		}); 
		$('.categoryImageArea').width(width); 
	}
	else{ 
		$('.categoryImageArea').width('100%'); 
	} 
}

When my browser window is maximized (1900 x 1280), this works great: enter image description here

enter image description here

However, when my browser window is half the size, it does not work. (sorry, the screenshot is hard to see -- the last two are pushed to the next line). enter image description here

I was perplexed about why this would be, so I made the JQuery change() function (above) alert the value of width as it adds values to it in both cases. It's strange.

  • Large viewport (good): 0 > 984 > 1969 > 2953 > 3937 > 4921
  • Half viewport (bad): 0 > 656 > 1312 > 1968 > 2624 > 3280

So my question is: what on earth is making the value of $(element).outerWidth(true) SO different just because my browser viewport is different?

For reference, the styles being applied to categoryImage are: 

.categoryImage {
    display: inline-block;
    margin: 2em;
    position: relative;
    cursor: pointer;
}

Solution

  • I figured out the problem. For whatever reason, img { max-width: 100%; } was altering the value of the outerWidth(); (only in certain instances). To fix the issue, I set .categoryImage img{ max-width: none; } and that solved the weird problems I was having!