C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Système d'onglets simple et personnalisable
Lun 17 Sep 2018, 05:44 par heresy.

» Effet pour vos catégories
Sam 15 Sep 2018, 06:41 par Dynaste

» [RPG] Fiche personnage avec bannière latérale
Mar 11 Sep 2018, 15:29 par Rosalie Hale

» Signature codée avec onglets
Sam 01 Sep 2018, 16:11 par Plumeplume

» Mettre votre © Copyright dans le footer de votre forum
Mar 28 Aoû 2018, 12:13 par kaiton

» Sous-forums en retour à la ligne
Lun 27 Aoû 2018, 13:26 par sergiomarquina

» Effet pour vos sous-forums
Lun 27 Aoû 2018, 13:23 par sergiomarquina

» Trois colonnes avec effet Zoom
Lun 27 Aoû 2018, 08:40 par sergiomarquina


Partagez | 
 

Saisie de réponses redimensionnable

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Saisie de réponses redimensionnable


Informations générales

Description :
Aujourd’hui, nous apprendrons à mettre en place une petite option bien sympathique sur notre forum. Il s’agit en fait d’un script qui permettra à l’utilisateur de redimensionner, comme il l’entend, la zone de texte de la page des réponses. Une possibilité qui trouve tout son sens sur des forums où l’on a l’habitude d’écrire de longs messages, comme sur les forums RPG, par exemple.

Démo :
Démonstration du script

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Orange le 19/09/2010 | Validé par Orange

Mise(s) à jour :
Mise à jour le 31/07/2012 par Espeon

Le tutoriel


Avant toute chose, veuillez noter que la plupart des navigateurs récents gèrent déjà par défaut le redimensionnement des zones de texte (à savoir Firefox, Chrome, Safari, Opera, ...). Cependant, Internet Explorer -du moins jusqu'à sa version 8- fait encore des siennes, et le script prend donc toute son utilité dans un tel cas.

Autrement, il n'est peut-être pas nécessaire de déployer une telle solution. A vous de juger.


La procédure dans son ensemble est relativement simple. Il suffira d’ajouter un script JavaScript à notre forum, d’ajouter une classe spécifique à notre zone de texte, puis de modifier le rendu par CSS.

Installation du script


Le script a besoin de la bibliothèque JQuery pour fonctionner. Fort heureusement, celle-ci est incluse par défaut dans ForumActif, il n'y a rien à faire de ce côté-là !

Pour héberger le script sur votre forum, rendez-vous dans votre Panneau d'Administration > Modules > HTML & Javascript > Gestion des codes Javascript.
Créez un nouveau script. Nommez-le simplement ("Textarea redimensionnable" convient parfaitement). Appliquez-le à l'ensemble des pages de votre forum.
Copiez/Collez le code suivant :
Code:
(function($){var textarea,staticOffset;var iLastMousePos=0;var iMin=32;var grip;$.fn.TextAreaResizer=function(){return this.each(function(){textarea=$(this).addClass('processed'),staticOffset=null;$(this).wrap('<div class="resizable-textarea"><span></span></div>').parent().append($('<div class="grippie"></div>').bind("mousedown",{el:this},startDrag));var grippie=$('div.grippie',$(this).parent())[0];grippie.style.marginRight=(grippie.offsetWidth-$(this)[0].offsetWidth)+'px'})};function startDrag(e){textarea=$(e.data.el);textarea.blur();iLastMousePos=mousePosition(e).y;staticOffset=textarea.height()-iLastMousePos;textarea.css('opacity',0.25);$(document).mousemove(performDrag).mouseup(endDrag);return false}function performDrag(e){var iThisMousePos=mousePosition(e).y;var iMousePos=staticOffset+iThisMousePos;if(iLastMousePos>=(iThisMousePos)){iMousePos-=5}iLastMousePos=iThisMousePos;iMousePos=Math.max(iMin,iMousePos);textarea.height(iMousePos+'px');if(iMousePos<iMin){endDrag(e)}return false}function endDrag(e){$(document).unbind('mousemove',performDrag).unbind('mouseup',endDrag);textarea.css('opacity',1);textarea.focus();textarea=null;staticOffset=null;iLastMousePos=0}function mousePosition(e){return{x:e.clientX+document.documentElement.scrollLeft,y:e.clientY+document.documentElement.scrollTop}}})(jQuery);

