Avatar of Abrasax7
Abrasax7
 asked on

Jquery autoresize

Hey guys, thanks for helping me out
this is probably a really simple question, but im a newbie with js so here goes.

I want to use this autoresize plugin http://james.padolsey.com/javascript/jquery-plugin-autoresize/ 

I downloaded the script, put it in my JS folder and pointed to it in my header like this: <script type="text/javascript" src="{$smarty.const._URL}/js/autoresize.jquery.js"></script>

now how can i make the textarea in the following form autoresize, i.e where do i need to add/change code.

====================form on my site =========================

                        <form action="" name="myform" method="post" id="myform">
                  <input type="hidden" id="c_username" name="username" value="Anonymous" class="inputtext" /><br />
                  <span style="color: #8c8c8c;">{$lang.your_comment}:</span><br />
         
                  <textarea id="c_comment_txt" name="comment_txt" style="width:470px" rows="5" onkeyup="textLimit(this, 400);"></textarea><br /><br />
                  <input type="hidden" id="c_vid" name="vid" value="{$uniq_id}" />
                  <input type="hidden" id="c_user_id" name="user_id" value="0" />
                  <br />
                  <input type="submit" id="c_submit" name="Submit" value="{$lang.submit_comment}" class="inputbutton" />

====================/ form on my site =========================

on the plugin homepage it says that this is an example implementation:

====================Example implementation =========================

$('textarea#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
====================/ Example implementation =========================

but where do I add this?


again, thanks for the help :)

~Abrasax7
JavaScript

Avatar of undefined
Last Comment
OmniUnlimited

8/22/2022 - Mon
OmniUnlimited

You would add it to the $(document).ready function:

$(document).ready(function() {

$('textarea#c_comment_txt').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});

});
Abrasax7

ASKER
hey Omni thanks for your comment.

and where do I put this whole thing? in the head, on the page with the textarea? do I have to put it in script tags?

thankyou
ASKER CERTIFIED SOLUTION
OmniUnlimited

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Abrasax7

ASKER
Fatal error: Smarty error: [in header.tpl line 25]: syntax error: unrecognized tag: $('textarea#c_comment_txt').autoResize({ // On resize: onResize : function() { $(this).css({opacity:0.8 (Smarty_Compiler.class.php, line 446) in C:

is it that smarty and jquery both use the dollar sign for functions?
Your help has saved me hundreds of hours of internet surfing.
fblack61
Abrasax7

ASKER
Okay i solved that problem by putting it in {literal} tags. but still not working hmm
OmniUnlimited

Are you doing everything in accordance with the plugin documentation?
Abrasax7

ASKER
Okay I found the reason why it didnt work. there was a conflict between different jquery versions. i had to use following in my header to get it to work

<script type="text/javascript" src="{$smarty.const._URL}/js/autoresize.jquery.js"></script>

<script type='text/javascript'>  
 
 var $jq = jQuery.noConflict();  
 
</script>  


{literal}
<script type="text/javascript">

jQuery(document).ready(function() {

$jq('textarea#c_comment_txt').autoResize({
    // On resize:
/*   onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
      animate: true,
    // Quite slow animation:
    animateDuration : 150,
    // More extra space:
    extraSpace : 20      */
});

});
</script>
{/literal}
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Abrasax7

ASKER
partially helped me
OmniUnlimited

Thanks for the points!