Having a strange issue with the website I'm currently working on and can't seem to figure out what's causing it. Something is definitely off with my javascript, but I just can't pinpoint the exact problem.
Here's the situation:
I have multiple rows of divs that are aligned left and adjust their height based on the container using jQuery. The problem arises when I directly visit the page - all the containers shrink and cut off some of their content. However, if I navigate back to the homepage and then return to the problematic page, everything displays correctly.
Refer to the images below
Incorrect display on the page initially:
Return to the homepage and revisit the specific page
Now displaying correctly:
Below is the Javascript code I'm using:
$(document).ready(function() {
var pageWidth = $(window).width();
if (pageWidth >= 1048) {
(function($) {
$.fn.eqHeights = function() {
var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function() {
el.eqHeights();
});
el.data('eqHeights', true);
}
return el.each(function() {
var curHighest = 0;
$(this).children().each(function() {
var el = $(this),
elHeight = el.height('auto').height()-3;
if (elHeight > curHighest) {
curHighest = elHeight;
}
}).height(curHighest);
});
};
$('.section').eqHeights();
}(jQuery));
};
});
And here is the HTML and CSS code:
<!--1 Column Photo-->
<div class="section group content">
<div class="col span_12_of_12">
<img src="images/placeholder_1col.jpg" alt=""/>
</div>
</div>
<!--More HTML and CSS code goes here...-->
Hopefully this sheds some light on the issue. Any help would be greatly appreciated!