Il s'agit du script compressé pour gagner de la place (et donc être chargé plus vite).

Créez à présent un nouveau javascript, que vous appellerez "Général" par exemple (si vous n'en avez pas déjà). Appliquez-le à toutes les pages et insérez-y le code suivant :
Code:
$(document).ready(function() {
    /* Applique le jQuery textarea resizer */
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});

Spoiler:
 

Le template


Une fois notre script en place, il nous faudra procéder à quelques modifications de notre template posting_body (Panneau d’Administration > Affichage > Template > Poster et Messages privés).

Au cas où ce ne serait pas assez clair, notez que le template posting_body ne se trouve pas dans les templates généraux, comme nous en avons l'habitude, mais bien dans : Poster et Messages privés.


Éditez () le template posting_body et repérez le code suivant (une recherche (Ctrl+F) sur {MESSAGE} devrait aboutir) :

Code:
<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" onclick="storeCaret(this)" onkeyup="storeCaret(this)" name="message" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual">{MESSAGE}</textarea>

De-là, recherchez plus précisément ce paramètre : class="post" et, juste avant post, rajoutez la classe resizable précédée d'un espace, pour obtenir class="post resizable". Ceux qui ont suivi le spoiler l'auront compris : cette classe indique quelle zone de texte sera affectée par le script.

Une fois les modifications effectuées le résultat est le suivant :
Code:
<textarea id="text_editor_textarea" class="post resizable" style="width:100%;height:250px" onclick="storeCaret(this)" onkeyup="storeCaret(this)" name="message" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual">{MESSAGE}</textarea>

Enregistrez puis n'oubliez pas de publier () votre template.

Installation/Personnalisation CSS du code


Un code CSS est nécessaire au bon fonctionnement du code, rendez-vous dans la feuille de style (Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS) de votre forum pour y coller le code suivant :

Code:
div.grippie {
    background:#EEEEEE url(http://img180.imageshack.us/img180/3926/grippie1.png) no-repeat scroll center 2px;
    border-color:#DDDDDD;
    border-style:solid;
    border-width:0pt 1px 1px;
    cursor:s-resize;
    height:9px;
    overflow:hidden;
}

.resizable-textarea textarea {
    display:block;
    margin-bottom:0pt;
    width:95%;
    height: 20%;
}

Une fois ceci fait, le redimensionnement devrait être fonctionnel et nous pouvons passer à la personnalisation du code. Comme je me vois mal répertorier toutes les possibilités et manières de personnaliser le résultat, je vous fournis ci-dessous le code commenté, à vous de modifier comme vous le souhaitez. Sachez que seule la première portion du code peut-être modifiée facilement ; seuls les experts peuvent se risquer à modifier la seconde.

Code:
div.grippie {
    background:#EEEEEE url(http://img180.imageshack.us/img180/3926/grippie1.png) no-repeat scroll center 2px; /* Image/Couleur de fond */
    border-color:#DDDDDD; /* Couleur de la bordure */
    border-style:solid;  /* Type de bordure */
    border-width:0pt 1px 1px; /* Épaisseur des bordures */
    cursor:s-resize; /* Curseur au survol de la barre de redimensionnement */
    height:9px; /* Hauteur de la barre de redimensionnement  */
    overflow:hidden; /* Ne pas modifier */
}

Il ne vous reste plus qu'à faire preuve d'imagination pour modifier cette barre comme bon vous semble. Vous n'êtes pas tenu de garder les mêmes propriétés que celles données par le créateur du code, tant que vous gardez les lignes commentées "Ne pas modifier".

Voilà qui est tout pour ce tutoriel. Bonne chance à tous.



{ I would love to change the world, but they won't give me the source code }
MessageSujet: Saisie de réponses redimensionnable   Jeu 16 Sep 2010, 18:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5576



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Saisie de réponses redimensionnable   Mer 03 Aoû 2011, 09:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



03-08-2012 : Tutoriel revu et mis à jour


MessageSujet: Re: Saisie de réponses redimensionnable   Ven 03 Aoû 2012, 05:11
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Saisie de réponses redimensionnable   
Revenir en haut Aller en bas
 

Saisie de réponses redimensionnable

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Saisie de réponses redimensionnable
» Pb de saisie d'adresse
» Saisie des coordonnées
» Objet EDIT avec saisie filtrée
» Saisie des coordonnees geographiques sur 1490T

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit