-
Notifications
You must be signed in to change notification settings - Fork 0
/
autogrow_rows.js
85 lines (78 loc) · 2.87 KB
/
autogrow_rows.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
(function($) {
$.fn.autoGrow_Rows = function(options) {
var defaults = {
rows: 6,
timing: 'ease-in-out'
}
var settings = $.extend( {}, defaults, options)
//create the text holder element if it doesn't exist
if ($('#textarea_height_holder_box').length == 0) {
$('body').append('<div id="textarea_height_holder_box">test</div>')
$('#textarea_height_holder_box').css('display', 'none')
}
//set textarea precondition values
//first make sure the holder box has matched css rules to make sure min-height is properly set
$('#textarea_height_holder_box').css({
width: $(this).css('width'),
'font-size': $(this).css('font-size'),
'font-family': $(this).css('font-family'),
'font-weight': $(this).css('font-weight'),
'letter-spacing': $(this).css('letter-spacing'),
'word-spacing': $(this).css('word-spacing'),
'line-height': $(this).css('line-height'),
padding: $(this).css('padding'),
'text-indent': $(this).css('text-indent'),
'white-space': $(this).css('white-space'),
'word-wrap': $(this).css('word-wrap'),
'text-align': $(this).css('text-align')
})
//then set the textareas values
this.css({
overflow: 'hidden',
resize: 'none',
'min-height': $('#textarea_height_holder_box').height() + 'px',
'height': $('#textarea_height_holder_box').height() + 'px',
'vertical-align': 'top',
'transition': 'height 0.5s ' + settings.timing,
'-webkit-transition': 'height 0.5s ' + settings.timing
})
//create listeners to set heights equal
this.live('focus', function() {
//set holder elements text properties to match those of the textarea
$('#textarea_height_holder_box').css({
width: $(this).css('width'),
'font-size': $(this).css('font-size'),
'font-family': $(this).css('font-family'),
'font-weight': $(this).css('font-weight'),
'letter-spacing': $(this).css('letter-spacing'),
'word-spacing': $(this).css('word-spacing'),
'line-height': $(this).css('line-height'),
padding: $(this).css('padding'),
'text-indent': $(this).css('text-indent'),
'white-space': $(this).css('white-space'),
'word-wrap': $(this).css('word-wrap'),
'text-align': $(this).css('text-align')
})
holderVal ='m\n'
currentVal = ''
for (var i = 0; i < settings.rows; i++) {
currentVal += holderVal
}
$('#textarea_height_holder_box').html(currentVal)
boxheight = $('#textarea_height_holder_box').height()
$(this).css('height', boxheight + 'px')
})
//also use keypress to avoid setting vars every time key is pressed
this.live('blur', function(e) {
currentVal = $(this).val()// + String.fromCharCode(e.which)
if (currentVal != '') {
$('#textarea_height_holder_box').html(currentVal)
boxheight = $('#textarea_height_holder_box').height()
$(this).css('height', boxheight + 'px')
}
else {
$(this).height($(this).css('min-height'))
}
})
}
})(jQuery)