Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts

    textarea size on page load

    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

    Code:
    /*
     * 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
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    never mind i found one that does it
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by taurian2058 View Post
    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:

    Code:
    <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:

    Code:
    /* 
     * 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);
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please check my recent thread, can you help

    Search for element using a pattern (javascript only)

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    you can control the textareas via CSS so:

    Code:
    <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.
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    ah, ok. not sure how i can help you then...
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks anyways.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    it might be worth giving jquery a try? cant you just save .js files into your app?
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #11
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •