Javascript Not Running Until Refresh

Question

I have used this javascript snippet to create a bunch of divs with equal height before and have never had this problem before, but for some reason the code isn't running until I refresh the page. Here is a sample instance:

<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>

Instead of equally-tall divs, I end up with this:

Then, when I hit refresh (sometimes it takes multiple refreshes), it corrects to this:

Any ideas on how to get this to work before I refresh the page?

ADDITIONAL INFO This is not solved by the answer for this question. I tried substituting load for ready and it renders the javascript nonfunctional for this purpose.

`window.onresize = function(){ location.reload(); }` - well - that's a bit scary - it also may not work on first load due to the heights getting their values before the images are loaded? I'm just guessing though — tymeJV, Sep 28 '16 at 20:40
Possible duplicate of [Consistent way of finding element height after nested image has loaded](http://stackoverflow.com/questions/13489883/consistent-way-of-finding-element-height-after-nested-image-has-loaded) — Serlite, Sep 28 '16 at 20:46
@Serlite, I had actually seen this question, but changing `ready` to `load` didn't fix the problem. It's not just about the images, the paragraphs (each of different height) also make the divs' heights different. — Liz, Sep 28 '16 at 21:12

score 1 · Answer 1 · answered Sep 28 '16 at 20:45

Make your divs appear after all images are finished loading. The divs are the correct size on reload because at that point all the images are cached by your browser and the JavaScript can pick up the appropriate size.

In jquery change your ready to this:

$(window).on("load", function() { // weave your magic here. });

should fix it. If not.

Something like this should help as a rough example.

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg"

The first one didn't do the trick. It removed the refresh issue, but never resized the divs....on to the second... — Liz, Sep 28 '16 at 21:08

score 0 · Accepted Answer · answered Sep 28 '16 at 20:52

0

You can give a css width and height to images. So boxes will look always as you wish. In your case, browser caches images in first time then their appear fix itself in second time because of reading images from browser's cache.

answered Sep 28 '16 at 20:52

Sercan özen

161
12

Javascript Not Running Until Refresh

2 Answers2