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 - 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 - 12:38, édité 2 fois
    Okhmhaka
    FémininAge : 32Messages : 31823

    le Sam 15 Mar - 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 - 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 - 0:14

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

    le Jeu 3 Avr - 2:57

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

    le Ven 2 Mai - 11:03

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

    le Mer 14 Mai - 15:24

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

    le Ven 23 Mai - 19:07

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

    le Sam 14 Juin - 0:01

    Merci beaucoup pour l'astuce ! ^^



    Choubakawa
    MasculinAge : 23Messages : 59

    le Sam 28 Juin - 16:52

    Merci :)



    Piratress
    FémininAge : 19Messages : 190

    le Mar 1 Juil - 17:53

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

    le Dim 6 Juil - 1:56

    merci
    Alumine
    FémininAge : 19Messages : 487

    le Jeu 31 Juil - 13:49

    Merci (=



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

    le Ven 1 Aoû - 15:06

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

    le Ven 26 Sep - 20:19

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



    Alumine
    Black Chocolate
    MasculinAge : 27Messages : 53

    le Ven 14 Nov - 11:43

    Merci beaucoup ! ♥
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc - 7:54

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

    le Dim 1 Fév - 7:11

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

    le Dim 22 Mar - 11:57

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

    le Ven 3 Avr - 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 - 13:36

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



    Shacoham
    MasculinAge : 23Messages : 82

    le Sam 6 Juin - 21:23

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

    le Sam 22 Aoû - 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 : 1442

    le Sam 22 Aoû - 23:24

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

    le Dim 29 Nov - 2:08

    merci beaucoup ♥ vraiment pratique Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Fév - 17:07