title: jQuery: Math.floor function on hash load
body: <p>I have a hashchange function set up to change the class of divs and load them into an isotope grid, thus allowing me to navigate to the divs via a hash url. I also have a <code>Math.floor</code> function in there too as the height of <code>.grid-break</code> is determined by this, always in 230px intervals so it stays consistent with the grid. The <code>.click-block</code> click function show the <code>.grid-break</code> div at the correct height, this is great. But then navigating to this function via e.g. <code>www.website.com/#thisisahash</code> and the <code>.grid-break</code> div appears with no height and appears broken.<br>
  jQuery:</p>
  
  <pre><code>    $(document).ready(function () {
          $(window).hashchange(function () {
              var hash = location.hash;
              if (hash) {
                  var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
                  if (element) showDetail(element);
              }
          });
  
          $(document).ready(function () {
              $(document).hashchange();
  
              var $container = $('#main-grid, #news-grid, .main-grid');
  
              $(function () {
                  $container.imagesLoaded(function () {
                      $container.isotope({
                          itemSelector: '.grid-block, .grid-break, .hidden',
                          animationEngine: 'best-available',
                          filter: '*:not(.hidden), .grid-block',
                          masonry: {
                              columnWidth: 8,
                              gutterWidth: 25
                          }
                      });
                  });
              });
  
              $(".click-block").click(function () {
                  document.location.hash = $(this).attr('data-hook');
              });
          });
  
  
          function showDetail(element) {
              var newHeight = $('#post-' + element.attr('data-hook')).height();
              $('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
              newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
              $('#post-' + element.attr('data-hook')).css('height', newHeight);
              element.children('.up-arrow').fadeIn('slow');
              setTimeout(function () {
                  $('html, body').animate({
                      scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
                  }, "slow");
              }, 1500);
              $('#main-grid').isotope();
          }
  });
  </code></pre>
  
  <p>Is there a way that the height of the <code>.grid-break</code> divs can be calculated before they're added to the isotope grid and thus appearing broken? Or any other solution to this small problem? Any suggestions would be greatly appreciated!</p>