CODEWITHSUNDEEP
javascriptjquery
amylynn83
amylynn83

Reputation: 187

jQuery not consistently resizing divs - Equal height divs

On my page, I have 6 divs set up in two rows of three. I'm using a jQuery function to give them a height so that they are always the height of the div with the tallest content. When I load the page, sometimes this works, and sometimes it doesn't. Most of the time, it doesn't and the divs will be shorter than their content. Sometimes when I hit refresh, they will extend to be the height of the tallest div. I'm not sure what could be causing this. The function is inside of the document ready.

I should note that the jQuery function works on my local document consistently but not in GitHub.

Here is the site: http://amykirst.github.io/portfolio/

The divs are under "View My Work".

Here is the jquery:

$(document).ready(function() {
  // alert("document is ready!");
  applyHeight();
  $('.menu-toggle').click(function(e) {
    $('.menu').toggleClass('open');
    e.preventDefault();
  });
  $(window).on('resize', function() {
    applyHeight();
  });
}); // End document ready

// size samples to equal heights

// function to determine the tallest element
function equalHeight(block) {
  // Set tallest height to 0
  var tallest = 0;
  // Iterate over each block
  block.each(function() {
    // Creates variable and stores height for current element
    var thisHeight = $(this).height();
    // If current element's height is greater than 0 (or the tallest),      then it becomes the tallest
    if (thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
   // Sets all block heights to the height of the tallest element
  block.height(tallest);
}

// function to apply equal heights
function applyHeight() {
  // If the sample is 300px wide run equal height function
  if ($(".sample").css("width") == "300px") {
    equalHeight($(".sample"));
    // If the sample is not 300px wide, set height to auto
  } else {
    $(".sample").css("height", "auto");
  }
}

Upvotes: 0

Views: 461

Answers (3)

Manoj Babu Balaraman
Manoj Babu Balaraman

Reputation: 217

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

Upvotes: 0

dm4web
dm4web

Reputation: 4652

$(window).load(function() { applyHeight(); });

EDIT:

  • $(window).load() - fired after content loaded, including images.

  • After images load, then you can count height

Upvotes: 0

Scimonster
Scimonster

Reputation: 33409

$(document).ready() fires as soon as the DOM is loaded, even if images aren't. For this, you'll need to wait until all of the content is loaded. $(window).load() does that:

$(window).load(applyHeight);

(I pass the applyHeight function as the parameter for simplicity.)

Upvotes: 1

Related Questions