AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    Générateur de profil / fiche perso RPG

    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    Sam 29 Jan 2011 - 20:15

    Salut salut,

    C'est encore moi,
    Aujourd'hui je vous propose cette page :
    http://www.creativejuiz.fr/jquery-generator.html

    Vous pouvez aisément créer une page en utilisant les pages HTML de Forum-Actif.
    Pour cela il vous faudra créer une page HTML reprenant la structure de base de votre forum, ne partez pas d'une page vierge (le but et de reprendre la bibliothèque jQuery déjà chargée par défaut sur votre forum).

    Une fois que vous avez une page html sans rien, il y a deux phases principales à prendre en compte :

    La création du formulaire HTML :
    Code:
    <form action="#" method="get" name="code_generator" id="code_generator">
       <p><label for="pseudo" class="label_gen">Ton pseudo</label> <input type="text" name="pseudo" id="pseudo" /></p>
       <p><label for="bio" class="label_gen">Ta biographie</label> <textarea name="bio" id="bio" cols="30" rows="6"></textarea></p>

       <p><button id="generate">Générer le code</button></p>
    </form>

    La mise en place de la zone qui recevra le code à copier/coller (HTML) :
    Code:
    <div id="generator_result">
       <p>Copiez/collez le code pré-sélectionné suivant :</p>
       <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
    </div>

    La mise en place de quelques styles par défaut (CSS, dans votre panneau d'admin) à vous de les personnaliser :
    Code:
    <style rel="stylesheet" type="text/javascript">
    <!--
       #code_generator, #generator_result {
          width: 400px;
          margin: 30px auto;
          padding: 20px;
          border: 1px solid #fff;
          -moz-border-radius: 12px;
       }
       .label_gen {
          display: inline-block;
          width: 100px;
          vertical-align: top;
       }
       #generator_result { text-align: center; display: none; }
             
    -->
    </style>

    Et enfin le Javascript pour le traitement "à la volée" des données renseignées :
    Code:
    <script type="text/javascript">
    //<![C<script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script> <!-- On importe la librairie JQuery -->
    <script type="text/javascript">

        $(document).ready(function(){
            $("#generate").click(function(){
                var pseudo = $("#pseudo").val(); //on récupère la valeur de pseudo
                var bio = $("#bio").val(); //on récupère la valeur de bio

                var the_code = "Mon pseudo est [b]" + pseudo + "[/b], voici ce que je peux raconter sur moi : \n\r[i]" + bio + "[/i]"; //on compose le BBcode à venir avec les éléments récupérés précédemment

                $("#generator_result").fadeIn(400, function(){ //on fait apparaitre le résultat
                    $(this).find("textarea").text(the_code).select(); //on affiche le contenu et on le sélectionne dans la foulée
                });
                return false; //on annule le comportement par défaut du bouton de validation
            });
        });
    </script>

    Le code est commenté, pour le comprendre plus facilement je vous invite à le copier/coller dans un outil tel que Notepad++ pour bénéficier d'une coloration syntaxique.

    En espérant qu'il vous soit utile.
    N'hésitez pas si vous avez des questions.

    Bises

    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    Générateur de profil / fiche perso RPG 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Mer 23 Mar 2011 - 21:33

    Bonjour je suis contente qu'il y est ce tutoriel, car je cherche depuis bien trop longtemps.
    Bon tout d'abord je voudrais savoir s'il est possible de me coder le code complet, car je suis correcte avec les codes, sauf que je ne sais pas trop comment les modifiés pour qu'il ressemble à quelque chose dans ce genre la :

    Spoiler:
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Ven 1 Avr 2011 - 9:19

    Tu devrais peut être faire une commande en conséquence ? Est-ce que je peux te demander quels sont les sites où tu as trouvé ces formulaires ? Ils sont classes @o@

    Riku > Dis-moi (permets que je te tutoie, même si, pour avoir découvert Creative Juiz depuis longtemps, cela me fait tout drôle de constater que c'est un mec plus jeune que moi et avec un pseudo façon manga qui tient ce site @o@ Comme quoi ils sont humains et normaux, ces codeurs fous en fait), est-ce que tu as une tournure de code qui permet de poster directement le contenu du formulaire à l'endroit de son choix ? J'ai vu ça sur certains forums et je trouve ça très impressionnant @_@
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Ven 1 Avr 2011 - 14:50

    Je les ai trouvés sur http://you-can.forumactif.com/ et l'autre je ne sais pas trop c'est koi le lien mais c'est un forum rpg à new york
    Kazuya
    Kazuya
    MasculinAge : 31Messages : 1499

    Mer 13 Avr 2011 - 20:38

    Il n'y a rien d'extraordinairement difficile, il faut just modifié sa CSS entre autre les input-case/post et les text-area, puis faire une tableau, et le tour est joué Wink
    Je ne te dis pas que ce n'est pas fastidieux, mais pas dur,, et à la porté de n'importe qui avec un minimum de connaissance CSS, vu que Riku nous à fait le plus dur, et merci à lui d'ailleurs!



    Générateur de profil / fiche perso RPG CKMiDeikSo
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Mer 13 Avr 2011 - 21:10

    oui oui merci, mais comme je ne sais pas trop par où commencer, je ne sais pas comment faire cela.
    veroniique
    veroniique
    FémininAge : 28Messages : 19

    Mer 11 Mai 2011 - 2:21

    J'ai fait un code, et bien, sa marchais et la sa marche plus. Je me demandais si une âme charitable pourrais vérifier se qui ne va pas dans mon code.

    Spoiler:

    Merci d'avance :houra:
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Mer 11 Mai 2011 - 9:15

    » Il manque un guillemet à la fin de la définition du code
    Code:
    var the_code = " ton bazar ";

    » Il faut que tu évites les accents dans la définition des variables : var credits = $("#credits").val();

    » Et enfin, quand tu déclares le code, il y a plein de HTML dedans. Il faut que tu le neutralises en mettant un antislash devant les guillemets. Sinon, il y a un problème d'interprétation du code :

    var the_code = "<balise1><balise2 attribut="valeur">texte</balise2></balise1>";

    Le script ne doit plus comprendre grand chose... Du coup, faut qu'il ne puisse pas interpréter directement les guillemets:

    var the_code = "<balise1><balise2 attribut=\"valeur\">texte</balise2></balise1>";

    Evidemment, faut faire AUSSI gaffe quand tu rajoutes une des valeurs déclarées :

    var the_code = "<balise1><balise2 attribut=\"valeur\">texte " + variable + "</balise2></balise1>";

    Utilises un éditeur de texte comme notepad++ pour bénéficier de la coloration syntaxique, ça devient tout de suite plus simple.
    veroniique
    veroniique
    FémininAge : 28Messages : 19

    Mer 11 Mai 2011 - 14:40

    Merci, mais sa ne marche toujours pas... En fait, quand je clique sur le bouton Générer le code, il y a rien qui se passe, sauf une actualisation de la page :S

    Je mets mon nouveau code

    Spoiler:
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Mer 11 Mai 2011 - 14:52

    Relis toi, tu n'as pas tout corrigé u_u' Dans certains cas tu as même mis l'anti slashe devant les guillemets ("\) ce qui ne sert à rien '_'

    Au pire, plutôt que de toute faire en vrac d'un coup, refait ton formulaire ligne par ligne, sans t'énerver, et tu en viendras à bout.
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Jeu 19 Mai 2011 - 3:00

    S'il vous plait quelqu'un voudrais repondre a ma question.
    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    Jeu 30 Juin 2011 - 11:03

    Hello tout le monde,

    Désolé pour le délais de réponse, j'ai oublié de suivre le sujet =_=
    Ouais, codeur fou et un peu trop passionné aussi :p

    Concernant ta question Christa, il est tout à fait possible d'envisager un post automatique, mais pas avec Forum-Actif à ma connaissance. Nous n'avons pas accès aux scripts PHP des forums...

    Mais peut-être est-il possible d'utiliser AJAX en incluant le formulaire de post directement dans la requête... ça serait à tester :)

    @Amelia sullivan : nous avons un espace de commande de code si jamais tu as encore besoin d'un coup de main Wink

    Merci à tous et bonne continuation.

    Riku




    Générateur de profil / fiche perso RPG 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Jeu 30 Juin 2011 - 11:41

    Si si, ils le font sur l'annuaire des forums de forumactif, via cette page '_' Je crois qu'il y a une astuce utilisant l'id du forum visé pour la création d'un nouveau message, mais je t'avoue que je n'ai pas creusé le sujet, ne maîtrisant vraiment pas la chose x_x
    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    Ven 1 Juil 2011 - 10:04

    Ok, ouais donc c'est bien avec de l'AJAX, parce que j'avais la même idée (id... lol).
    Par contre je ne vois pas le sujet, je ne suis pas inscrit.

    Si jamais j'ai un peu de temps je regarderai, mais en ce moment c'est tendu Wink

    Bonne journée.



    Générateur de profil / fiche perso RPG 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Lun 3 Oct 2011 - 5:56

    Bonjour, alors moi aussi j'essaie de faire un générateur de fiche et voici mon code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
       <head>
          <title>Generator 2.0</title>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          
          <style>
          <!--
             body {
                margin: 0;
                padding: 0;
                background: #e0e0e0;
                color: #a4a4a4;
                text-shadow: 1px 1px 0px #fff;
                
             }
             h1 { text-align: center; }
             form, #generator_result {
                width: 400px;
                margin: 30px auto;
                padding: 20px;
                border: 1px solid #fff;
                -moz-border-radius: 12px;
             }
             label {
                display: inline-block;
                width: 100px;
                vertical-align: top;
             }
             #generator_result { text-align: center; display: none; }
             
          -->
          </style>

       </head>
       
       <body>
          
          <script type="text/javascript">
          //<![CDATA[
             $(document).ready(function(){
                
                $("#generate").click(function(){
                   var nom = $("#nom").val();
                   var age = $("#age").val();
                   var race = $("#race").val();
                   var clan = $("#clan").val();
                   var sexe = $("#sexe").val();
                   var sexualite = $("#sexualite").val()
                   var avatar = $("#avatar").val()
                   var caract = $("#caract").val();
                   var pyshique = $("#physique").val();
                   var story = $("#story").val();
                   var arme = $("#arme").val();
                   
                   
                   var the_code = "<table cellpadding=\"0\" cellspacing=\"4\" border=\"0\" width=\"100%\"><tr><td width=\"150px\" valign=\"top\"><div class=\"mep_tinfos\">Informations</div><div class=\"mep_tinfos1\">Nom, Prénom</div><div class=\"mep_tinfos2\">" + nom + "</div><div class=\"mep_tinfos1\">Race</div><div class=\"mep_tinfos2\">" + race + "</div><div class=\"mep_tinfos1\">Clan</div><div class=\"mep_tinfos2\">" + clan + "</div><div class=\"mep_tinfos1\">Âge</div><div class=\"mep_tinfos2\">" + age + "</div><div class=\"mep_tinfos1\">Sexe</div><div class=\"mep_tinfos2\">" + sexe + "</div><div class=\"mep_tinfos1\">Sexualité</div><div class=\"mep_tinfos2\">" + sexualité + "</div><div class=\"mep_tinfos1\">Avatar</div><div class=\"mep_tinfos2\"><img src=\" " + avatar + " \" height=\"246px\"/></div></td><td valign=\"top\"><div class=\"mep_timg\"></div><div class=\"mep_tuto\"><div class=\"mep_tinfos\">Description du personnage</div><div class=\"mep_sinfos\">Caractère</div><div class=\"mep_sinfos2\"><blockquote>" + caract + "</blockquote></div><div class=\"mep_sinfos\">Physique</div><div class=\"mep_sinfos2\"><blockquote>" + physique + "</blockquote></div><div class=\"mep_sinfos\">Armes et pouvoirs</div><div class=\"mep_sinfos2\"><blockquote>" + arme + "</blockquote></div><div class=\"mep_sinfos\">Histoire</div><div class=\"mep_sinfos2\"><blockquote>" + story + "</blockquote></div></div></td></tr></table>

                   
                   $("#generator_result").fadeIn(400, function(){
                      $(this).find("textarea").text(the_code).select();
                   });
                   return false;
                });
                
             });
          //]]>
          </script>
          <h1>Générateur de Fiche</h1>
          <form action="#" method="get" name="code_generator" id="code_generator">
      <p><label for="nom" class="label_gen">Nom, Prénom</label> <input type="text" name="nom" id="nom" /></p>
      <p><label for="sexe" class="label_gen">Sexe</label> <input type="text" name="sexe" id="sexe" /></p>
      <p><label for="sexulalite" class="label_gen">Sexualité</label> <input type="text" name="sexualite" id="sexualite" /></p>
      <p><label for="avatar" class="label_gen">Avatar</label> <input type="text" name="avatar" id="avatar" /></p>
      <p><label for="age" class="label_gen">Âge</label> <input type="text" name="age" id="age" /></p>
      <p><label for="race" class="label_gen">Race</label> <input type="text" name="race" id="race" /></p>
      <p><label for="clan" class="label_gen">Clan</label> <input type="text" name="clan" id="clan" /></p>
      <p><label for="arme" class="label_gen">Armes et pouvoir</label> <textarea name="arme" id="arme" cols="30" rows="6"></textarea></p>
      <p><label for="caract" class="label_gen">Caractère</label> <textarea name="caract" id="caract" cols="30" rows="6"></textarea></p>
      <p><label for="physique" class="label_gen">Physique</label> <textarea name="physique" id="physique" cols="30" rows="6"></textarea></p>
      <p><label for="story" class="label_gen">Histoire</label> <textarea name="story" id="story" cols="30" rows="6"></textarea></p>

      <p><button id="generate">Générer le code</button></p>
    </form>
          
          <div id="generator_result">
          <p>Copiez/collez le code pré-sélectionné suivant :</p>
          <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
          </div>
       <p style="text-align: center;">Generator <strong>Kiowa</strong></p>

       </body>
    </html>

    Le forum sur lequel il est appliquer (page directe: http://vk-firstgeneration.superforum.fr/h2-generateur-fiche )

    Cela fait 4 fois que je recommence de A to Z, et toujours, lorsque j'appuie sur Generer, il me ramène à l'Accueil du forum. Si vous pouviez m'aider se serait fort apprécier Merci!
    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    Mar 4 Oct 2011 - 20:20

    Bonsoir,

    Tes noms de variables en JS ne doivent pas avoir d'accent.
    Il faut se contenter des caractères alphanumériques et éventuellement du underscore (touche 8 "_")

    Ta variable "sexualité" par exemple doit s'appeler "sexualite".

    Tu as bien nommé ta variable initialement, cependant tu utilises l'accent lorsque tu composes ton HTML.

    Bonne continuation Wink



    Générateur de profil / fiche perso RPG 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 4 Oct 2011 - 23:21

    Oups! je l'Avais corrigé sur mon programme mais pas fait sur la copie ici. Néanmoins, cela ne règle pas le problème.. :S
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Mar 4 Oct 2011 - 23:50

    La solution n'est pas évidente, mais elle existe x) Outre le "sexualité" résiduel mentionné par Riku, tu as aussi fait quelques fautes de frappe dans deux des identifiants de ton code. Je te laisse les chercher (Le logiciel Notepad++ permet de voir toutes les occurrences d'un mot dans un fichier simplement en double cliquant dessus. Très utile.). Par contre, il manque aussi un guillemet et un point virgule à la fin de la partie var the_code = " ... ";

    [oui, oui, je fais éhontément de la pub pour Notepad++]
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 4 Oct 2011 - 23:58

    Voilà c'est corrigé. J'dois être damné, car apparement cela ne fonctionne pas,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
       <head>
          <title>Generator 2.0</title>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          
          <style>
          <!--
             body {
                margin: 0;
                padding: 0;
                background: #e0e0e0;
                color: #a4a4a4;
                text-shadow: 1px 1px 0px #fff;
                
             }
             h1 { text-align: center; }
             form, #generator_result {
                width: 400px;
                margin: 30px auto;
                padding: 20px;
                border: 1px solid #fff;
                -moz-border-radius: 12px;
             }
             label {
                display: inline-block;
                width: 100px;
                vertical-align: top;
             }
             #generator_result { text-align: center; display: none; }
             
          -->
          </style>

       </head>
       
       <body>
          
          <script type="text/javascript">
          //<![CDATA[
             $(document).ready(function(){
                
                $("#generate").click(function(){
                   var nom = $("#nom").val();
                   var age = $("#age").val();
                   var race = $("#race").val();
                   var clan = $("#clan").val();
                   var sexe = $("#sexe").val();
                   var sexualite = $("#sexualite").val()
                   var avatar = $("#avatar").val()
                   var caract = $("#caract").val();
                   var pyshique = $("#physique").val();
                   var story = $("#story").val();
                   var arme = $("#arme").val();
                   
                   
                   var the_code = "<table cellpadding=\"0\"cellspacing=\"4\"border=\"0\"width=\"100%\"><tr><td width=\"150px\"valign=\"top\"><div class=\"mep_tinfos\">Informations</div><div class=\"mep_tinfos1\">Nom, Prénom</div><div class=\"mep_tinfos2\"> "+nom+"</div><div class=\"mep_tinfos1\">Race</div><div class=\"mep_tinfos2\"> "+race+"</div><div class=\"mep_tinfos1\">Clan</div><div class=\"mep_tinfos2\"> "+clan+"</div><div class=\"mep_tinfos1\">Âge</div><div class=\"mep_tinfos2\"> "+age+"</div><div class=\"mep_tinfos1\">Sexe</div><div class=\"mep_tinfos2\"> "+sexe+"</div><div class=\"mep_tinfos1\">Sexualité</div><div class=\"mep_tinfos2\"> "+sexualite+"</div><div class=\"mep_tinfos1\">Avatar</div><div class=\"mep_tinfos2\"><img src=\" "+avatar+" \"height=\"246px\"/></div></td><td valign=\"top\"><div class=\"mep_timg\"></div><div class=\"mep_tuto\"><div class=\"mep_tinfos\">Description du personnage</div><div class=\"mep_sinfos\">Caractère</div><div class=\"mep_sinfos2\"><blockquote> "+caract+"</blockquote></div><div class=\"mep_sinfos\">Physique</div><div class=\"mep_sinfos2\"><blockquote> "+physique+"</blockquote></div><div class=\"mep_sinfos\">Armes et pouvoirs</div><div class=\"mep_sinfos2\"><blockquote> "+arme+"</blockquote></div><div class=\"mep_sinfos\">Histoire</div><div class=\"mep_sinfos2\"><blockquote> "+story+"</blockquote></div></div></td></tr></table>";

                   
                   $("#generator_result").fadeIn(400, function(){ //on fait apparaitre le résultat
                $(this).find("textarea").text(the_code).select(); //on affiche le contenu et on le sélectionne dans la foulée
            });
            return false; //on annule le comportement par défaut du bouton de validation
          });

      });
    //]]>
    </script>
          <h1>Générateur de Fiche</h1>
          <form action="#" method="get" name="code_generator" id="code_generator">
      <p><label for="nom" class="label_gen">Nom, Prénom</label> <input type="text" name="nom" id="nom" /></p>
      <p><label for="sexe" class="label_gen">Sexe</label> <input type="text" name="sexe" id="sexe" /></p>
      <p><label for="sexualite" class="label_gen">Sexualité</label> <input type="text" name="sexualite" id="sexualite" /></p>
      <p><label for="avatar" class="label_gen">Avatar</label> <input type="text" name="avatar" id="avatar" /></p>
      <p><label for="age" class="label_gen">Âge</label> <input type="text" name="age" id="age" /></p>
      <p><label for="race" class="label_gen">Race</label> <input type="text" name="race" id="race" /></p>
      <p><label for="clan" class="label_gen">Clan</label> <input type="text" name="clan" id="clan" /></p>
      <p><label for="arme" class="label_gen">Armes et pouvoir</label> <textarea name="arme" id="arme" cols="30" rows="6"></textarea></p>
      <p><label for="caract" class="label_gen">Caractère</label> <textarea name="caract" id="caract" cols="30" rows="6"></textarea></p>
      <p><label for="physique" class="label_gen">Physique</label> <textarea name="physique" id="physique" cols="30" rows="6"></textarea></p>
      <p><label for="story" class="label_gen">Histoire</label> <textarea name="story" id="story" cols="30" rows="6"></textarea></p>

      <p><button id="generate">Générer le code</button></p>
    </form>
          
          <div id="generator_result">
          <p>Copiez/collez le code pré-sélectionné suivant :</p>
          <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
          </div>
       <p style="text-align: center;">Generator <strong>Kiowa</strong></p>

       </body>
    </html>

    J'utilise Dreamweaver en passant, et c'est ici que je le teste vous n'avez qu'a essayer pour voir ce que cela fait: http://vk-firstgeneration.superforum.fr/h3-test
    'Christa
    'Christa
    FémininAge : 38Messages : 193

    Mer 5 Oct 2011 - 0:14

    Je l'ai testé chez moi avec les corrections que j'ai mentionné et ça marche sans problème, c'est bien pour ça que j'ai donné mon grain de sel d'ailleurs. Dans le dernier code que tu as donné, il reste encore une coquille Wink
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mer 5 Oct 2011 - 0:18

    Oh mon dieu!!! la bourde, vraiment désoler du dérangement !!! j'ai trouver l'erreur mais fallait quand même savoir qu'elle était là xDDD

    Merci en tout cas:D
    Riku Asakura
    Riku Asakura
    MasculinAge : 36Messages : 5736

    Mer 5 Oct 2011 - 23:05

    Merci Christa pour ton œil de lynx Wink



    Générateur de profil / fiche perso RPG 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Databar
    Databar
    MasculinAge : 30Messages : 142

    Jeu 28 Fév 2013 - 14:54

    merci
    la-loca
    la-loca
    FémininAge : 31Messages : 86

    Lun 1 Avr 2013 - 15:52

    Bonjour!
    Tout d'abord, merci pour ton partage! C'est vraiment génial!

    Par contre, j'ai un petit problème...j'ai installé tous les codes, css, javascript etc...et j'ai le formulaire qui apparaît correctement.
    Cependant, lorsque je clique, sur "générer le code" la page HTML s'actualise mais aucun code "à copier" n'apparaît pas.

    Je n'ai apporté aucunes modifications aux codes de base puisque je voulais tester le fonctionnement avant de l'adapter à ce que nous recherchons.

    Petite précision:
    Lorsque je valide le CSS j'ai ce message qui apparaît:
    Les balises html génèrent des erreurs dans les feuilles de style.
    Une correction vient donc d'être effectuée afin de supprimer les balises html que vous avez placées dans la feuille de style.

    et lorsque je regarde ma feuille, la partie que je viens d'ajouter a disparut.

    Je suis une grande novice en matière de codage et ce que je fait s'apparente plus à du bricolage qu'autre chose...c'est pourquoi j'aurais besoin d'aide sur ce coup Very Happy

    Merci d'avance!



    Générateur de profil / fiche perso RPG 13031910
    Naruhiko
    Naruhiko
    MasculinAge : 25Messages : 119

    Jeu 4 Avr 2013 - 20:31

    Bonsoir ! Excellent tutoriel, un grand merci ! Effet magnifique. Cependant j'ai essayé un p'tit truc et quand je clique sur "générer", ça fonctionne pas... ma page se réactualise ! Pouvez-vous m'expliquer où je bloque ? (je précise que je n'ai aucune connaissance avec le javascript, c'est le premier code auquel je "touche". Merci !!
    Code:
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <style>
    #code_generator, #generator_result{
            width: 600px;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #fff;
            -moz-border-radius: 12px;
    }
     
    .label_gen {
            display: inline-block;
            width: 100px;
            vertical-align: top;
    }
    #generator_result{text-align: center; display: none;}
    </style>

    <script type="text/javascript">
    //<![CDATA[
      $(document).ready(function(){

          $("#generate").click(function(){
            var age = $("#age").val();
            var villageo = $("#villageo").val();
            var villagea = $("#villagea").val();
            var famille = $("#famille").val();
            var affinite = $("#affinite").val();
            var passions = $("#passions").val();
            var nindo = $("#nindo").val();
            var histoire = $("#histoire").val();
            var psychologique = $("#psychologique").val();
            var physique = $("#physique").val();

            var the_code = "<center><div class=\"titre\">Mon Ninja</div><span class=\"placement\"><span class=\"image\"></span><b>Âge</b>:" + age + "<br /><b>Village d'origine</b>:" + villageo + "<br /><b>Village</b>:" + villagea + "<br /><b>Famille</b>:" + famille + "<br /><b>Affinité</b>:" + affinite +"<br /><b>Passions</b>:" + passions + "<br /><b>Nindô</b>:" + nindo +"</span></center><div style=\"clear: both;\"></div><br /><center><div class=\"titre\">Histoire</div><div class=\"HDDprésentation\">" + histoire +"</div><br /><br /><div class=\"titre\">Description psychologique</div><div class=\"HDDprésentation\">" + psychologique +"</div><br /><br /><div class=\"titre\">Description physique</div><div class=\"HDDprésentation\">" + physique + "</div></center>
                 
            $("#generator_result").fadeIn(400, function(){ //on fait apparaitre le résultat
                $(this).find("textarea").text(the_code).select(); //on affiche le contenu et on le sélectionne dans la foulée
            });
            return false; //on annule le comportement par défaut du bouton de validation
          });

      });
    //]]>
    </script>



    <form action="#" method="get" name="code_generator" id="code_generator">
        <p><label for="age" class="label_gen">Âge:</label><input type="text" name="age" id="age"/></p>
        <p><label for="villageo" class="label_gen">Village d'origine:</label><input type="text" name="villagea" id="villageo"/></p>
        <p><label for="villagea" class="label_gen">Village actuel:</label><input type="text" name="villagea" id="villagea"/></p>
        <p><label for="famille" class="label_gen">Famille:</label><input type="text" name="famille" id="famille"/></p>
        <p><label for="affinite" class="label_gen">Affinité:</label><input type="text" name="affinite" id="affinite"/></p>
        <p><label for="passions" class="label_gen">Passion(s):</label><input type="text" name="passions" id="passions"/></p>
        <p><label for="nindo" class="label_gen">Nindo:</label><input type="text" name="nindo" id="nindo"/></p>
        <p><label for="histoire" class="label_gen">Histoire:</label><textarea style="width: 500px; height: 300px;" name="histoire" id="histoire" rows=6></textarea>
            <p><label for="psychologique" class="label_gen">Description psychologique:</label><textarea style="width: 300px; height: 300px;" name="psychologique" id="psychologique" rows=6></textarea>
                <p><label for="physique" class="label_gen">Description physique:</label><textarea style="width: 00px; height: 300px;" name="physique" id="physique" rows=6></textarea>

                    <p><button id="generate">Générer le code</button></p>
    </form>



    <div id="generator_result">
        <p>Copiez/collez le code pré-sélectionné suivant :</p>
            <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
    </div>

    </body>
    </html>



    Générateur de profil / fiche perso RPG Sans_t10
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:21