Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #12890

    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?

    #77057

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

    #77058

    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?

    #77059

    Hi!

    Probably the element #textarea doesn’t exist. Instead use:

    jQuery('textarea').textResizer();

    Best regards,

    Peter

    #77061

    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.

    #77062

    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

    #77063

    Hi xenius,

    Glad that it worked. :)

    Regards,

    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Textarea Autoresize’ is closed to new replies.