title: jQuery scale div contents (nested div)
body: <p>How can I get the blue box to scale with the red one? (using jQuery-UI)</p>
  
  <p><a href="http://jsfiddle.net/Y54EB/1/" rel="nofollow">http://jsfiddle.net/Y54EB/1/</a></p>
  
  <p>This is the basic code, CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#outer {
      position:relative;
      height:100px;
      width:150px;
      z-index:1;
      background:#F00;
  }
  #nested {
      position:absolute;
      left:50px; top:20px;
      width:50px; height:20px;
      z-index:2;
      background:#00F;
      cursor:pointer;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;
  &lt;div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" /&gt;
  &lt;/div&gt;
  </code></pre>