Textarea Autoresize « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

Textarea Autoresize

7 posts from 3 voices

Started 11 months ago by xenius
Latest reply from Ismael
This topic is not resolved

Tags:

xenius
Member

Hi,

I have made a single page in php that loads an alternative contact page, which is showing up fine. I want to have an autosize plugin on the textareas like this: http://lepture.com/demo/auto-textarea-resize/ (or another variant)

Adding the JS inline in the page results in a JS error, as does registering the script in the functions and calling it that was. Both of the errors seem to be that the script can not run because jQuery is not finished. I've search the forums and I found that adding the script to another .js might work, but that too didn't work. I'm running out of options, how can I get this to work?

Posted 11 months ago #

Dude
Dude

Probably the easiest way would be to add the code to js/avia.js. Add this code:

$.fn.textResizer = function(options) {
                var el = $(this), h;
                var settings = {
                    minHeight: el.height(),
                    maxHeight: 300,
                    duration: 100
                }
                if (options) {
                    $.extend(settings, options);
                }
                var clone = el.clone().removeAttr('id').removeAttr('class').css({position:'absolute', top:'-9999em',left:'-9999em',width: el.width(), height: 'auto'}).appendTo('body');
                $(this).keyup(function(e) {
                    h = clone.val(el.val()).height(0).scrollTop(10000).scrollTop() + 16;
                    h = Math.min(Math.max(settings.minHeight, h), settings.maxHeight);
                    if (el.height() != h) {
                        if($.browser.msie) {
                            el.height(h);
                        } else {
                            el.stop(1,1).animate({height: h}, settings.duration);
                        }
                    }
                });
                return this;
            }

to the bottom of the file and the function call inside the document.ready function. I'd make sure that it just affects your, specific contact form textarea (eg with id or class).

Posted 11 months ago #

xenius
Member

Hi, thanks for your reply. I've put the script where you said, just before the end of the document ready function, and added $('#textarea').textResizer(); below it just like the demo of the page I mentioned in the first post. (I just kept the ID easy, I'll change it later).

No JS errors show but it's not working. full code (including the closer for document ready:

$.fn.textResizer = function(options) {
        var el = $(this), h;
        var settings = {
            minHeight: el.height(),
            maxHeight: 300,
            duration: 100
        }
        if (options) {
            $.extend(settings, options);
        }
        var clone = el.clone().removeAttr('id').removeAttr('class').css({position:'absolute', top:'-9999em',left:'-9999em',width: el.width(), height: 'auto'}).appendTo('body');
        $(this).keyup(function(e) {
            h = clone.val(el.val()).height(0).scrollTop(10000).scrollTop() + 16;
            h = Math.min(Math.max(settings.minHeight, h), settings.maxHeight);
            if (el.height() != h) {
                if($.browser.msie) {
                    el.height(h);
                } else {
                    el.stop(1,1).animate({height: h}, settings.duration);
                }
            }
        });
        return this;
    }

  $('#textarea').textResizer();

})(jQuery);

anything out of place?

Posted 11 months ago #

Dude
Dude
Hi!

Probably the element #textarea doesn't exist. Instead use:
```
jQuery('textarea').textResizer();
```
Best regards,
Peter
Posted 11 months ago #
xenius
Member

actually the id does exists, but I can't seem to target anything on the page from avia.js. I tried something simple like
jQuery('textarea').css('border','1px solid red !important'); but that does nothing either. I've tried adding the textarea via the wp-admin and also by adding the textarea in page.php, neither does anything, and the styles do not show up in firebug. The problem must be some sort of targetting issue.

seems to be that when the avia script runs the textarea doesn't exist yet, therefore it can not be targetted.

Posted 11 months ago #
xenius
Member

ok nevermind, I hacked it together by adding a new script to the wp loadqueue that loads after page is complete. it works now :)
thanks for the support

Posted 11 months ago #
Ismael
Moderator

Hi xenius,

Glad that it worked. :)

Regards,
Ismael

Posted 11 months ago #