cmegown

# June 24, 2013 at 5:16 pm

Hi everyone, I know my question title isn’t very clear so let me explain:

I’ve got a relatively simple responsive grid system done via an unordered list where each <li> is an individual tile containing a document thumbnail and a document title. Everything is done and everything works as needed, but I’ve got a problem I cannot solve with my fledgling skills in javascript. Some document thumbnails are landscape and some are portrait, and some document titles are long while others are short. This uncertainty can lead to <li> tiles of varying height, which can lead to gaps between tiles and rows in the “grid” system.

What I would like to try to do, is loop through every <li> and grab the height of the tallest one, then apply to all other <li> so that they all match. Also, since this is responsive, I need to continue to check and reapply as the viewport resizes.

Like I said my JS skills are lacking, but where I work this tool would be pretty valuable and would be a good exercise to expand my skills.

Thanks!

chrisburton

# June 24, 2013 at 5:23 pm

Why not just use masonry.js?

cmegown

# June 24, 2013 at 5:34 pm

Masonry is an option, but (from higher up the chain o’ command) the desired layout is square/even/equal/etc.

I think I could eventually convince them to use masonry, but this is as good an exercise in learning javascript as anything else anyway.

CrocoDillon

# June 24, 2013 at 5:59 pm

$(function() {
var items = $(‘li’); // cache list items
function resize() {
var maxHeight; // height of the tallest item
items.height(‘auto’); // reset height on items
items.each(function() { // iterate over items
var itemHeight = $(this).height(); // current item height
maxHeight = maxHeight > itemHeight ? maxHeight : itemHeight; // get new tallest height if needed
});
items.height(maxHeight); // set all items to tallest height
}
$(window).on(‘resize’, resize); // re-calculate on resize
resize(); // initial calculate
});

That should work :) Assuming you use jQuery…

TheDoc

# June 24, 2013 at 6:25 pm

No JS needed for what you want to do: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b

Good ol’ inline-block to the rescue.

cmegown

# June 25, 2013 at 11:07 am

@CrocoDillon Thanks for the snippet! I’ll find some time today to give that a go and report back here with the results.

@TheDoc I tried a layout similar to that from the start, but something I forgot to originally mention is that each tile needs to be entirely clickable/tap-able. Although nicely grid-like and easy, the layout you put together leaves large gaps of dead-space. Thanks though :) you’ve had an answer for pretty much every single question I’ve ever posted on here…keep up the great work!

TheDoc

# June 25, 2013 at 11:09 am

There’s a simple fix to that, but I’m on my phone at the moment. I’ll post it when I get to my desk.

TheDoc

# June 25, 2013 at 11:41 am

I’m not entirely sure where the dead spaces were to begin with, but here’s an example that has links covering the entire box: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b

cmegown

# June 28, 2013 at 3:12 pm

Sorry guys, got moved to a different project for a couple of days there so I had to put all of this on hold.

@CrocoDillon Your solution works perfectly! I had something similar to that, but was missing the height reset. You really saved my bacon today, and I appreciate the help!

@TheDoc Your pen, while not what I needed currently, actually helped me out with a different project of mine. So thank you for that as well!