CODEWITHSUNDEEP
javascripthtmlcss
Liz
Liz

Reputation: 1437

Javascript Not Running Until Refresh

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:

Problem Example Image

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

Problem Fixed Image

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.

Upvotes: 0

Views: 1231

Answers (2)

Sercan &#246;zen
Sercan &#246;zen

Reputation: 161

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.

Upvotes: 0

DominicValenciana
DominicValenciana

Reputation: 1731

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"

Upvotes: 1

Related Questions