Jquery autoresize

Abrasax7
Abrasax7 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
});

});

Author

Commented:
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
Yes, in the <head> section between <script> tags:

<script type="text/javascript">

$(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
});

});
   
</script>

Author

Commented:
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?

Author

Commented:
Okay i solved that problem by putting it in {literal} tags. but still not working hmm
Are you doing everything in accordance with the plugin documentation?

Author

Commented:
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}

Author

Commented:
partially helped me
Thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial