...

View Full Version : textarea size on page load



babelfish
08-09-2011, 05:10 PM
hi guys,

i am using this script (jquery) to resize textareas when a user enters text. it works well.

in the management system im writing i would like to also resize all textareas so that all text is visible when forms load

i.e. a user loads a form with textareas on and all the text is visible when they read the contents



/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/

(function($){

$.fn.autoResize = function(options) {

// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);

// Only textarea's auto-resize:
this.filter('textarea').each(function(){

// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

// Cache original height, for use later:
origHeight = textarea.height(),

// Need clone of textarea, hidden off screen:
clone = (function(){

// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};

// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});

// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

})(),
lastScrollTop = null,
updateSize = function() {

// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);

// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);

// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;

// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);

// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};

// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);

});

// Chain:
return this;

};



})(jQuery);


many thanks for any help

babelfish
08-09-2011, 05:23 PM
never mind i found one that does it :)

taurian2058
11-10-2011, 04:15 PM
I have a similar requirement to resize the textarea but my textarea id keep on changing with different navigation to reach that web page. Is there a way to search for textarea using some pattern and then autoresize it or if some code can autoresize all the textarea in that web page.

Thanks.

babelfish
11-10-2011, 04:21 PM
I have a similar requirement to resize the textarea but my textarea id keep on changing with different navigation to reach that web page. Is there a way to search for textarea using some pattern and then autoresize it or if some code can autoresize all the textarea in that web page.

Thanks.

add this to the bottom of your page:



<script>
$('.textarea').autogrow();
</script>


make sure all your textarea have a class of 'textarea' (or change the above to suit). that way you can pick and choose which ones get resized.

the you need jquery.js and add this code to another .js file or download his version:



/*
* Auto Expanding Text Area (1.02)
* by Chrys Bader (www.chrysbader.com)
* chrysb@gmail.com
*
* Special thanks to:
* Jake Chapa - jake@hybridstudio.com
* John Resig - jeresig@gmail.com
*
* Copyright (c) 2008 Chrys Bader (www.chrysbader.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*
* NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
*
*/

(function(jQuery) {

var self = null;

jQuery.fn.autogrow = function(o)
{
return this.each(function() {
new jQuery.autogrow(this, o);
});
};

/**
* The autogrow object.
*
* @constructor
* @name jQuery.autogrow
* @param Object e The textarea to create the autogrow for.
* @param Hash o A set of key/value pairs to set as configuration properties.
* @cat Plugins/autogrow
*/

jQuery.autogrow = function (e, o)
{
this.dummy = null;
this.interval = null;
this.line_height = 0, parseInt(jQuery(e).css('line-height'));
if(this.line_height == NaN)
this.line_height = 0;
this.min_height = parseInt(jQuery(e).css('min-height'));
this.options = o;
this.textarea = jQuery(e);

// Only one textarea activated at a time, the one being used
this.init();
};

jQuery.autogrow.fn = jQuery.autogrow.prototype = {
autogrow: '1.1'
};

jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend;

jQuery.autogrow.fn.extend({

init: function() {
var self = this;
this.textarea.css({overflow: 'hidden', display: 'block'});
this.textarea.bind('focus', function() { self.startExpand() } ).bind('blur', function() { self.stopExpand });
this.checkExpand();
},

startExpand: function() {
var self = this;
this.interval = window.setInterval(function() {self.checkExpand()}, 400);
},

stopExpand: function() {
clearInterval(this.interval);
},

checkExpand: function() {

if (this.dummy == null)
{
this.dummy = jQuery('<div></div>');
this.dummy.css({
'font-size' : this.textarea.css('font-size'),
'font-family': this.textarea.css('font-family'),
'width' : this.textarea.css('width'),
'padding' : this.textarea.css('padding'),
'line-height': this.textarea.css('line-height'),
'overflow-x' : 'hidden',
'display' : 'none',
'position' : 'absolute',
'top' : 0,
'left' : '-9999px'
}).appendTo('body');
}

var html = this.textarea.val().replace(/\n/g, '<br>new');

if (this.dummy.html() != html)
{
this.dummy.html(html);

if (this.textarea.height() != this.dummy.height() + this.line_height)
{
this.textarea.animate({height: (this.dummy.height() + this.line_height) + 'px'}, 300); //lt changed to 300
}
}
}

});
})(jQuery);

taurian2058
11-10-2011, 04:27 PM
Please check my recent thread, can you help

http://www.codingforums.com/showthread.php?t=243417

taurian2058
11-10-2011, 04:29 PM
I need to use javascript only and i cannot use document.getElementsByClassName as i have an old IE. I dont know how to use jquery as the library needs to be stored somewhere in my SAP application.

Thanks for your reply.

babelfish
11-10-2011, 04:33 PM
you can control the textareas via CSS so:



<textarea name="el_message" id="el_message" class="textarea" style="height:40px; width:192px; border:1px solid #232323"></textarea>


adding the $('.textarea').autogrow(); to the bottom of the page calls the functions in the .js file i pasted. this function uses jquery, which is why you need that js library.

babelfish
11-10-2011, 04:35 PM
ah, ok. not sure how i can help you then...

taurian2058
11-10-2011, 04:40 PM
Thanks anyways.

babelfish
11-10-2011, 05:19 PM
it might be worth giving jquery a try? cant you just save .js files into your app?

taurian2058
11-10-2011, 07:59 PM
Hi,

I managed to load .js file, now can you tell me how to autoresize the already existing text area. Please see below part of my html code, in this i want this textarea to resize based on the content.


<div class="th-ta-container">
<fieldset style="border: 0;">
<textarea id="C21_W68_V69_notes_struct.tdline" class="th-ta th-ip-dfr " name="C21_W68_V69_notes_struct.tdline" cols="0" rows="5" style="width:100%;height:98%;" title="The difference this time is that Italy, the third largest economy in the euro zone" onclick="thtmlb_removeCursor(this);" tabindex="-1" readonly="readonly">The difference this time is that Italy, the third largest economy in the euro zone, is on a different scale than those other</textarea>
</fieldset>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum