Jquery: Increase or decrese font-size of text using the resizable UI plugin

jquery, jquery-ui

Solution

This widget has an events named resize. You could listen for this event and achieve what you want.

eg:

$("#contenteditable").resizable({
  resize: function(event, ui) {
    // handle fontsize here
    console.log(ui.size); // gives you the current size of the div
    var size = ui.size;
    // something like this change the values according to your requirements
    $(this).css("font-size", (size.width * size.height)/1000 + "px"); 
  }
});

Problem

I am using Resizable Jquery UI Plugin. I have a contenteditable div inside the resizable element. 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. Check this jsfiddle 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 } ``` When i increase the size the 'Enter Message' font-size is increasing. But when i decrease its not decreasing. How can i achieve this?

Original source