title: Jquery: Increase or decrese font-size of text using the resizable UI plugin
body: <p>I am using <a href="http://api.jqueryui.com/resizable" rel="nofollow">Resizable Jquery</a> UI Plugin. I have a contenteditable div inside the resizable element. </p>
  
  <p>I want the fontsize of the contenteditable div to incresase when i do a increased resize and to decrease the fontsize when i do decreased resize. Basically i want the text to best fit the contenteditable div upon resizing.</p>
  
  <p>Check <a href="http://jsfiddle.net/LyWuG/" rel="nofollow">this</a>  jsfiddle</p>
  
  <p>Code : </p>
  
  <pre><code>$(".resizeable").resizable({
                  containment: "#background",
                  minHeight:   120,
                  maxHeight:   350,
                  maxWidth:    550,
                  minWidth:    220,
                  resize: function(event, ui) {
                      resizeText(1);
                  }
              });
  
              function resizeText(multiplier) {
                  var textarea = $("#message"); 
                  var fs = (parseFloat(textarea.css('font-size')) + multiplier).toString() + 'px';    // Increment fontsize
                  var text = textarea.val();                                                          // Firefox won't clone val() content (wierd..)
                  textarea.css({'font-size':fs}).replaceWith( textarea.clone().val(text) );           // Replace textarea w/ clone of itself to overcome line-height bug in IE
              }
  </code></pre>
  
  <p>When i increase the size the 'Enter Message' font-size is increasing. But when i decrease its not decreasing. How can i achieve this? </p>