0

I wrote a jQuery script which keeps two images side by the same height. It needs to work on document load and document resize as the images are responsive.

I thought this woas the best solution (code below), but it only works when I resize the browser?

function projectRowHeight() {
    var rowHeight = $('#projects').find('.col-33 img').height();
  $('#projects').find('.row').css('height', rowHeight);
}

$(document).ready(projectRowHeight);
$(window).resize(projectRowHeight);
Jordan
  • 237
  • 7
  • 21

1 Answers1

0

Use $(window).load(projectRowHeight);

Andi N. Dirgantara
  • 2,050
  • 13
  • 20
  • 1
    Do you have an explanation for why it doesn't work in `ready()`? – Barmar Oct 23 '14 at 05:39
  • @Barmar I looked through [docs](http://api.jquery.com/load-event/) and still not sure: will `$(document).load` fire at the same time as `$(window).load`? – Regent Oct 23 '14 at 05:41
  • Maybe this can help http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – Andi N. Dirgantara Oct 23 '14 at 05:42
  • 1
    @Barmar Because with `document.ready` image dimensions are not resolved in time. – dfsq Oct 23 '14 at 05:43
  • @dfsq I suppose Barmar knows the difference :) The problem is that there is no explanation in answer. – Regent Oct 23 '14 at 05:44