Skip to content

add max_height option #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stevenharman wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add max_height option #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57f2495
Add a README.md, pulling most info from the source.
stevenharman Jan 10, 2011
595fa00
add max_height option
stevenharman Jan 10, 2011
b64ebe9
update the minified demo too
stevenharman Jan 10, 2011
bb53348
update contributors
stevenharman Jan 10, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
# BetterGrow: a jQuery plugin

## Description

Many things grow, but few grow better when they BetterGrow.

BetterGrow is a customizable jQuery plugin for enabling the improved, dynamic expansion of a textarea.

When the text within the target textarea exceeds the initial textarea height the textarea increases its height sufficiently to accommodate the new text.

When the text within the target textarea decreases sufficient to allow for a lesser height, and the height is greater than the minimum textarea height or initial textarea height, then the textarea height is reduced to the minimum height required to display the text within while not obscuring the visibility or requiring a scrollbar to view any of the text. BetterGrow supports pre-existing text within the textarea.

## Defaults
- initial textarea height is set to 26px (aka minimum textarea height)
- no event handling enabled

## Implementation

$('.textareas').BetterGrow();
$('#textarea7, #textarea8').BetterGrow({ / * OPTIONS * / });

note: textarea MUST reside within an encapsulating / wrapping DIV to work

## Compatibility

- Tested in FF3.5, IE7
- With jQuery 1.4
- ** Width of textarea must be EXPLICITLY set to function normally in IE **

## Method(s)
When initialized the textarea object and its parent DIV have their attributes adjusted.

The DIV should add no size to the textarea object or region. DIV height is automatically set to AUTO.

The textarea's overflow is set to HIDDEN and the WIDTH is set to the current WIDTH. (i.e. WIDTH of textarea must be defined to work in IE)

If the DIV is missing, the plugin will attempt to wrap the textarea in a new DIV. It is recommended that all targeted textareas are wrapped in a DIV before calling BetterGrow to avoid unexpected behavior.

If the textarea already has text within it when BetterGrow is initialized the textarea's height is automatically adjusted to fit the text (if a height greater than the initial height is needed to present the text unobscured).

## Customization

BetterGrow(<OPTIONS>), i.e.

$('.ta1').BetterGrow({initial_height:100px});

- initial_height: minimum height in pixels for the textarea, if the textarea is EMPTY, this is the initial height
- max_height: the maximum height, in pixels, that the textarea will grow, afterwhich it becomes overflow:auto;
- on_enter: callback function to call when ENTER is pressed within the target textarea(s)
- do_not_enter: if true, and on_enter is NOT NULL, then the ENTER event DOES NOT CASCADE / pass-through to the text area. if false, and on_enter is NOT NULL, then the ENTER event will trigger the calling of on_enter() and be reflected within the textarea (i.e. the textarea displays the submitted ENTER(S))

### EXAMPLE
OPTIONS =
{
initial_height: 50px,
on_enter: function() { submit_form(); },
do_not_enter: false
};

## Get the skinny

For more details about BetterGrow, its implementation, usage, and examples, go to the [BetterGrow](http://tpgblog.com/BetterGrow/) site.

## Contributors

[Jeremy Horn](http://tpgblog.com): original author
[Steven Harman](http://stevenharman.net): max_height option

## Other

dual licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php) and [GPL License](http://opensource.org/licenses/gpl-3.0.html)

Copyright (c) 2009 Jeremy Horn- jeremydhorn(at)gmail(dot)c0m

21 changes: 16 additions & 5 deletions bettergrow.demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>BetterGrow Plugin Demo</title>

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.BetterGrow.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.BetterGrow.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
Expand Down Expand Up @@ -38,13 +38,15 @@

$('#area8').BetterGrow();

$('#area9, #area10').BetterGrow({ max_height: 150 });

});
</script>
</script>

<style>
textarea {
width:173px;
}
width:173px;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -74,5 +76,14 @@
<div class='area7_flag' style='visibility:hidden'> area 7 ENTER PRESSED </div>
Area 8: missing DIV
<textarea id="area8"></textarea>
Area 9: max-height of 150px
<textarea id="area9"></textarea>
Area 10: max-height of 150px, with more content
<textarea id="area10">My favorite blog is The Product Guy at http://tpgblog.com. I repeat, my favorite blog is The Product Guy at http://tpgblog.com!

and once more, to get some space.

My favorite blog is The Product Guy at http://tpgblog.com. I repeat, my favorite blog is The Product Guy at http://tpgblog.com!</textarea>

</body>
</html>
21 changes: 16 additions & 5 deletions bettergrow.min.demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>BetterGrow Plugin Demo (Minimized)</title>

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.BetterGrow.min.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.BetterGrow.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
Expand Down Expand Up @@ -38,13 +38,15 @@

$('#area8').BetterGrow();

$('#area9, #area10').BetterGrow({ max_height: 150 });

});
</script>
</script>

