How can I execute a function when textarea expand in this code?

Question

I had the following code for expanding textarea, i have no problem to expand the textarea base on text length,however, i need to execute a function when it expand. I don't know which term I should use to do that. Something like, if(this textarea expand){ alert('ok'); appreciate.

$.fn.TextAreaExpander = function(minHeight, maxHeight) {

			var hCheck = !($.browser.msie || $.browser.opera);

			// resize a textarea
			function ResizeTextarea(e) {

				// event or initialize element?
				e = e.target || e;

				// find content length and box width
				var vlen = e.value.length, ewidth = e.offsetWidth;
				if (vlen != e.valLength || ewidth != e.boxWidth) {

					if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0";
					var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

					e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
					e.style.height = h + "px";

					e.valLength = vlen;
					e.boxWidth = ewidth;
					
				}

				return true;
			};

			// initialize
			this.each(function() {

				// is a textarea?
				if (this.nodeName.toLowerCase() != "textarea") return;

				// set height restrictions
				var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
				this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
				this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

				// initial resize
				ResizeTextarea(this);

				// zero vertical padding and add events
				if (!this.Initialized) {
					this.Initialized = true;
					$(this).css("padding-top", 0).css("padding-bottom", 0);
					$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
				}
				
			});

			return this;
		};
		jQuery("textarea[class*=expand9-999]").TextAreaExpander();//initialize the text expand

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="expand9-999">good</textarea>

Answer 1

You need to save the height and check the current height with the previously saved height.

FYI - You need to include jQuery Migrate library for $.browser.msie to work. Reference.

Working Code Snippet:

$.fn.TextAreaExpander = function(minHeight, maxHeight) {

  var hCheck = !($.browser.msie || $.browser.opera);

  var prevHeight;
  
  // resize a textarea
  function ResizeTextarea(e) {

    // event or initialize element?
    e = e.target || e;

    // find content length and box width
    var vlen = e.value.length, ewidth = e.offsetWidth;
    if (vlen != e.valLength || ewidth != e.boxWidth) {

      if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0";
      
      var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

      e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
      e.style.height = h + "px";  // this is where you are actually resizing
      
      if(e.style.height !== prevHeight)  // throw the alert only if the height is not same as the previous one
        alert("resized");

      e.valLength = vlen;
      e.boxWidth = ewidth;
      
      prevHeight = e.style.height;  // save the height

    }

    return true;
  };

  // initialize
  this.each(function() {

    // is a textarea?
    if (this.nodeName.toLowerCase() != "textarea") return;

    // set height restrictions
    var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
    this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
    this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

    // initial resize
    ResizeTextarea(this);

    // zero vertical padding and add events
    if (!this.Initialized) {
      this.Initialized = true;
      $(this).css("padding-top", 0).css("padding-bottom", 0);
      $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
    }

  });

  return this;
};
jQuery("textarea[class*=expand9-999]").TextAreaExpander();//initialize the text expand

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<textarea class="expand9-999">good</textarea>

<p>Check your console.</p>

Answer 2

Try following will help you.

$(document).ready(function () {
var $textareas = jQuery('textarea');

    // set init (default) state   
    $textareas.data('x', $textareas.outerWidth());
    $textareas.data('y', $textareas.outerHeight());

    $textareas.mouseup(function () {

        var $this = $(this);

        if ($this.outerWidth() != $this.data('x') || $this.outerHeight() != $this.data('y')) {
            alert("ok");
        }

        // set new height/width
        
    });
  });

textareaResize($(".expand9-999"));

$.fn.TextAreaExpander = function(minHeight, maxHeight) {

			var hCheck = !($.browser.msie || $.browser.opera);

			// resize a textarea
			function ResizeTextarea(e) {

				// event or initialize element?
				e = e.target || e;

				// find content length and box width
				var vlen = e.value.length, ewidth = e.offsetWidth;
				if (vlen != e.valLength || ewidth != e.boxWidth) {

					if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0";
					var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

					e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
					e.style.height = h + "px";

					e.valLength = vlen;
					e.boxWidth = ewidth;
					
				}

				return true;
			};

			// initialize
			this.each(function() {

				// is a textarea?
				if (this.nodeName.toLowerCase() != "textarea") return;

				// set height restrictions
				var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
				this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
				this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

				// initial resize
				ResizeTextarea(this);

				// zero vertical padding and add events
				if (!this.Initialized) {
					this.Initialized = true;
					$(this).css("padding-top", 0).css("padding-bottom", 0);
					$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
				}
				
			});

			return this;
		};
		jQuery("textarea[class*=expand9-999]").TextAreaExpander();//initialize the text expand

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="expand9-999">good</textarea>