title: Scale font-size based on parent DIV's dynamic width/height (jQuery)
body: <p>Open to using: <strong>jQuery</strong> / <strong>Javascript</strong> / <strong>PHP</strong> / <strong>CSS3</strong> / <strong>HTML5</strong></p>
  
  <p>What I'm trying to achieve is <strong>dynamically change the font-size of a child element based on its parent div's width &amp; height</strong>. The parent div resizes on hover using jQuery. Now, I want the text inside it to grow &amp; shrink along with it (imagine a zoom-in / zoom-out effect).</p>
  
  <p>A little demonstration: <a href="http://jsfiddle.net/Aye4h/" rel="nofollow"><strong>http://jsfiddle.net/Aye4h/</strong></a></p>
  
  <p>The above example shows font-size changing dynamically on window resize. That shows pretty much what I'm trying to achieve, except that it will not be basing its size from the window, but from its <strong>parent div</strong>.</p>
  
  <p>... Kind of like the <code>background-size</code> CSS3 property, except with text.</p>
  
  <p>Here is some code that I found online (<strong><a href="http://css-tricks.com/forums/discussion/comment/41935/#Comment_41935" rel="nofollow">LINK</a></strong>) that I thought I could use.<br>
  The code does it for a <strong>span</strong> inside a parent <code>#sidebar</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var originalFontSize = 12;
      var sectionWidth = $('#sidebar').width();
  
      $('#sidebar span').each(function(){
          var spanWidth = $(this).width();
          var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
          $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>While, here is my jQuery code for the parent DIVs</strong> :<br>
  (They are called <code>.bubbles</code>, and upon hover they expand in size)</p>
  
  <pre class="lang-js prettyprint-override"><code>$(window).bind("load", function() {
  
  // LOAD BUBBLES
      $('.bubble').animate({
      opacity: 1,
      width: ['toggle', 'swing'],
      height: ['toggle', 'swing'],
      margin: '-75%'
    }, 400, function() {
  
  
  // NOW, LOAD HOVER EFFECTS
  // THIS EXPANDS BUBBLES BY 20% OF THEIR WIDTH &amp; HEIGHT WHEN HOVERED
          $(".bubble").on('scale', function(e, s) {
              var data = $.data(this, 'size'),
                  w = data.width,
                  h = data.height;
              $(this).stop().animate({
                  width: w * s,
                  height: h * s,
                  marginLeft: data.marginLeft - w * (s-1) / 2,
                  marginTop: data.marginTop - h * (s-1) / 2
              });
          }).each(function() {
              var $this = $(this);
              $.data(this, 'size', {
                  width: $this.width(),
                  height: $this.height(),
                  marginLeft: parseInt($this.css('margin-left')),
                  marginTop: parseInt($this.css('margin-top'))
              });
          }).hover(function() {
              $(this).trigger('scale', [1.2])
          }, function() {
              $(this).trigger('scale', [1.0])
  
              });
          });
  
   });
  </code></pre>
  
  <p><strong>LIVE DEMO</strong> : <code>http://174.127.117.20/~interact/</code>  </p>
  
  <p>Now I don't know how to <strong>merge</strong> the two. My current code already saves the width &amp; height of the bubble, &amp; expands the bubble 20% from its original height &amp; width upon hover...  </p>
  
  <p>Now my question is: how do I include text with this, of a child H1 element (placed inside <code>.bubble</code>)? I want to scale everything inside <code>.bubble</code> to match it when it's resized.
  I have discovered methods above, but I do not know how to implement it with my current code, since they do not exactly apply as is.</p>
  
  <p>All help would be greatly appreciated, thank you so much for your time!</p>