[jQuery] Re: Why won't this "unbind" work?

[Rick Faircloth]

.expandable is a reference to the functionality of a plug-in.
It's included in the top of the page by
<script src="jquery.expandable.js"></script> and it's code
provides the functionality to auto-expand and shrink a textarea.

When I click "hide", I want to disable the plug-in's functionality
on the textarea, and re-enable it when I click "show".

Here's the plug-in's code:

/*! Copyright (c) 2008 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT 
(http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 */

(function($) {

$.fn.extend({
     expandable: function(options) {

          options = $.extend({ duration: 'normal', interval: 750, within: 1, 
by: 2 }, options);

          return this.filter('textarea').each(function() {
               var $this = $(this).css({ display: 'block', overflow: 'hidden' 
}), minHeight =
$this.height(), interval, heightDiff = this.offsetHeight - minHeight,
                    rowSize = ( parseInt($this.css('lineHeight'), 10) ||
parseInt($this.css('fontSize'), 10) ),
                    $div = $('<div
style="position:absolute;top:-999px;left:-999px;border-color:#000;border-style:solid;overflow-x:hidd
en;visibility:hidden;z-index:0;" />').appendTo('body');
               $.each('borderTopWidth borderRightWidth borderBottomWidth 
borderLeftWidth paddingTop
paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle 
fontStretch
fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) {
                    $div.css(prop, $this.css(prop));
               });

               $this
                    .bind('keypress', function(event) { if ( event.keyCode == 
'13' ) check(); })
                    .bind('focus blur', function(event) {
                         if ( event.type == 'blur' ) clearInterval( interval );
                         if ( event.type == 'focus' && !interval ) 
setInterval(check,
options.interval);
                    });

               function check() {
                    var text = $this.val(), newHeight, height, usedHeight, 
usedRows, availableRows;
                    $div.html( text.replace(/\n/g, '&nbsp;<br>') );
                    height = $this[0].offsetHeight - heightDiff;
                    usedHeight = $div[0].offsetHeight - heightDiff;
                    usedRows = Math.floor(usedHeight / rowSize);
                    availableRows = Math.floor((height / rowSize) - usedRows);

                         if ( availableRows <= options.within ) {
                              newHeight = rowSize * (usedRows + 
Math.max(availableRows, 0) +
options.by);
                              $this.stop().animate({ height: newHeight }, 
options.duration);
                         } else if ( availableRows > options.by + 
options.within ) {
                              newHeight = Math.max( height - (rowSize * 
(availableRows - (options.by
+ options.within))), minHeight )
                              $this.stop().animate({ height: newHeight }, 
options.duration);
                         }
                    };
             }).end();
          }
});

})(jQuery);






> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On 
> Behalf Of Michael Geary
> Sent: Saturday, February 14, 2009 12:15 AM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: Why won't this "unbind" work?
> 
> 
> Your code is calling .unbind() on the #myTextarea element.
> 
> What event handler is bound to the #myTextarea element?
> 
> N.B.: .expandable() is not an event handler. Is it? What is it?
> 
> -Mike
> 
> > From: Rick Faircloth
> >
> > Given these scripts:
> >
> > $(document).ready(function() {
> >      $('#myTextarea').hide();
> > });
> >
> > $(document).ready(function() {
> >      $('#hide').click(function() {
> >           $('#myTextarea').unbind().slideUp();
> >           return false;
> >      });
> > });
> >
> > $(document).ready(function() {
> >      $('#show').click(function() {
> >           $('#myTextarea').expandable().slideDown();
> >           return false;
> >      });
> > });
> >
> > and this HTML:
> >
> >      <p>
> >         [ <strong>Notes concerning textarea</strong> ]
> >         [ notes ]
> >         [ <a id="hide" href="#">hide</a> ]
> >         [ <a id="show" href="#">show</a> ]
> >         [ export ]
> >         [ clear ]
> >      </p>
> >
> >      <textarea id="myTextarea" cols="100"></textarea>
> >
> >
> > Why won't this code unbind the .expandable function?
> > (.expandable is a reference to the .expandable plug-in)
> >
> > Thanks for any input...
> >
> > Rick
> >