How to enable and disable the autosize of a textarea field with the add-on jQuery Autosize

  Snippets   -   25/06/2015


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


Demonstration




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

(notice that the options are not added)

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.


Tags :  
Snippets
  
Add-On
  
jQuery
  
HTML
  


Autodidact passionate about the web, I'm always looking for new challenges.
Founder of Online-Free-Tools.com.



  Comments


No comment

Add a comment




 FR     EN  

Copyright 2024 -   Contact us - 2024-03-29 08:13:33