how can i resize font of div by resizing the div using jQuery?

Question

Hello every one can any one help me out please? by using this code my font size is go beyound the size of parent div

here

$(divid).resizable({
            maxHeight: parseInt(200),
            maxWidth: parseInt(180),
            resize: function(event, ui) {

                var width1 = parseInt(ui.element.css('width'));
                var height1 = parseInt(ui.element.css('height'));

                ui.element.css({'font-size': width1+'px'});
                ui.element.css({'line-height': height1+'px'});
            }
});

where 'divid' is parent div where child div is present to fire resizing event of font, but i don't want font size go beyond the parent div, text is also not hidden..

can you please help me out???

Answer 1

Simply try dividing width1 and height1 by 10. Of course there are more sophisticated things you could try, but this seems to work pretty well. I whipped up a little demo here.

$(divid).resizable({
    maxHeight: parseInt(200),
    maxWidth: parseInt(180),
    resize: function(evt, ui) {        
        var width1 = parseInt(ui.element.css('width')),
            height1 = parseInt(ui.element.css('height'));
        ui.element.css({
            'font-size': (width1/10)+'px',
            'line-height': (height1/10)+'px'
        });
    }
});

(Also note that you can combine the ui.element.css calls into one call by passing an object.)