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
Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

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

});
Avatar of Abrasax7
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
Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Abrasax7
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?
Avatar of Abrasax7
Abrasax7

ASKER

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?
Avatar of Abrasax7
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}
Avatar of Abrasax7
Abrasax7

ASKER

partially helped me
Thanks for the points!
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo