title: Border Size change slow on resize()
body: <p>I'm creating 2 triangles (using the border-<em>hack</em>), that fill the page vertically (so both triangles are 50% height of page). That I've done fine.</p>
  
  <p>However, when I'm also trying to get this calc to run on <code>window.resize</code> it is very slow.
  I'm aware I've got a few variables being calculated each time, but just wondering if anyone can think of a way to make this faster...<br>
  Have a look at my <a href="http://jsfiddle.net/mrwigster/vuzs9/" rel="nofollow noreferrer">jsfiddle</a>, and resize your browser window. - Warning the jsFiddle is likely to crash after a while.. that's how bad it is.</p>
  
  <p>Currently the triangles work out the body width, minus the <code>.main</code> width, then divided by 2, so that the edges of the triangles just touch the side of <code>.main</code> div.<br>
  It also works out the height of the window (<code>$(window).outerHeight();</code>) then divides it by 2, so that each triangle has 50% of the window height.<br>
  It then also uses this height, to apply a <code>top</code> value to the 2nd triangle, so that it sits on the second half of page.</p>
  
  <p>I suggest looking at the jsfiddle for the code, but will also put it here:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="triangleWrap"&gt;
      &lt;div class="borderTopLeft"&gt;&lt;/div&gt;
      &lt;div class="borderBottomLeft"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('document').ready(function triangleCalc() {
      var bodyWidth = $('body').width();
      var bodyHeight = $(window).outerHeight();
      var mainWidth = $('.main').width();
      var bodyMinusMain = (bodyWidth - mainWidth) / 2;
      var bodyHeightCalc = bodyHeight / 2;
      $('.borderTopLeft, .borderBottomLeft').css('border-right', bodyMinusMain + 'px solid black');
      $('.borderTopLeft').css('border-bottom', bodyHeightCalc + 'px solid transparent');
      $('.borderBottomLeft').css({
          'border-top': bodyHeightCalc + 'px solid transparent',
          'top': bodyHeightCalc + 'px'
      });
      $(window).resize(triangleCalc);
  });​
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.borderTopLeft, .borderBottomLeft{
      width: 0;    
      height: 0;    
      position: absolute;
  }
  .borderTopLeft{border-top: 0 solid transparent;}
  .borderBottomLeft{border-bottom: 0 solid transparent;}
  .borderTopLeft{ 
      border-bottom: 500px solid transparent;       
      border-right:438px solid #2C2C2C;
  }
  .borderBottomLeft{
      border-top: 500px solid transparent;   
      border-right: 600px solid #2C2C2C;
      top: 500px;
  }
  .main{width:500px;height:400px;background:orange;margin:auto;}
  </code></pre>