1

I have a function that I wrote basically as below:

  function getListHeight() {

    $(".tur-list .col-lg-5 figure img").each(function() {
        var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
        var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
        if (getTurHeight > getLeftHeight) {
            $(this).outerHeight(getTurHeight);
        }
    });
}

to make equal my columns and it works as I wanted so there is nothing to here. my problem is this code is not working on my .js file but if I copy and paste it console my code is working so if you try you will see

Please click to my real demo

and copy getListHeight(); and paste it on console you will see my columns will be equal my question is why my code is not working properly in .js file ? what I have to do to work my code ?

and my getListHeight() function is work with $(window).resize when I resize the window or with click event but my function is not working in document.ready.

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • call it on window load, instead of (or in addition of) document ready – Mohit Bhardwaj Jun 15 '17 at 12:14
  • 2
    Synchronisation issue ? Could this be because when document.ready() event fires there are images that have not yet been loaded? The symptom you describe where the function works on resize() event after full load would suggest that document.ready() has not got all the elements yet. Document.ready() does not wait for images to be loaded I think. – Vanquished Wombat Jun 15 '17 at 12:14
  • @Mohit Bhardwaj than it loaded lately so this is not what I want..@Vanquished Wombat so what I have to do how will I change my code ? – ani_css Jun 15 '17 at 12:16

1 Answers1

1

its not working because the images are not loaded yet, the image tag is there but the size is not set yet because the image is still being loaded.

i'd change the code to the following:

function matchSize() {
  var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
  var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
  if (getTurHeight > getLeftHeight) {
    $(this).outerHeight(getTurHeight);
  }
}
function onResize() {
  $(".tur-list .col-lg-5 figure img").each(matchSize);
}
function getListHeight() {
  $(".tur-list .col-lg-5 figure img").load(matchSize);
}

$(document).ready(function(){
  getListHeight();
  $(document).on('resize', onResize)
  onResize()
});

this will work on resize, on newly loaded images, and on previously loaded images before javascript kicks in (cached images probably).

here is a link to the codepen fork: https://codepen.io/Bamieh/pen/gRLPqm

P.S. i do recommend that you do not rely on the col-* classes as a selector, since the code will easily break as soon as you change your styles, using data-* attributes for selection is the way to go in my opinion.

Bamieh
  • 10,358
  • 4
  • 31
  • 52
  • thank you I tried on codepen but didn't work for example: https://codepen.io/cowardguy/pen/qjqbMW – ani_css Jun 15 '17 at 12:18
  • thanks for having it on codepen! i'll update the answer in a second – Bamieh Jun 15 '17 at 12:19
  • @ani_css check the answer now – Bamieh Jun 15 '17 at 12:29
  • 1
    Cuation @ani_css If you are calling your function on window,resize event then you will want to debounce it. [See this SO question](https://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac) – Vanquished Wombat Jun 15 '17 at 20:24