{"id":324,"date":"2013-01-23T16:46:02","date_gmt":"2013-01-23T22:46:02","guid":{"rendered":"http:\/\/www.marcblase.com\/blog\/?p=324"},"modified":"2013-01-23T16:47:31","modified_gmt":"2013-01-23T22:47:31","slug":"normalize-row-height-with-javascript","status":"publish","type":"post","link":"https:\/\/ma.rcbla.se\/blog\/2013\/01\/normalize-row-height-with-javascript\/","title":{"rendered":"Normalize container height by row with javascript"},"content":{"rendered":"<p>I&#8217;ve been using a few methods to normalize container heights with javascript, but <a href=\"http:\/\/css-tricks.com\/equal-height-blocks-in-rows\/\">this one<\/a> does that on a row-by-row basis. Since RWD is all the rage, this seems a pretty nifty solution. Here&#8217;s the code:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar currentTallest = 0,\r\n     currentRowStart = 0,\r\n     rowDivs = new Array(),\r\n     $el,\r\n     topPosition = 0;\r\n\r\n $('.blocks').each(function() {\r\n\r\n   $el = $(this);\r\n   topPostion = $el.position().top;\r\n   \r\n   if (currentRowStart != topPostion) {\r\n\r\n     \/\/ we just came to a new row.  Set all the heights on the completed row\r\n     for (currentDiv = 0 ; currentDiv &lt; rowDivs.length ; currentDiv++) {\r\n       rowDivs&#x5B;currentDiv].height(currentTallest);\r\n     }\r\n\r\n     \/\/ set the variables for the new row\r\n     rowDivs.length = 0; \/\/ empty the array\r\n     currentRowStart = topPostion;\r\n     currentTallest = $el.height();\r\n     rowDivs.push($el);\r\n\r\n   } else {\r\n\r\n     \/\/ another div on the current row.  Add it to the list and check if it's taller\r\n     rowDivs.push($el);\r\n     currentTallest = (currentTallest &lt; $el.height()) ? ($el.height()) : (currentTallest);\r\n\r\n  }\r\n   \r\n  \/\/ do the last row\r\n   for (currentDiv = 0 ; currentDiv &lt; rowDivs.length ; currentDiv++) {\r\n     rowDivs&#x5B;currentDiv].height(currentTallest);\r\n   }\r\n   \r\n });\r\n<\/pre>\n<p><code>$('.blocks')<\/code> would be changed to use whatever CSS selector you need to equalize.<\/p>\n<p><small>Thanks <a href=\"http:\/\/css-tricks.com\/equal-height-blocks-in-rows\/\">CHRIS COYIER<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been using a few methods to normalize container heights with javascript, but this one does that on a row-by-row basis. Since RWD is all the rage, this seems a pretty nifty solution. Here&#8217;s the code: var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $(&#8216;.blocks&#8217;).each(function() { $el = [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,3],"tags":[],"class_list":["post-324","post","type-post","status-publish","format-standard","hentry","category-coding","category-discoveries"],"_links":{"self":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":3,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/posts\/324\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/media?parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/categories?post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ma.rcbla.se\/blog\/wp-json\/wp\/v2\/tags?post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}