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.


    Générateur de profil / fiche perso RPG

    Partagez
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le 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">
    //<![CDATA[
       $(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




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Amelia sullivan
    FémininAge : 23Messages : 379

    le 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
    FémininAge : 31Messages : 107

    le 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
    FémininAge : 23Messages : 379

    le 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
    MasculinAge : 24Messages : 1497

    le 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!



    Amelia sullivan
    FémininAge : 23Messages : 379

    le 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
    FémininAge : 20Messages : 19

    le 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:
    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>Formulaire</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: #CBC7C9;
                color: #D60136;
                text-shadow: 1px 1px 0px #fff;
                
             }
             h1 { text-align: center; }
             form, #generator_result {
                width: 410px;
                margin: 30px auto;
                padding: 20px;
                border: 1px solid #fff;
                -moz-border-radius: 12px;
                -webkit-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 prenom = $("#prenom").val();
                   var prenom2 = $("#prenom2").val();
                   var nom = $("#nom").val();
                   var age = $("#age").val();
                   var sexe = $("#sexe").val();
                   var jour = $("#jour").val();
                   var mois = $("#mois").val();
                   var nationalité = $("#nationalité").val();
                   var amour = $("#amour").val();
                   var orientation = $("#orientation").val();
                   var célébrité = $("#célébrité").val();
                   var icone1 = $("#icone1").val();
                   var icone2 = $("#icone2").val();
                   var avatar = $("#avatar").val();
                   var image = $("#image").val();
                   var citation = $("#citation").val();
                   var groupe = $("#groupe").val();
                   var physique = $("#physique").val();
                   var caractère = $("#caractère").val();
                   var habitudes = $("#habitudes").val();
                   var histoire = $("#histoire").val();
                   var vraiprenom = $("#vraiprenom").val();
                   var vraiage = $("#vraiage").val();
                   var vraisexe = $("#vraisexe").val();
                   var doublecompte = $("#doublecompte").val();
                   var avisforum = $("#avisforum").val();
                   var avisdesign = $("#avisdesign").val();
                   var présence = $("#présence").val();
                   var fin = $("#fin").val();
                   var code = $("#code").val();
                   var prédéfini = $("#prédéfini").val();
                   var crédits = $("#crédits").val();
                   
                   var the_code = "<center>

    <div class="grandeimgpres" style="background-image:url(" + avatar + ");"></div><div class="prenomnompres">" + Prenom + " " + Prenom2 + " " + Nom + "</div><div class="bloc1pres">

    <div class="titrepres"><center>" + citation + "</center></div>
    <div class="dotted"></div>
    <table width="80%"><tr><td><div class="infopres">Bonjour, je m'appelle " + prenom + " " + nom + ". J'ai sortit le bout de mon nez le " + jour + " " + mois + " et j'ai présentement " + age + " ans. Comme tu as du l’apercevoir, je suis " + sexe + ". Je suis de nationalité " + nationnalité + ". Je suis " + orientation + " et " + amour + ".</div></td> <td><br>" + groupe + "<div class="iconespres" style="background-image:url(" + icone1 + ");"></div><br><div class="iconespres" style="background-image:url(" + Icone2 + ");"></div></td></tr></table></div>

    <div class="blocpres"><div class="titrepres"><center>Que vaut la beauté physique sans aucunes qualités?</center></div>
    <div class="dotted"></div>

    " + caractère + "

    </div>
    <div class="blocpres"><div class="titrepres"><center>La beauté intérieure c'est important mais, en boîte de nuit, si t'as pas la beauté extérieure, tu bois tout seul!</center></div>
    <div class="dotted"></div>

    " + physique + "

    </div>
    <div class="blocpres"><div class="titrepres"><center>On ne se débarrasse pas d'une habitude en la flanquant par la fenêtre ; il faut lui faire descendre l'escalier marche par marche.</center></div>
    <div class="dotted"></div>

    " + habitudes + "

    </div>
    <div class="blocpres"><div class="titrepres"><center>Ne prenez pas la vie au sérieux ; de toute façon, vous n'en sortirez pas vivant...</center></div>
    <div class="dotted"></div>

    " + histoire + " </div>

    <div class="blocpres"><div class="titrepres"><center>Car il y a toujours un marionnettiste sadique derrière l'écran!</center></div>
    <div class="dotted"></div><table><tr><td><div class="vavapres" style="background-image:url(" + avatar + ");"></div></td><td>
    Prénom/Surnom: " + vraiprenom + "
    Age: " + vraiage + "
    Double Compte? " + doublecompte + "
    Comment as-tu trouvé le forum? " + trouver + "
    Ton avis sur le forum en général: " + avisforum + "
    Ton avis sur le design actuel: " + avisdesign + "
    Célébrité choisie: " + célébrité + "
    Prédéfinis ou Non? " + prédéfini + "
    Crédits pour icones/avatar/bannière de la fiche: " + crédits + "
    Code du forum: [hide] " + code + "[/hide]
    Mot de la fin: </td></tr></table></div>
    </center>;
          //]]>
          </script>
          
          <form action="#" method="get" name="code_generator" id="code_generator"><h1>Votre Personnage</h1>
             <label for="prenom">Prénom</label> <input type="text" name="prenom" id="prenom" /><br>
             <label for="prenom2">Prénom2</label> <input type="text" name="prenom2" id="prenom2" /><br>
             <label for="nom">Nom</label> <input type="text" name="nom" id="nom" /><br>
             <label for="age">Âge</label> <input type="text" name="age" id="age" />ans<br>
             <label for="Sexe">Sexe</label>
             <input type="radio" name="choix" value="une femme">Féminin<input type="radio" name="choix" value="un homme">Masculin<br>
             <label for="naissance">Date de Naissance</label> <select name="jour">

    <option selected>JOUR</option>
    <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
    <select name="mois"><option selected>MOIS</option>
    <option value="janvier">Janvier</option><option value="février">Février</option><option value="mars">Mars</option><option value="avril">Avril</option><option value="mai">Mai</option><option value="juin">Juin</option><option value="juillet">Juillet</option><option value="août">Août</option><option value="septembre">Septembre</option><option value="octobre">Octobre</option><option value="novembre">Novembre</option><option value="décembre">Décembre</option></select><br>
    <label for="nationalité">Nationalité</label> <input type="text" name="nationalité" id="nationalité" /><br>
    <label for="amour">Situation Amoureuse</label>Je suis...<input type="text" name="amour" id="amour" /><br>
    <label for="orientation">Orientation Sexuelle</label><select name="orientation"><option selected>ORIENTATION</option><option value="hétérosexuelle">Hétérosexuelle(Fille)</option><option value="hétérosexuel">Hétérosexuel(Garçon)</option><option value="Bisexuelle">Bisexuelle(Fille)</option><option value="Bisexuel">Bisexuel(Garçon)</option><option value="homosexuelle">Homosexuelle(Fille)</option><option value="homosexuel">Homosexuel(Garçon)</option></select><br>
    <label for="célébrité">Célébrité Choisie</label><input type="text" name="célébrité" id="célébrité" /><br>
    <label for="prédéfini">Prédéfini ou non?</label><input type="text" name="prédéfini" id="prédéfini" /><br>
    <label for="icone1">Lien de l'Icone1 (100x100)</label><input type="text" name="icone1" id="icone1" /><br>
    <label for="icone2">Lien de l'Icone2 (100x100)</label><input type="text" name="icone2" id="icone2" /><br>
    <label for="avatar">Lien de l'Avatar (200x320)</label><input type="text" name="avatar" id="avatar" /><br>
    <label for="image">Lien de l'Image (450x250)</label><input type="text" name="image" id="image" /><br>
    <label for="crédits">Crédits pour Images</label>
    <textarea cols="15" rows="5" name="crédits" style="width:120px;margin-left:55px;">Crédit Icone1
    Crédit Icone2
    Crédit Avatar
    Crédit Image </textarea><br>
    <label for="citation">Citation du Personnage:</label> <input type="text" name="citation" id="citation" /><br>
    <label for="groupe">Groupe</label>
    <select name="groupe"><option selected>GROUPE</option><option>We're Pretties and we know it</option><option>We're Kings and all is allowable for us</option><option>We're the kids your parents warned you about</option><option>We're Ordinary, do you even saw us</option><option>We're Outsiders and you avoid us</option><option>We're Younger but cutier</option><option>We're Working...or not</option></select>

    <label for="physique">Physique</label>
    <textarea cols="15" rows="10" name="physique" style="width:300px;margin-left:55px;">Prouvez-nous que vous êtes les plus beaux en 200 mots! Rassurez-vous c'est très facile, il suffit de décrire votre personnages, son style vestimentaire (dont son pêché mignon version vêtements), nous dire s'il a des piercings, tatouages, et/ou autres signes distincts.
    </textarea>
    <br><br>
    <label for="caractère">Caractère</label>
    <textarea cols="15" rows="10" name="caractère" style="width:300px;margin-left:55px;">Vous êtes le plus fin? Le plus intelligent? Le clown de votre classe? On veut tout savoir sur comment vous êtes en dedans de vous, de vos plus belles qualités à vos plus vils défauts, en 200 mots également.
    </textarea>
    <br><br>
    <label for="habitudes">Habitudes</label>
    <textarea cols="15" rows="10" name="habitudes" style="width:300px;margin-left:55px;">Tous on leurs petites manies, voir tics. Nous voulons savoir tout tout tout sur les habitudes de votre personnage. De quel côté il dort dans son lit à s'il possède un chiffre chanceux. Ici pas de minimum et vous procéder comme vous voulez. Un texte soutenu, une liste... Mais il faut que cela soit un minimum étoffé. N'oubliez pas que votre niveau Rp' est jugé par votre fiche :)</textarea>
    <br><br>
    <label for="histoire">Histoire</label>
    <textarea cols="15" rows="10" name="histoire" style="width:300px;margin-left:55px;">Nous voila enfin à la partie la plus chiante à écrire...euh intéressante :P. Nous demandons que 600 petits mots ce qui est moins d'une page word, donc qui est peu car on veut tous savoir. Tout, tout, tout les détails croustillant ou pas sur la vie de votre personnage. </textarea>

    <center><h1>Vous, vous et vous!</h1></center>
    <label for="vraiprenom">Prénom/Surnom</label> <input type="text" name="vraiprenom" id="vraiprenom" /><br>
             <label for="vraiage">Âge</label> <input type="text" name="vraiage" id="vraiage" />ans<br>
             <label for="vraisexe">Sexe</label>
             <input type="radio" name="choix" value="Fille">Féminin<input type="radio" name="choix" value="Garçon">Masculin<br>

             <label for="doublecompte">Double Compte?</label> <input type="text" name="doublecompte" id="doublecompte" /><br>
    <label for="trouver">Comment as-tu trouvé le forum?</label> <input type="text" name="trouver" id="trouver" /><br>
    <label for="avisforum">Ton avis sur le forum en général</label> <input type="text" name="avisforum" id="avisforum" /><br>
    <label for="avisdesign">Ton avis sur le design actuel</label> <input type="text" name="avisdesign" id="nom" /><br>
    <label for="présence">Présence sur le forum</label> <input type="text" name="présence" id="présence" /><br>
    <label for="fin">Mot de la Fin</label> <input type="text" name="fin" id="fin" /><br>
    <label for="code">Code du Règlement</label> <input type="text" name="code" id="code" /><br>
    <p><button id="generate">Générer le code</button></p>
    </form>
          
          <div id="generator_result">
          <p>Copiez/collez votre fiche :</p>

          <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
          </div>
       </body>
    </html>

    Merci d'avance :houra:
    'Christa
    FémininAge : 31Messages : 107

    le 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
    FémininAge : 20Messages : 19

    le 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:
    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>Formulaire</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: #CBC7C9;
                color: #D60136;
                text-shadow: 1px 1px 0px #fff;
                
             }
             h1 { text-align: center; }
             form, #generator_result {
                width: 410px;
                margin: 30px auto;
                padding: 20px;
                border: 1px solid #fff;
                -moz-border-radius: 12px;
                -webkit-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 prenom = $("#prenom").val();
                   var prenom2 = $("#prenom2").val();
                   var nom = $("#nom").val();
                   var age = $("#age").val();
                   var sexe = $("#sexe").val();
                   var jour = $("#jour").val();
                   var mois = $("#mois").val();
                   var nationalite = $("#nationalite").val();
                   var amour = $("#amour").val();
                   var orientation = $("#orientation").val();
                   var celebrite = $("#celebrite").val();
                   var icone1 = $("#icone1").val();
                   var icone2 = $("#icone2").val();
                   var avatar = $("#avatar").val();
                   var image = $("#image").val();
                   var citation = $("#citation").val();
                   var groupe = $("#groupe").val();
                   var physique = $("#physique").val();
                   var caractere = $("#caractere").val();
                   var habitudes = $("#habitudes").val();
                   var histoire = $("#histoire").val();
                   var vraiprenom = $("#vraiprenom").val();
                   var vraiage = $("#vraiage").val();
                   var vraisexe = $("#vraisexe").val();
                   var doublecompte = $("#doublecompte").val();
                   var avisforum = $("#avisforum").val();
                   var avisdesign = $("#avisdesign").val();
                   var presence = $("#presence").val();
                   var fin = $("#fin").val();
                   var code = $("#code").val();
                   var predefini = $("#predefini").val();
                   var credits = $("#credits").val();
                   
                   var the_code = "<center>

    <div class="grandeimgpres" style="background-image:url(" + avatar + ");"></div><div class="prenomnompres">" + Prenom + " " + Prenom2 + " " + Nom + "</div><div class="bloc1pres">

    <div class=\"titrepres\"><center>" + citation + "</center></div>
    <div class=\"dotted\"></div>
    <table width=\"80%\"><tr><td><div class=\"infopres\">Bonjour, je m'appelle " + prenom + " " + nom + ". J'ai sortit le bout de mon nez le " + jour + " " + mois + " et j'ai présentement " + age + " ans. Comme tu as du l’apercevoir, je suis " + sexe + ". Je suis de nationalité " + nationnalite + ". Je suis " + orientation + " et " + amour + ".</div></td> <td><br>" + groupe + "<div class=\"iconespres\" style=\"background-image:url(" + icone1 + ");\"></div><br><div class=\"iconespres\" style=\"background-image:url(" + Icone2 + ");\"></div></td></tr></table></div>

    <div class=\"blocpres\"><div class=\"titrepres\"><center>Que vaut la beauté physique sans aucunes qualités?</center></div>
    <div class=\"dotted\"></div>

    " + caractere + "

    </div>
    <div class=\"blocpres\"><div class=\"titrepres\"><center>La beauté intérieure c'est important mais, en boîte de nuit, si t'as pas la beauté extérieure, tu bois tout seul!</center></div>
    <div class=\"dotted\"></div>

    " + physique + "

    </div>
    <div class=\"blocpres\"><div class=\"titrepres\"><center>On ne se débarrasse pas d'une habitude en la flanquant par la fenêtre ; il faut lui faire descendre l'escalier marche par marche.</center></div>
    <div class=\"dotted\"></div>

    " + habitudes + "

    </div>
    <div class=\"blocpres\"><div class=\"titrepres\"><center>Ne prenez pas la vie au sérieux ; de toute façon, vous n'en sortirez pas vivant...</center></div>
    <div class=\"dotted\"></div>

    " + histoire + " </div>

    <div class=\"blocpres\"><div class=\"titrepres\"><center>Car il y a toujours un marionnettiste sadique derrière l'écran!</center></div>
    <div class=\"dotted"\></div><table><tr><td><div class=\"vavapres\" style="\background-image:url(" + avatar + ");\"></div></td><td>
    Prénom/Surnom: " + vraiprenom + "
    Age: " + vraiage + "
    Double Compte? " + doublecompte + "
    Comment as-tu trouvé le forum? " + trouver + "
    Ton avis sur le forum en général: " + avisforum + "
    Ton avis sur le design actuel: " + avisdesign + "
    Célébrité choisie: " + celebrite + "
    Prédéfinis ou Non? " + predefini + "
    Crédits pour icones/avatar/bannière de la fiche: " + credits + "
    Code du forum: [hide] " + code + "[/hide]
    Mot de la fin: </td></tr></table></div>
    </center>";
          //]]>
          </script>
          
          <form action="#" method="get" name="code_generator" id="code_generator"><h1>Votre Personnage</h1>
             <label for="prenom">Prénom</label> <input type="text" name="prenom" id="prenom" /><br>
             <label for="prenom2">Prénom2</label> <input type="text" name="prenom2" id="prenom2" /><br>
             <label for="nom">Nom</label> <input type="text" name="nom" id="nom" /><br>
             <label for="age">Âge</label> <input type="text" name="age" id="age" />ans<br>
             <label for="Sexe">Sexe</label>
             <input type="radio" name="choix" value="une femme">Féminin<input type="radio" name="choix" value="un homme">Masculin<br>
             <label for="naissance">Date de Naissance</label> <select name="jour">

    <option selected>JOUR</option>
    <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
    <select name="mois"><option selected>MOIS</option>
    <option value="janvier">Janvier</option><option value="février">Février</option><option value="mars">Mars</option><option value="avril">Avril</option><option value="mai">Mai</option><option value="juin">Juin</option><option value="juillet">Juillet</option><option value="août">Août</option><option value="septembre">Septembre</option><option value="octobre">Octobre</option><option value="novembre">Novembre</option><option value="décembre">Décembre</option></select><br>
    <label for="nationalité">Nationalité</label> <input type="text" name="nationalité" id="nationalité" /><br>
    <label for="amour">Situation Amoureuse</label>Je suis...<input type="text" name="amour" id="amour" /><br>
    <label for="orientation">Orientation Sexuelle</label><select name="orientation"><option selected>ORIENTATION</option><option value="hétérosexuelle">Hétérosexuelle(Fille)</option><option value="hétérosexuel">Hétérosexuel(Garçon)</option><option value="Bisexuelle">Bisexuelle(Fille)</option><option value="Bisexuel">Bisexuel(Garçon)</option><option value="homosexuelle">Homosexuelle(Fille)</option><option value="homosexuel">Homosexuel(Garçon)</option></select><br>
    <label for="célébrité">Célébrité Choisie</label><input type="text" name="célébrité" id="célébrité" /><br>
    <label for="prédéfini">Prédéfini ou non?</label><input type="text" name="prédéfini" id="prédéfini" /><br>
    <label for="icone1">Lien de l'Icone1 (100x100)</label><input type="text" name="icone1" id="icone1" /><br>
    <label for="icone2">Lien de l'Icone2 (100x100)</label><input type="text" name="icone2" id="icone2" /><br>
    <label for="avatar">Lien de l'Avatar (200x320)</label><input type="text" name="avatar" id="avatar" /><br>
    <label for="image">Lien de l'Image (450x250)</label><input type="text" name="image" id="image" /><br>
    <label for="crédits">Crédits pour Images</label>
    <textarea cols="15" rows="5" name="crédits" style="width:120px;margin-left:55px;">Crédit Icone1
    Crédit Icone2
    Crédit Avatar
    Crédit Image </textarea><br>
    <label for="citation">Citation du Personnage:</label> <input type="text" name="citation" id="citation" /><br>
    <label for="groupe">Groupe</label>
    <select name="groupe"><option selected>GROUPE</option><option>We're Pretties and we know it</option><option>We're Kings and all is allowable for us</option><option>We're the kids your parents warned you about</option><option>We're Ordinary, do you even saw us</option><option>We're Outsiders and you avoid us</option><option>We're Younger but cutier</option><option>We're Working...or not</option></select>

    <label for="physique">Physique</label>
    <textarea cols="15" rows="10" name="physique" style="width:300px;margin-left:55px;">Prouvez-nous que vous êtes les plus beaux en 200 mots! Rassurez-vous c'est très facile, il suffit de décrire votre personnages, son style vestimentaire (dont son pêché mignon version vêtements), nous dire s'il a des piercings, tatouages, et/ou autres signes distincts.
    </textarea>
    <br><br>
    <label for="caractère">Caractère</label>
    <textarea cols="15" rows="10" name="caractère" style="width:300px;margin-left:55px;">Vous êtes le plus fin? Le plus intelligent? Le clown de votre classe? On veut tout savoir sur comment vous êtes en dedans de vous, de vos plus belles qualités à vos plus vils défauts, en 200 mots également.
    </textarea>
    <br><br>
    <label for="habitudes">Habitudes</label>
    <textarea cols="15" rows="10" name="habitudes" style="width:300px;margin-left:55px;">Tous on leurs petites manies, voir tics. Nous voulons savoir tout tout tout sur les habitudes de votre personnage. De quel côté il dort dans son lit à s'il possède un chiffre chanceux. Ici pas de minimum et vous procéder comme vous voulez. Un texte soutenu, une liste... Mais il faut que cela soit un minimum étoffé. N'oubliez pas que votre niveau Rp' est jugé par votre fiche :)</textarea>
    <br><br>
    <label for="histoire">Histoire</label>
    <textarea cols="15" rows="10" name="histoire" style="width:300px;margin-left:55px;">Nous voila enfin à la partie la plus chiante à écrire...euh intéressante :P. Nous demandons que 600 petits mots ce qui est moins d'une page word, donc qui est peu car on veut tous savoir. Tout, tout, tout les détails croustillant ou pas sur la vie de votre personnage. </textarea>

    <center><h1>Vous, vous et vous!</h1></center>
    <label for="vraiprenom">Prénom/Surnom</label> <input type="text" name="vraiprenom" id="vraiprenom" /><br>
             <label for="vraiage">Âge</label> <input type="text" name="vraiage" id="vraiage" />ans<br>
             <label for="vraisexe">Sexe</label>
             <input type="radio" name="choix" value="Fille">Féminin<input type="radio" name="choix" value="Garçon">Masculin<br>

             <label for="doublecompte">Double Compte?</label> <input type="text" name="doublecompte" id="doublecompte" /><br>
    <label for="trouver">Comment as-tu trouvé le forum?</label> <input type="text" name="trouver" id="trouver" /><br>
    <label for="avisforum">Ton avis sur le forum en général</label> <input type="text" name="avisforum" id="avisforum" /><br>
    <label for="avisdesign">Ton avis sur le design actuel</label> <input type="text" name="avisdesign" id="nom" /><br>
    <label for="présence">Présence sur le forum</label> <input type="text" name="présence" id="présence" /><br>
    <label for="fin">Mot de la Fin</label> <input type="text" name="fin" id="fin" /><br>
    <label for="code">Code du Règlement</label> <input type="text" name="code" id="code" /><br>
    <p><button id="generate">Générer le code</button></p>
    </form>
          
          <div id="generator_result">
          <p>Copiez/collez votre fiche :</p>

          <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
          </div>
       </body>
    </html>
    'Christa
    FémininAge : 31Messages : 107

    le 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
    FémininAge : 23Messages : 379

    le Jeu 19 Mai 2011 - 3:00

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

    le 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





    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    'Christa
    FémininAge : 31Messages : 107

    le 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
    MasculinAge : 29Messages : 5736

    le 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.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kiowa
    FémininAge : 27Messages : 210

    le 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
    MasculinAge : 29Messages : 5736

    le 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




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kiowa
    FémininAge : 27Messages : 210

    le 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
    FémininAge : 31Messages : 107

    le 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
    FémininAge : 27Messages : 210

    le 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
    FémininAge : 31Messages : 107

    le 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
    FémininAge : 27Messages : 210

    le 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
    MasculinAge : 29Messages : 5736

    le Mer 5 Oct 2011 - 23:05

    Merci Christa pour ton œil de lynx Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Databar
    MasculinAge : 22Messages : 142

    le Jeu 28 Fév 2013 - 14:54

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

    le 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!



    Naruhiko
    MasculinAge : 18Messages : 99

    le 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>



    Contenu sponsorisé

    Aujourd'hui à 7:01


      La date/heure actuelle est Dim 11 Déc 2016 - 7:01