Question

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?

Answer 1

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"); 
  }
});