title: jquery isotope container height width when toggle layout
body: <p>I have a script that allows to toggle layout between masonryHorizontal and masonry. The toggle function seems to works correctly.</p>
  
  <p>However I have a problem with the container isotope dimension.</p>
  
  <p>With horizontal masonry layout, I want to always have the container height equals to 3 items height. It works fine, but when I toggle everything breaks. It's buggy.</p>
  
  <p>When I resize the windows browser on masonry layout the behaviour is very strange. The container seems to be more larger than the windows width. The behaviour looks like to masonryHorizontal.</p>
  
  <p>I think a part of the bug comes from the toggle click function:</p>
  
  <pre><code>$('.toggle-view').click( function() {
      $('.prev').toggleClass('hidden');
      $('.next').toggleClass('hidden');
      $('.scrollable').toggleClass('hidden');
      $('#container-scroll').toggleClass('horizontal');
      $('#container-scroll').toggleClass('vertical');
      $('#container').toggleClass('vertical');
      isVertical = !isVertical;
      var sizeStyle = isVertical ?
         { width: '100%', maxWidth: '100%', height:  height } :
         { width: '100%', maxWidth: '100%', height: '100%' };
      var redraw = $container[0].offsetHeight;
      $container.removeClass('no-transition')
      .isotope({
          layoutMode: isVertical ? 'masonryHorizontal' : 'perfectMasonry' 
      });
  });
  </code></pre>
  
  <p>Here a fiddle : <a href="http://jsfiddle.net/bB9WC/1/" rel="nofollow">http://jsfiddle.net/bB9WC/1/</a></p>
  
  <p>I spend maybe 15hours to solve the problem without success.</p>
  
  <p>I think it a problem of jquery style width and height container.
  Here the script that allows to calculate the container height for the two layout.</p>
  
  <pre><code>function checkContainerHeight() {
  if ($('#container-scroll').hasClass('horizontal')) {
      height = Math.round(colW*ratio)*HIsotopeRows+20;
      $('#container-scroll').css({ minHeight: height });
      $('#container').css({ minHeight: height });
      }
  if ($('#container-scroll').hasClass('vertical')) {
      $('#container-scroll').css({ minHeight: '100%' });
      $('#container').css({ minHeight: '100%' });
      }
  }
  
  $(window).smartresize(function() {
      checkContainerHeight();
  })
  </code></pre>