Member Avatar for skald89

I want to compare two images side by side. I am trying to grab and store the heights of the first column, to apply the heights to the corresponding image in the other column.

Right now I can only get it to either get the first height or all of the height combined.

http://jsfiddle.net/F34Ex/

<div id="project">          

    <ul id="new">
        <li> <img src="#" />New 1 </li>
        <li> <img src="#" />New 2 </li>
        <li> <img src="#" />New 3 </li>
        <li> <img src="#" />New 4 </li>
        <li> <img src="#" />New 5 </li>
    </ul>


    <ul id="old">
        <li> <img src="#" />Old 1 </li>
        <li> <img src="#" />Old 2 </li>
        <li> <img src="#" />Old 3 </li>
        <li> <img src="#" />Old 4 </li>
    </ul>
 </div>

Jquery to collect heights of ('#new li') and to display the height after the image in ('#old li'). I know that I have to change .append() to .css('height', theHeight)

   $(function () {
    $('#new li').each(function() {
        theHeight = $(this).height();

            $('#old li').each(function() {
            $(this).append(theHeight + ' ');
        });
    });
});
  • 2 Contributors
  • 1 Reply
  • 119 Views
  • 37 Minutes Discussion Span
  • Latest Post Latest Post by rtrethewey

Dani AI

Generated

Quick summary: the usual cause here is measuring heights before images finish loading and then applying that measurement to every element instead of the matching one. Reworking the markup so each pair is in the same row is the cleanest fix (as suggested) because modern CSS (Flexbox/Grid) can then align tops without JS and you avoid visual jumps. If you must keep two separate ULs, measure and apply per-index after images have loaded.

If keeping the two-column markup, run this after images are loaded and set the container height rather than forcing image dimensions (so aspect ratios are preserved):

$(window).on('load', function() {
  $('#new li').each(function(i) {
    var h = $(this).outerHeight();          // includes padding
    var $other = $('#old li').eq(i);       // matching index
    if ($other.length) {
      $other.css('min-height', h + 'px');  // preserve image aspect ratio
    }
  });
});

Notes and troubleshooting

  • Use $(window).on('load', ...) (not $(document).ready) so images have real heights. Place real src or width/height attributes — src="#" will not load and yields bad measurements.
  • outerHeight() accounts for padding; min-height avoids squeezing content smaller than measured. Change to height only if you want exact forcing.
  • If lists have different lengths, check .eq(i) exists (shown above).
  • Prefer the markup-change + CSS route for performance and no layout flicker: put each pair in a row and use display: grid or display: flex with align-items: start. Also consider adding width/height attributes or aspect-ratio to images to reserve space and prevent reflow.
  • If images are lazy-loaded, hook into their load callbacks or re-run the sizing after each load.
Member Avatar for rtrethewey

All I have is the kind of answer that nobody likes, but I'd be inclined to either set a fixed height on the <li> elements and a max-height on the <img>s with CSS, or change the HTML so that each matching <img> from both lists is displayed in a separate block-level element. Something like:

<div><img src="list1_1"><img src="list2_1"></div>
<div><img src="list1_2"><img src="list2_2"></div>
<div><img src="list1_3"><img src="list2_3"></div>
<div><img src="list1_4"><img src="list2_4"></div>
<div><img src="list1_5"><img src="list2_5"></div>

I'd just be concerned that using JavaScript to re-align the images after they've loaded is going to cause the display to jump as the code is processed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.