title: jQuery / CSS Zoom div contents only
body: <p>I want to zoom on the contents of a div, but I want the div to maintain position and height/width regardless of it's zoom level.</p>
  
  <p>I made this fiddle:
  <a href="http://jsfiddle.net/fD7L7/5/" rel="nofollow">http://jsfiddle.net/fD7L7/5/</a></p>
  
  <p>The thing is, the div I want to zoom in/out on acts as a container for a number of draggables.</p>
  
  <p>Halp?</p>
  
  <pre><code>var currZoom = 1;
  
  $(".zoomIn").click(function(){
      currZoom+=0.1;
      $('.board').css(
      {
          'position' : 'absolute',
          'top' : '45px',
          'left' : '20px',
          'height' : $(window).height()-65,
          'width' : $(window).width()-40,
          'zoom' : currZoom
      });
  });
  
  $(".zoomOff").click(function()
  {
      currZoom=1;
      $(".board").css(
      {
          'position' : 'absolute',
          'top' : '45px',
          'left' : '20px',
          'height' : $(window).height()-65,
          'width' : $(window).width()-40,
          'zoom' : currZoom
      });
  });
  
  $(".zoomOut").click(function()
  {
      currZoom-=0.1;
      $('.board').css(
      {
          'position' : 'absolute',
          'top' : '45px',
          'left' : '20px',
          'height' : $(window).height()-65,
          'width' : $(window).width()-40,
          'zoom' : currZoom
      });
  });
  </code></pre>