Posted By

jbernus on 05/23/13


Tagged

javascript jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Priestd09


Equal height for list items


 / Published in: JavaScript
 

URL: http://stackoverflow.com/questions/5933144/script-that-makes-all-floating-divs-the-same-height

It's not mine, I just found it on stackoverflow

  1. // these are (ruh-roh) globals. You could wrap in an
  2. // immediately-Invoked Function Expression (IIFE) if you wanted to...
  3. var currentTallest = 0,
  4. currentRowStart = 0,
  5. rowDivs = new Array();
  6.  
  7. function setConformingHeight(el, newHeight) {
  8. // set the height to something new, but remember the original height in case things change
  9. el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
  10. el.height(newHeight);
  11. }
  12.  
  13. function getOriginalHeight(el) {
  14. // if the height has changed, send the originalHeight
  15. return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
  16. }
  17.  
  18. function columnConform() {
  19.  
  20. // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
  21. $('.hb').each(function(){
  22. var $el = $(this);
  23.  
  24. var topPosition = $el.position().top;
  25.  
  26. if(currentRowStart != topPosition){
  27.  
  28. // we just came to a new row. Set all the heights on the completed row
  29. for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
  30.  
  31. // set the variables for the new row
  32. rowDivs.length = 0; // empty the array
  33. currentRowStart = topPosition;
  34. currentTallest = getOriginalHeight($el);
  35. rowDivs.push($el);
  36.  
  37. }else{
  38. // another div on the current row. Add it to the list and check if it's taller
  39. rowDivs.push($el);
  40. currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
  41. }
  42. // do the last row
  43. for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
  44. });
  45. }
  46.  
  47. $(window).resize(function() {
  48. columnConform();
  49. });
  50.  
  51. columnConform();

Report this snippet  

You need to login to post a comment.