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
    avatar
    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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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)



    avatar
    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 ^^
    avatar
    Offrande
    FémininAge : 26Messages : 193

    le Jeu 20 Mar 2014 - 0:14

    Pas mal du tout ! Merci beaucoup pour le partage !
    avatar
    louha
    FémininAge : 30Messages : 213

    le Jeu 3 Avr 2014 - 2:57

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

    le Ven 2 Mai 2014 - 11:03

    Merci^^
    avatar
    Ailou ~3
    FémininAge : 18Messages : 61

    le Mer 14 Mai 2014 - 15:24

    Merci :)
    avatar
    smily
    FémininAge : 18Messages : 64

    le Ven 23 Mai 2014 - 19:07

    Merci :B !
    avatar
    John Parker
    MasculinAge : 35Messages : 57

    le Sam 14 Juin 2014 - 0:01

    Merci beaucoup pour l'astuce ! ^^



    avatar
    Choubakawa
    MasculinAge : 24Messages : 78

    le Sam 28 Juin 2014 - 16:52

    Merci :)



    avatar
    Piratress
    FémininAge : 20Messages : 213

    le Mar 1 Juil 2014 - 17:53

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

    le Dim 6 Juil 2014 - 1:56

    merci
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 31 Juil 2014 - 13:49

    Merci (=



    Alumine
    avatar
    ( Lou' )
    FémininAge : 22Messages : 108

    le Ven 1 Aoû 2014 - 15:06

    Mercii c'est super utile **
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 26 Sep 2014 - 20:19

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



    Alumine
    avatar
    Black Chocolate
    MasculinAge : 28Messages : 58

    le Ven 14 Nov 2014 - 11:43

    Merci beaucoup ! ♥
    avatar
    sica3
    MasculinAge : 44Messages : 135

    le Mar 2 Déc 2014 - 7:54

    thank's
    avatar
    katastukye
    FémininAge : 25Messages : 20

    le Dim 1 Fév 2015 - 7:11

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

    le Dim 22 Mar 2015 - 11:57

    Merci '-'
    avatar
    crash_
    FémininAge : 22Messages : 50

    le Ven 3 Avr 2015 - 12:50

    merci beaucoup pour ce code, ça fait longtemps que je cherchais !
    avatar
    Goupixette
    FémininAge : 26Messages : 28

    le Jeu 4 Juin 2015 - 13:36

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



    avatar
    Shacoham
    MasculinAge : 24Messages : 82

    le Sam 6 Juin 2015 - 21:23

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

    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.
    avatar
    Kelalin
    FémininAge : 25Messages : 1709

    le Sam 22 Aoû 2015 - 23:24

    Merci !!! (ノ´ー`)ノ
    avatar
    lilissa
    FémininAge : 24Messages : 30

    le Dim 29 Nov 2015 - 2:08

    merci beaucoup ♥ vraiment pratique Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Nov 2017 - 2:39