CODEWITHSUNDEEP
javascriptjqueryautosize
Arvy
Arvy

Reputation: 1212

Autosize jQuery plugin, trigger a autosize.update

I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.

autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);

Here is a piece of my source code: http://pastebin.com/049UfkGv - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.

jQuery Code:

 $(document).ready(function(){
  window.jQuery.fn.autosize=function(){ return autosize(this); };
 });

 $('.edit4').each(function(){
   $(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
   $(this).autosize();
 });

Thank you!

Upvotes: 5

Views: 6057

Answers (4)

Stan S.
Stan S.

Reputation: 89

Autosize creates a custom event, that can be triggered manually like this:

$("thextarea").trigger("autosize");

Upvotes: 0

Ievgen Baziak
Ievgen Baziak

Reputation: 93

In my case I had to update the size of textarea not only based on changed content (this is handled by "autosize" plugin itself nicely) but based on CSS properties change as well, e.g. when user is using a slider to change the font-size of the textarea.

This worked for me:

// ... slider ui init bla bla
slide: function(){
  var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');

  // .. changing the actual css property 

  // triggering the .autosize
  $textarea.trigger('autosize.resizeIncludeStyle');

  // ... etc etc
}
// ...

This is not properly described in the Autosize Documentation but the event does exist and is handled in the jQuery version of the plugin.

Upvotes: 0

user947668
user947668

Reputation: 2728

you can use it as follows:

autosize.update($('textarea'));

Upvotes: 12

Stefan Vogt
Stefan Vogt

Reputation: 1533

In my case the Autosize jQuery plugin could not calculate the right height, because the textarea was hidden on pageload.

The following tigger helped me out:

function showMyTextarea(){

  // do your stuff here

  // trigger autosize     
  $('textarea').trigger('autosize.resize');

}

Upvotes: 10

Related Questions