monitor the textarea for width (resize) changes and update the mirror

1 files changed, 13 insertions, 3 deletions

diff --git a/jquery.expandable.js b/jquery.expandable.js
index 9017b7b..dcd3f77 100644
--- a/jquery.expandable.js
+++ b/jquery.expandable.js
@@ -46,12 +46,16 @@
                 }
 
                 // copy styles from textarea to mirror to mirror the textarea as best possible
-                $.each('borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth paddingTop paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle fontStretch fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) {
-                    $mirror.css(prop, $this.css(prop));
-                });
+                mirror($this, $mirror);
 
                 // setup events
                 $this
+                    .bind('mouseup', function(event) {
+                        // check if width has changed
+                        if ($this.width() !== $mirror.width()) {
+                            mirror($this, $mirror);
+                        }
+                    })
                     .bind('keypress', function(event) { if ( event.keyCode == '13' ) check(); })
                     .bind('focus blur', function(event) {
                         if ( event.type == 'blur' ) clearInterval( interval );
@@ -106,4 +110,10 @@
         });
     }
 
+    function mirror(org, mir) {
+        $.each('borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth paddingTop paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle fontStretch fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) {
+            mir.css(prop, org.css(prop));
+        });
+    }
+
 }));