<style>
textarea {
width:173px;
}
width:173px;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -74,5 +76,14 @@
<div class='area7_flag' style='visibility:hidden'> area 7 ENTER PRESSED </div>
Area 8: missing DIV
<textarea id="area8"></textarea>
Area 9: max-height of 150px
<textarea id="area9"></textarea>
Area 10: max-height of 150px, with more content
<textarea id="area10">My favorite blog is The Product Guy at http://tpgblog.com. I repeat, my favorite blog is The Product Guy at http://tpgblog.com!

and once more, to get some space.

My favorite blog is The Product Guy at http://tpgblog.com. I repeat, my favorite blog is The Product Guy at http://tpgblog.com!</textarea>

</body>
</html>
47 changes: 29 additions & 18 deletions js/jquery.BetterGrow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,14 @@
initial_height: minimum height in pixels for the textarea

if the textarea is EMPTY, this is the initial height

max_height: the maximum height, in pixels, that the textarea will grow, afterwhich it becomes overflow:auto;

on_enter: callback function to call when ENTER is pressed within
the target textarea(s)

do_not_enter: if true, and on_enter is NOT NULL,
then the ENTER event DOES NOT CASCADE / pass-through
then the ENTER event DOES NOT CASCADE / pass-through
to the text area
if false, and on_enter is NOT NULL,
then the ENTER event will trigger the calling of
Expand Down Expand Up @@ -124,15 +126,15 @@

// process all provided objects
return this.each(function() {
var $this = $(this);
var $this = $(this);

// wonder if people would prefer this or a setting that would conditionally wrap the div
//
// perform basic check for required DIV wrapper
if ($this.parent('div').length == 0) {
$this.wrap('<div style="border:0; padding:0; margin:0"></div>');
}

// reset textfield content
// reset heights (these calls, right here, may be unnecessary -- brainstorm use cases
set_height($this, c_settings.initial_height);
Expand Down Expand Up @@ -163,8 +165,9 @@
**********************************************************************************/
$.fn.BetterGrow.settings = {
initial_height: 26, // specified in pixels
on_enter: null, // callback function; if specified, this is called when enter is pressed
do_not_enter: true // if true and on_enter is not null then enter event does not cascade / pass-through to textarea
max_height: null, // specified in pixels
on_enter: null, // callback function; if specified, this is called when enter is pressed
do_not_enter: true // if true and on_enter is not null then enter event does not cascade / pass-through to textarea
// no_div: true // if true, NEVER wrap the content in a div, but if div not present do nothing; if false, ALWAYS wrap in div -- maybe future RELEASE -- let's see feedback
};

Expand Down Expand Up @@ -215,6 +218,7 @@
**********************************************************************************/
function make_better(the_object, settings) {
var min_height = settings.initial_height;
var max_height = settings.max_height;

// initialize parent DIV
the_object.parent().css('height','auto');
Expand All @@ -228,7 +232,7 @@

// bind key events
the_object.keydown( function(e) {
textarea_grow_some(the_object, min_height);
textarea_grow_some(the_object, min_height, max_height);

if (e.keyCode == 13 /* ENTER */) {

Expand All @@ -245,7 +249,7 @@
});

the_object.keyup ( function() {
textarea_grow_some(the_object, min_height)
textarea_grow_some(the_object, min_height, max_height)
} ); /* important for catching ENTER */
}

Expand All @@ -259,6 +263,9 @@
determine how to measure the height of the textarea [browser specific]

determine whether or not the content of the text area is
> max_height,
THEN set to max_height

<= min_heigh,
THEN set to min_height

Expand All @@ -275,40 +282,44 @@
any associated textarea scrollbars

**********************************************************************************/
function textarea_grow_some(obj, min_height){
var curr_height;
var curr_scroll_height;
function textarea_grow_some(obj, min_height, max_height){
var curr_height,
curr_scroll_height;

// do the math
if (!textarea_grow_some.browser_calc){
//browser.whoami
textarea_grow_some.browser_calc = $.browser.msie || $.browser.safari;

//does padding matter?
/* why not just use outerHeight() and let jQuery do this hard work? */
textarea_grow_some.padding_calc = textarea_grow_some.browser_calc ?
( parseInt(obj.css('padding-top')) +
parseInt(obj.css('padding-bottom')) ) : 0;
}

curr_height = obj.height();

if (curr_height > min_height) {
obj.parent().css('height', obj.height() + 'px' );

//set the height to zero to get the real content height
obj.height(0);
}

curr_scroll_height = obj.get(0).scrollHeight - textarea_grow_some.padding_calc;

// apply the math
if (curr_scroll_height > min_height) {
obj.height(curr_scroll_height);
if (max_height && (curr_scroll_height > max_height)) {
obj.height(max_height).css('overflow', 'auto');
}
else if (curr_scroll_height > min_height) {
obj.css('overflow', 'hidden').height(curr_scroll_height);
} else if (curr_height > min_height) {
obj.height(min_height);
obj.css('overflow', 'hidden').height(min_height);
}

// restore initial height setting on parent DIV
// restore initial height setting on parent DIV
obj.parent().css('height', 'auto');
}

Expand Down
2 changes: 1 addition & 1 deletion js/jquery.BetterGrow.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.