I've encountered an issue with my javascript snippet that usually creates divs of equal height, but now it only works after refreshing the page. Here's an example:
<div class="container">
<div class="row text-center">
<%= link_to "http://www.manlyartofbbq.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: Manly Art of BBQ</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_mab.png', class: "portfolio-image" %>
<p><a href="www.manlyartofbbq.com">The Manly Art of BBQ</a> is a humorous website that gives information on a variety of "manly" topics.</p>
<p><strong>This site has a vast array of user-submitted content sorted in a Reddit-like fashion, as well as a few online "tools" that were a lot of fun to develop.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
<%= link_to "http://www.ocoutreach.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: OC Outreach</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_oco.png', class: "portfolio-image" %>
<p><a href="www.ocoutreach.com">OC Outreach</a> is a non-profit community organization that operates in the Orange County area.</p>
<p><strong>This was a fairly simple site functionality-wise, but it was cool to design every aspect of a site (logos, design, etc.) from the ground up.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
</div> <!-- row -->
</div> <!-- page container -->
<script>
$( document ).ready(function() {
var heights = $(".site-preview-box").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".site-preview-box").height(maxHeight);
window.onresize = function(){ location.reload(); }
});
</script>
Rather than getting uniform divs, I initially see this odd result:
https://i.sstatic.net/1vw7G.png
Only after refreshing does it finally display correctly like this:
https://i.sstatic.net/F248X.png
Any suggestions on how to make it work without having to refresh?
ADDITIONAL INFO
I tried different approaches suggested elsewhere, such as changing load for ready, but they didn't solve my specific issue.