For our next example, we are going to see a textarea autogrow plugin. This is going to be an easy one to use, but very useful in the insert and edit forms of our component. This time we are going to use the plugin from Antti Kaihola and we can find it here:

http://github.com/akaihola/jquery-simpleautogrow.

Download the packed file. Inside we will find a file called jquery.simpleautogrow.js. Place this file in the administrator/components/com_tinynews/js folder. After placing the file, we need to modify our form.php template file placed at administrator/components/com_tinynews/views/addnews/tmpl/. Remember how we declared our previous script? We are going to do something similar now:

<?php
            defined('_JEXEC') or die('Restricted access'),
            $js = JURI::base().'components/com_tinynews/js/jquery.simpleautogrow.js';
            $document =& JFactory::getDocument();
            $document->addScript($js);
        

The only difference is the name of the script we are loading. After that, we will make use of the plugin:

$js = "
            jQuery(document).ready(function($){
            $('textarea').simpleautogrow();
            });
            ";
            $document->addScriptDeclaration($js);
            ?>
        

As you can see, simpleautogrow is the function to call. With this simple call, our textarea will adapt its height to the amount of text it has. For example, in a fresh form, we would have something similar to the following screenshot:

If we try to write something in the textarea, we will see how it adapts to our text, as seen in the next screenshot:

Interesting, isn't it? This will help us provide a textarea that will automatically adapt to our needs, and incorporating it was very easy, thanks to the plugin. Our next stop is going to be the frontpage of our component.

But remember that you can find the modified form.php file in the textarea_plugin folder of Chapter 9 in the code bundle.