Div width and height increase along with textarea content

html, jquery

Solution

Let me know if it is working to expectation. Somehow you need to keep the width constant

var tWidth = $('textarea')[0].value.length;
var vWidth = 0;
var hIncr = 2; //initial line count - looks somehow?
var iheight = $('.EDetailInset').css('height').replace('px',''); //default height to height of box
$('textarea').keyup(function(e) {



if ((e.keyCode || e.which) == 13) {
$('.EDetailInset').css('height', (hIncr * iheight) + 'px'); //increase height by one line
  vWidth = 0; //so that the width does not increase
  hIncr++; //increase line number
}
else 
{

    vWidth = (vWidth+1);  //only this increase and reset to zero for new line
    if(vWidth*11 > tWidth) //if more characters than we had, increase box width
        tWidth = vWidth*11;
    console.log((vWidth*11)+':'+tWidth);

$('.EDetailInset').css('width', (tWidth) + 'px'); //no increment, width is static

}
});​

Check this JS Fiddle

Problem

Div increases with the text entered. Fine. But when I press enter height should increase according to the text size and also width shouldn't increase till the text reaches to the above width. Please help http://jsfiddle.net/shabbirrangwala/NkRYY/8/ ``` $('textarea').keyup(function(e) { if ((e.keyCode || e.which) == 13) { $('.EDetailInset').css('height', ((this.value.length + 1) * 3) + 'px'); } else { $('.EDetailInset').css('width', ((this.value.length + 1) * 11) + 'px'); } });​ ```

Original source