Search code examples
javascriptjqueryhtmllivequeryautogrow

Autogrow jQuery Plugin on dynamic content in Internet Explorer

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?

Solution

  • 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.