This tutorial will enable the user to enable or disable the automatic resizing textarea based on add-on jQuery Autosize.

Demonstration

Download

How to integrate it into your website

The .js is to be called after the textarea zone and after the call to the jQuery library. Simply add before the end of the closing tag of the body </body>.

Now that we have the library installed on the site, we will use the textarea of ​​interest.

It is very simple to use our script. Just add the div <div class="oft_textarea_autoresize"> before textarea and </div> close after the textarea.

Example

<div class="oft_textarea_autoresize">
	<textarea class="form-control"></textarea>
</div>

The result will be the same as in the above demonstration.

How to Set Up

Setting Language

There is no default language. It is therefore necessary to pass a language in any case.

1. First case if you only have one language on your website.

Just in this case to change the call line to the function in the javascript file. Here it is stated 'en' for English, but the 'fr' in French is also available. The line is at the end of the file.

oft_textarea_autosize('en');

2. You must support multiple languages ​​on your website.

As with online-free-tools.com site, we use several languages. I specify the language each time a line in our page was added to the language to be available in javascript.

<script>
	oft_lang = 'en';
</script>

Then we use this information when calling the script. The line in question is at the end of javascript file.

oft_textarea_autosize(oft_lang);

Add a new language

The 'to' is changed when one checks the language of the page in the script. It may be integrated at any time prior to the call to our script.

It is very easy to add a new language. Simply add a line to the language table with the new. Here we will show how to add Spanish for example.

The basic code:

// Traductions
var oft_textarea_lang = {

	'en' : {
		'text' : 'Textarea autosize',
		'disable' : 'Disable',
		'enable' : 'Enable'
	},

	'fr' : {
		'text' : 'Zone de texte auto-redimensionnée',
		'disable' : 'Désactiver',
		'enable' : 'Activer'
	}
}

Becomes:

// Translations with the Spanish support added
var oft_textarea_lang = {

	'en' : {
		'text' : 'Textarea autosize',
		'disable' : 'Disable',
		'enable' : 'Enable'
	},

	'fr' : {
		'text' : 'Zone de texte auto-redimensionnée',
		'disable' : 'Désactiver',
		'enable' : 'Activer'
	},

	'es' : {
		'text' : 'Cuadro de texto automático de cambio de tamaño',
		'disable' : 'Inhabilitar',
		'enable' : 'Permitir'
	}
}

If you have any translations you want to propose and integrate in our version, do not hesitate to share them in the comments for example!

CSS Style

The text style of the toolbar can be customized. Just take this CSS code snippet and change it according to your need.

.oft_textarea_container{
	text-align:right;
	color:#AAAAAA;
}

.oft_textarea_disable, .oft_textarea_enable{
	color:#AAAAAA;
	font-weight:bold;
	cursor:pointer;
}

.oft_textarea_disable:hover, .oft_textarea_enable:hover{
	color:#363636;
	font-weight:bold;
	cursor:pointer;
}

Description

The add-on jQuery Autosize allows typing text boxes textarea to automatically resize when typed text should normally be hidden. The add-on allows basic enable and disable resizing via a piece of JavaScript code. The improvement we offer allows visitors to directly activate or deactivate the automatic resizing. Indeed, when the text begins to be too long, it becomes difficult for the user to navigate through the window.

The script is very easy to use. Just add div with oft_textarea_autoresize around the textarea. There is no need to specify the name or the id of the textarea. Adding buttons for the user will be added automatically. The basic languages ​​supported are English and French, but we will explained how to add your own languages ​​or customize the text.

Possible Bugs

The problem which should happen the most is when you do not have the toolbar that does not display. This can happen when you add a new textarea fields and you do not call back the listener on the area.

Demonstration

Add a textarea (notice that the options are not added)

Run the code oft_textarea_autosize(oft_lang);

What the result might look like

To facilitate the understanding of everyone here, your HTML script might look like.

<body>

<form method="post">
	<div class="oft_textarea_autoresize"><textarea name="content"></textarea></div>
	<input type="submit" />
</form>

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.autosize.js"></script>
<script src="/js/oft_textarea_autosize.min.js"></script>
<link rel="stylesheet" href="/css/oft_textarea_autosize.min.css">

</body>

Link to the add-on Autosize: Autosize Textarea
The script is now a standalone and therefore no longer requires jQuery, but I prefer to keep the version based on jQuery.

  Comments

Add a comment

Name / Nickname

Mail

Comment

Notify me when there is a new comment

Add