views:

603

answers:

1

Hi

I am using plugin here http://plugins.jquery.com/project/autogrow and I got a problem in Internet Explorer and Chrome (Not Firefox)

See code below:

<script type="text/javascript">
    $(document).ready(function() {
     $('#main').html('<textarea class=\"test\">aaaa</textarea>');
     $('.test').autogrow();
</script>

</head>

<body>
<div id="main">
</div>
</body>
</html>

Basically if the element is new after start the page, it does not work. So I hacked into the plugin a bit and changed these lines using livequery (line 68)

  this.textarea.livequery(function() {
 $(this).focus(function() {self.startExpand()});
 $(this).blur(function() {self.stopExpand()});
  });

However that still does not work although Firefox is OK.

Can you help?

+2  A: 

I have made it work in Chrome/Safari by making the following two changes:

  1. In your code change "$('#main').html('<textarea class=\"test\">aaaa</textarea>');" to include a line-height style, for example: "$('#main').html('<textarea class=\"test\" style=\"line-height: 16px\">aaaa</textarea>');"
  2. Change line 50 of the jquery.autogrow.js file from "if(this.line_height == NaN)" to "if(isNaN(this.line_height))"

The effect is quite jittery in Chrome/Safari, this seems to be something to do with WebKit reporting the newly applied height of the textarea as 4px less then you set it to, I assume this is due to the box model and some browser applied styles, but I don't know. If your happy with the effect in FF then this should work, as it's also quite jittery in FireFox.

beggs
I did same as you said but did not work. Is there anywhere else you change?
HP
Never mind. I changed the code back to original and worked !!
HP