Boutons pour augmenter et réduire la taille d'un textarea.

[Thomas]

Bonjour,

Vous connaissez un script permettant d'afficher à côté des textareas des boutons pour augmenter/réduire sa taille ?

J'ai trouvé ce script :

Code : Tout sélectionner

<script language="JavaScript" type="text/javascript">
//<![CDATA[
  function initResizableTextareas()
{
  var textareas = $A(document.getElementsByTagName("textarea"));
  textareas.each(function(textarea) { new ResizeableTextarea(textarea).build() });
}

var ResizeableTextarea = Class.create();
ResizeableTextarea.prototype = {
  initialize: function(obj)
  {
    this.max_height = 500;
    this.min_height = 40;
    this.step       = 40;
    this.textarea = obj;
    this.current_height = this.textarea.offsetHeight;
  },
  build: function() {
    // Create elements
    this.container            = document.createElement("span");
    this.container.className  = "resizebuttons";
    this.button_inc           = document.createElement('a');
    this.button_dec           = document.createElement('a');
    this.button_inc.className = "increase";
    this.button_dec.className = "decrease";
    this.button_inc.title     = "Increase size of textarea";
    this.button_dec.title     = "Decrease size of textarea";
    // Append elements
    this.textarea.parentNode.insertBefore(this.container, this.textarea);
    this.container.appendChild(this.button_inc);
    this.container.appendChild(this.button_dec);
    // Add event listener
    Event.observe(this.button_inc, "click", this.increaseHeight.bindAsEventListener(this), false);
    Event.observe(this.button_dec, "click", this.decreaseHeight.bindAsEventListener(this), false);
  },
  increaseHeight: function(e)
  {
    if (this.current_height >= this.max_height) return false;
    this.current_height = this.current_height+40;
    Element.setStyle(this.textarea, {height: this.current_height+"px"});
    Event.stop(e);
  },
  decreaseHeight: function(e)
  {
    if (this.current_height <= this.min_height) return false;
    this.current_height = this.current_height-40;
    Element.setStyle(this.textarea, {height: this.current_height+"px"});
    Event.stop(e);    
  }
}
Event.observe(window, "load", initResizableTextareas , true);

//]]>
</script>

Mais il n'affiche rien

PS : je ne connais rien en javascript.

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[lpgc]

bonjour Toto,

super le script Mais trop avancé pour moi,

je passerai la semaine prochaine 1 ou 2 jours à étudier cela je crois que çà en vaut la peine

à première vue, çà utilise le prototype de l'objet textarea pour lui ajouter :
des méthodes, propriétés et events
et ainsi créer les objets boutons associés aux textarea

Peux t'on savoir sur quel site c'est implémenté
Et Avez-vous besoin de savoir au niveau du document si la textarea change de taille

Cordialement
Christian

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

[Nucleos]

Je ne m'y connais pas en JavaScript, mais le sujet a l'air largement traîté en anglais, avec les mots-clés increase decrease textarea. Notamment sur le premier lien par exemple : Case study: Zoom Textarea.

[Thomas]

Peux t'on savoir sur quel site c'est implémenté

http://www.bartelme.at/journal/293/#writecomment

Et Avez-vous besoin de savoir au niveau du document si la textarea change de taille

Non

@nucleos : ok merci je vais voir

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[Humpfff]

Je flirte avec le Hors-sujet, pour rappeler l'existence d'une extension pour Firefox qui permet de modifier la taille d'un textarea : Resizable Textarea.

L'utilisation est simplissime : il suffit de placer le curseur sur un bord ou coin du textarea et puis y'a qu'à glisser jusqu'à obtenir la taille désirée.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5