Check out this list of products for an example:
I have a function that is triggered on document ready which goes through each item in the list and adjusts the height of a span wrapping the image to ensure uniform spacing.
My question is, is it possible for the function to detect when a new "row" starts so that the spans display correctly on the first row with appropriate sizes based on the first two items, but switch to the actual image height for single entry rows?
The function currently also sets the height of the LI elements and I might modify it to handle row-based sizing if there's a viable solution.
Here is the function used to calculate the height:
if ( jQuery('.product_list').length ) {
var tallest = 0;
var tallest_img = 0;
jQuery('.product_list li').each( function() {
if ( jQuery(this).height() > tallest ) {
tallest = jQuery(this).height();
}
if ( jQuery(this).children('a').children('span').children('img').height() > tallest_img ) {
tallest_img = jQuery(this).children('a').children('span').children('img').height();
}
});
jQuery('.product_list li').height( tallest );
jQuery('.product_list li span').height( tallest_img );
}
Any insights or suggestions would be greatly appreciated! Thanks!