AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Compteur de mots (ultra simple) [jQuery]

    Partagez
    Invité

    le Sam 15 Mar 2014 - 5:40

    Bonjour :)

    En cherchant à comprendre d'où venait l'erreur sur un ancien compteur de mots, j'ai créé une version ultra simpliste et très facile à mettre en place.

    Rendu :

    Spoiler:


    En cliquant sur le bouton "Compter les mots", une boîte de dialogue s'affiche avec le nombre de mots


    Pages Javascript : Ajouter ce code sur toutes les pages

    Code:
    $(function(){
    $('[value="Prévisualiser"]').before('<input class="cw" type="button" value="Compter les mots" onclick="alert($(\'#text_editor_textarea\').sceditor(\'instance\').val().split(\' \').filter(function(v){return v!==\'\'}).length + \' mot(s).\');"/>  ');
    });


    Pour ceux qui voudraient personnaliser le bouton avec du CSS, il faudra utiliser la classe cw mise sur le bouton :) !
    Note (merci Sparrow-Style ^^) : Pour forcer le bouton à prendre la même apparence que le bouton "prévisualiser" ou "envoyer", vous pouvez remlacer "cw" dans le code par, respectivement "liteoption" ou "mainoption" !


    VERSION SANS ALERT : Pour ceux qui ne sont pas fan d'une popup en guise d'affichage, voici la seconde version, qui remplace le texte du bouton avec le nombre de mots en cliquant sur le bouton.
    Code:
    $(function(){
    $('[value="Prévisualiser"]').before('<input class="cw" type="button" value="Compter les mots" onclick="$(this).val(\'Compter les mots - \' + $(\'#text_editor_textarea\').sceditor(\'instance\').val().split(\' \').filter(function(v){return v!==\'\'}).length + \' mot(s)\');"/>  ');
    });


    Rendu :


    Et ... Ben c'est tout ! Enjoy ^^


    Dernière édition par Alec Kuro le Dim 16 Mar 2014 - 12:38, édité 2 fois
    Okhmhaka
    FémininAge : 31Messages : 31751

    le Sam 15 Mar 2014 - 21:05

    Oh! Super ça, j'en avais trouvé des compteurs de mot mais ils étaient plus compliqués à mettre en place... C'est nickel je te remercie !
    Du coup pour ceux qui voudraient que le bouton ait automatiquement la même apparence que les autres il faut changer la class "cw" par "mainoption" pour qu'il soit pareil que le "envoyer" ou "liteoption" pour qu'il soit comme le "prévisualiser". Enfin j'suppose x)



    Invité

    le Dim 16 Mar 2014 - 12:38

    Pour l'apparence des boutons, j'avoue que je n'ai pas testé, la simple insertion du code en jQuery lui fait prendre la même apparence que les autres (sur mon forum test et celui d'une amie en tout cas ^^), mais en effet ajouter une des classes citées devrait forcer un rendu similaire aux deux autres boutons :)

    EDIT : J'ai ajouté la précision, ainsi qu'une version sans alert, ça peut toujours servir ^^
    Offrande
    FémininAge : 25Messages : 185

    le Jeu 20 Mar 2014 - 0:14

    Pas mal du tout ! Merci beaucoup pour le partage !
    louha
    FémininAge : 29Messages : 212

    le Jeu 3 Avr 2014 - 2:57

    j'en cherchais un comme ça depuis un moment ! Merci !
    Usopp
    MasculinAge : 21Messages : 69

    le Ven 2 Mai 2014 - 11:03

    Merci^^
    Ailou ~3
    FémininAge : 17Messages : 60

    le Mer 14 Mai 2014 - 15:24

    Merci :)
    smily
    FémininAge : 18Messages : 63

    le Ven 23 Mai 2014 - 19:07

    Merci :B !
    John Parker
    MasculinAge : 34Messages : 57

    le Sam 14 Juin 2014 - 0:01

    Merci beaucoup pour l'astuce ! ^^



    Choubakawa
    MasculinAge : 23Messages : 59

    le Sam 28 Juin 2014 - 16:52

    Merci :)



    Piratress
    FémininAge : 19Messages : 188

    le Mar 1 Juil 2014 - 17:53

    Sympa comme tutoriel merci j'en cherchais justement un désespérément ! xD
    Marwin
    MasculinAge : 24Messages : 47

    le Dim 6 Juil 2014 - 1:56

    merci
    Alumine
    FémininAge : 19Messages : 487

    le Jeu 31 Juil 2014 - 13:49

    Merci (=



    Alumine
    ( Lou' )
    FémininAge : 21Messages : 108

    le Ven 1 Aoû 2014 - 15:06

    Mercii c'est super utile **
    Alumine
    FémininAge : 19Messages : 487

    le Ven 26 Sep 2014 - 20:19

    Merci !! C'est une super idée (=



    Alumine
    Black Chocolate
    MasculinAge : 27Messages : 49

    le Ven 14 Nov 2014 - 11:43

    Merci beaucoup ! ♥
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc 2014 - 7:54

    thank's
    katastukye
    FémininAge : 24Messages : 17

    le Dim 1 Fév 2015 - 7:11

    waw!! Merci! C'est justement ce que je cherchais!!!
    Kirito
    MasculinAge : 21Messages : 181

    le Dim 22 Mar 2015 - 11:57

    Merci '-'
    crash_
    FémininAge : 21Messages : 49

    le Ven 3 Avr 2015 - 12:50

    merci beaucoup pour ce code, ça fait longtemps que je cherchais !





    Rejoignez-moi sur Catch'em All, votre RPG pokémon
    Goupixette
    FémininAge : 25Messages : 28

    le Jeu 4 Juin 2015 - 13:36

    Depuis le temps que je voulais en mettre un ** merciii <3



    Shacoham
    MasculinAge : 23Messages : 82

    le Sam 6 Juin 2015 - 21:23

    Merci beaucoup Very Happy ça va être super pratique pour mon forum Very Happy
    Alec Sing Toa
    FémininAge : 25Messages : 58

    le Sam 22 Aoû 2015 - 19:28

    Un grand merci ^ ^ Très simple à mettre pour les admins et très simple à utiliser pour les membres, c'est vraiment pratique.
    Kelalin
    FémininAge : 24Messages : 1425

    le Sam 22 Aoû 2015 - 23:24

    Merci !!! (ノ´ー`)ノ
    lilissa
    FémininAge : 23Messages : 29

    le Dim 29 Nov 2015 - 2:08

    merci beaucoup ♥ vraiment pratique Very Happy
    Contenu sponsorisé

    Aujourd'hui à 0:36


      La date/heure actuelle est Dim 22 Jan 2017 - 0:36