School of Progress

Partagez | 

[Codage]Menu déroulant en JS

Aller à la page : 1, 2  Suivant

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: [Codage]Menu déroulant en JS   Sam 20 Mai - 18:43

Bonjour bonjour !

Malgré mes connaissances de 0 en javascript, je me suis servie de ce tutoriel : http://www.school-of-progress.fr/t3624-faire-un-tableau-avec-onglet pour faire un tableau de quête pour mon forum ! J'ai faillis en appeler plusieurs fois à votre aide (comme quand mon cadre se mettait au dessus de mes textes et empêchait le clic par exemple) mais j'ai finis par me débrouiller. Là par contre j'ai beau chercher je ne vois aucunement comment faire ce à quoi je souhaite aboutir ! J'ai plus de quêtes que ma mise en page ne me le permet, et en plus de ne pas avoir envie de toute la refaire (j'ai positionné pas mal de choses au pixel prêt), j'ai peur que ça fasse trop gros dans mon forum. Du coup j'aimerais beaucoup avoir un menu déroulant (deux flèches en haut et en bas de la liste qui font défiler les quêtes), mais le problème c'est que je ne trouve nul part comment faire un tel truc (et qu'en plus comme je m'y connais vraiment pas du tout en js c'est pas la joie quand je tombe sur des tutoriels de Open Classrooms). Du coup serait il possible d'avoir une indication, une petite aide pour savoir comment faire ? je pourrais ensuite me débrouiller pour ce qui est mise en page je pense Smile !

Voilà mon code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Les quêtes d'apprentissage</title>
          <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
     
          <script type="text/javascript">
        jQuery().ready(function(){
    jQuery().ready(function(){
      $(".bloc_texte").hide();
      $("#1").show();
      $(".titre").click(function(){
          if($(this).next("div").is(":hidden")){                 
            $(".titre").next("div:visible").hide();
            $(this).next("div").show();
          }
      }); 
    });
    });
    </script>
      <link href="https://fonts.googleapis.com/css?family=Felipa" rel="stylesheet">
      <style type="text/css">
body
{
   width : 794px;
   height : 600px;
   border : 6px inset #a6beee;
   padding : 10px;
}
.bloc_texte
{
    position:absolute;
    left:226px;
    top:13px;
    width :600px;
    height:619px;
    background-color:#cfd4de;
    border:1px solid black;
}
.titre
{
    position : relative;
   right : 8px;
   bottom : 10px;
   z-index : 2;
   width : 200px;
    font-size:14px;
    background-color:#4a5d85;
    color:#aec3ed;
    padding:4px;
}
.titre:hover
{
    cursor:pointer;
}
.decor
{
    position:absolute;
   top : 14px;
   left : 13px;
    height:618px;
   width : 206px;
   border : 3px solid #a6beee;
   z-index : 1;
   background-color:#cfd4de;
}
.bloc_quete .title
{
   border:2px solid #4a5d85;
   font-family : 'Felipa';
   font-size : 200%;
   text-align : center;
   display : flex;
   justify-content : space-between;
}
.bloc_quete article
{
   border:2px solid #4a5d85;
   padding : 10px;
   background-color:#c9d6f1;
}
.bloc_quete section
{
   display : flex;
}
.bloc_quete
{
   border : 4px ridge #a6beee;
   margin :auto;
   height : 619px;
   background-color:#c9d6f1;
}
.rassemblement
{
   width : 70%;
   height : 600px;
}
.PNJ
{
        float : left;
        height : 100px;
        width : 100px;
        border-radius : 50px;
        border : 1px solid #4a5d85;
        margin-right : 10px;
}
      </style>
    </head>

    <body>
         <div class="decor"></div>
    <span><h1 class="titre">Devenir un héros part.I (niv.0)</h1><div class="bloc_texte" id="1">
      <div class="bloc_quete">
         <div class="title">
            <span>Devenir un héros part.I</span><span>Niv : 0</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
                  Vous venez juste d'arriver sur le forum, ou peut être pas, mais votre première mission est bien sûr de créer votre personnage, comment ferait-il autrement, s'il n'existait pas, et comment pourrions nous lui attribuer de l'xp d'ailleurs ? Afin de régler ce soucis au plus vite, votre mission, si vous l'acceptez, est de poster votre fiche de présentation et d'être validé. Une fois que cette quête sera remplie, postez à la suite du topic pour que nous vous offrions vos premières récompenses.
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 50xp et 100 pièces d'or <br/>
                  <strong>En cas d'échec :</strong> Et bien vous n'arrivez pas sur le forum, tout simplement !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
               <strong>Objectifs de la quête : </strong> <br/><br/>
               -> Poster sa fiche de présentation<br/>
               -> Être validé
            </article>
         </section>
      </div>
   </div></span>
    <span><h1 class="titre">Devenir un héros part.II (niv.1)</h1><div class="bloc_texte">
   <div class="bloc_quete">
         <div class="title">
            <span>Devenir un héros part.II</span><span>Niv : 1</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
                  A présent que votre personnage est validé, vous pouvez enfin débuter dans le monde du rpg, et pour cela vous êtes invités à poster votre toute première demande de rp ! Pour cela, rendez vous dans le forum "entre héros" et plus spécifiquement la partie "organisation de rp/liens" et poster votre topic ! (Répondre à une demande de rp déjà présente ne validera pas la quête)               
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong>  100 xp <br/>
                  <strong>En cas d'échec :</strong>  Une profonde tristesse de la part du staff
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                     -> Avoir terminé Devenir un héros part.I<br/>
               -> Poster un topic de demande de rp
            </article>
         </section>
      </div>
      </div></span>
    <span><h1 class="titre">Devenir un héros part.III (niv.2)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Devenir un héros part.III</span><span>Niv : 2</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
Quelle que soit la manière, il vas à présent falloir faire votre premier rp avec quelqu'un (attention, faire un solo ne validera pas la quête). Pour cela, une fois que vous aurez trouvé le partenaire idéal, rendez vous dans une des zones de rp et répondez à votre interlocuteur (ou lancez vous même le premier post). Le rp doit être achevé pour valider la quête (posté en correction) .
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong>  100 xp <br/>
                  <strong>En cas d'échec :</strong> 1000 coups de fouet
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Devenir un héros part.II<br/>
                                  -> Trouver un rp avec au moins une autre personne<br/>
-> Achever le rp<br/>
-> Poster le rp en correction
            </article>
         </section>
      </div></div></span>
    <span><h1 class="titre">Confirmer l'expérience part.I (niv.5)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Confirmer l'expérience part.I</span><span>Niv : 5</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
Nous vous avons assez aidé pour l'instant, il va falloir un peu vous débrouiller par vous même. Le niveau cinq sera le théâtre de grandes nouveautés et nous espérons qu'elle vous plairont, d'ici là, amusez vous bien, nous vous attendons dans quelques niveaux de plus !
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> Une potion de vitalité mineure<br/>
                  <strong>En cas d'échec :</strong> Une patate à éplucher
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Atteindre le niveau 5
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Devenir un héros part.IV (niv.5)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Devenir un héros part.IV</span><span>Niv : 5</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
Si jusqu'ici vous avez utilisé des systèmes très basique, nous pouvons à présent nous pencher sur des choses plus complexes (et par extension, plus intéressantes ! ) Pour que vous soyez capable d''accomplir certaines choses, il faudra que votre personnage devienne plus fort contextuellement, et pour cela, j'ai la solution : les statistiques contextuelles !
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 150 xp<br/>
                  <strong>En cas d'échec :</strong> Pas de SC, dommage !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Devenir un héros part.III<br/>
                                  -> Faire une Mise à Jour<br/>
                                  -> Répartir 50 SC
            </article>
         </section>
      </div>
      </div></span>
<span><h1 class="titre">Entrer dans le monde du travail part.I (niv.6)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Entrer dans le monde du travail part.I</span><span>Niv : 6</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000" class="PNJ"/>
Face à un tel manque d'argent, il est difficile de s'en sortir. Quelle est la solution ? Travailler bien sûr ! Il vas falloir mettre la main à la pate mon petit, ou choisir de ne pas la mettre du tout, ce qui serait tout de même franchement dommage !
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 1 point d'avancement<br/>
                  <strong>En cas d'échec :</strong> des larmes
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Choisir une profession<br/>
                                  -> Accomplir une tâche<br/>
            </article>
         </section>
      </div>
      </div></span>
<span><h1 class="titre">Crafter part.I (niv.6)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Crafter part.I</span><span>Niv : 6</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/636014PNJforgeron.jpg" class="PNJ"/>
Hey ! Salut toi ! J'ai perdus mon précieux marteau et je ne peux plus rien forger ! Peux tu s'il te plait faire une dague à ma place ? Ah tu n'as pas de matériaux ? Et bien vas donc regarder du côté de par-là-bas on raconte qu'il y a de très beaux gisements de fer !
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 10 minerai de fer brut<br/>
                  <strong>En cas d'échec :</strong> je ne sais plus quoi dire ... tu te poses encore la question ?
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Effectuer une récolte<br/>
                                  -> Avoir 1 minerai de fer brut<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Crafter part.II (niv.6)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Crafter part.II</span><span>Niv : 6</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/636014PNJforgeron.jpg" class="PNJ"/>
Et bien bravo ! Pour terminer ta dague il vas maintenant falloir te rendre à l'atelier et poster les ingrédients que tu met en jeu. Puis effectue un rp de fabrication si c'est la première fois que tu en fait une !
               </article>
               <article style="height : 225px;">
                                          <strong>En cas de réussite :</strong> Remboursement des composants dépensés<br/>
                                          50 xp<br/>
                  <strong>En cas d'échec :</strong> ben tant pis pour toi !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Crafter part.I<br/>
                                  -> Fabriquer une dague de palier 1<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Crafter part.III (niv.7)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Crafter part.III</span><span>Niv : 7</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/636014PNJforgeron.jpg" class="PNJ"/>
Une bien jolie dague que tu as là ! Mais pourquoi ne pas l'enchanter pour tester si tu es vraiment bon dans ce boulot ? On sait jamais, certaines personnes prometteuses nous décoivent parfois ... Il y a des cristaux à vendre dans la boutique d'à côté, sinon tu peux toujours en collecter quelques uns.
               </article>
               <article style="height : 225px;">
                                          <strong>En cas de réussite :</strong> Remboursement des composants dépensés<br/>
                                          50 xp<br/>
                  <strong>En cas d'échec :</strong> le staff te boude
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Crafter part.II<br/>
                                  -> Appliquer un enchantement palier 1 sur la dague<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Crafter part.IV (niv.7)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Crafter part.IV</span><span>Niv : 7</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/636014PNJforgeron.jpg" class="PNJ"/>
Une superbe dague enchantée ! Hey ça te dirais de devenir mon apprenti ? Oh ça va je rigole ! Pourquoi t'irais pas te fabriquer des gants en cuir au lieu de m'ennuyer avec ton air blasé ?
               </article>
               <article style="height : 225px;">
                                          <strong>En cas de réussite :</strong> Remboursement des composants dépensés<br/>
                                          50 xp<br/>
                  <strong>En cas d'échec :</strong> mais tu le sais qu'on peux pas échouer ?
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Crafter part.III<br/>
                                  -> Fabriquer des gants de cuir palier 1<br/>
            </article>
         </section>
      </div>
      </div></span>
        <span><h1 class="titre">Crafter part.V (niv.8)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Crafter part.V</span><span>Niv : 8</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/550264PNJalchimiste.jpg" class="PNJ"/>
He ho toi ! L'apprenti du forgeron ! T'as pas finis de faire des allers retours ? Ca me donne mal à la tête ! Tu voudrais pas plutôt m'aider ? J'ai besoin d'une potion de vitalité et je n'ai aucune envie de la faire, je suis bien trop concentrée sur ma nouvelle trouvaille : un élixir de barbe piquante, fabuleux n'est ce pas ? Bref, dépêche toi de me filer un coup de main, je te payerais grassement !
               </article>
               <article style="height : 225px;">
                                          <strong>En cas de réussite :</strong> Remboursement des composants dépensés<br/>
                                          50 xp
                                          50 pièces d'or<br/>
                  <strong>En cas d'échec :</strong> ...
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Crafter part.IV<br/>
                                  -> Fabriquer une potion de vitalité palier 1<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Entrer dans le monde du travail part.II (niv.8)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Entrer dans le monde du travail part.II</span><span>Niv : 8</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000" class="PNJ"/>
Hola mon petit ! Si tu as un job maintenant, ce serait peut être temps d'évoluer non ? Moi je sais pas toi, mais rester pour toujours dans l'échelle basse de la société, je n'aimerais pas trop ça ... Après tu fais comme tu veux, si tu préfère rester un mendiant toute ta vie, je ne t'en empêcherais pas !
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 1 point d'avancement<br/>
                  <strong>En cas d'échec :</strong> la pauvreté pendant 125 générations !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Entrer dans le monde du travail part.I<br/>
                                  -> Monter au deuxième échelon de sa profession<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Confirmer l'expérience part.II (niv.10)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Confirmer l'expérience part.II</span><span>Niv : 10</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg" class="PNJ"/>
Il a des choses complexes en ce monde, et tu as déjà pus en entrevoir quelques unes, bientôt je t'offrirais la possibilité d'en découvrir encore plus, mais pour cela, il faut que tu continue à me faire confiance ! Essaye d'atteindre le niveau 10 et nous verrons cela.
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> Trois cristaux d'enchantement<br/>
                  <strong>En cas d'échec :</strong> Le désespoir éternel
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Atteindre le niveau 10
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Devenir un héros part.V (niv.10)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Devenir un héros part.V</span><span>Niv : 10</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg" class="PNJ"/>
Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 150 xp<br/>
                  <strong>En cas d'échec :</strong> Alors là je vous le souhaite pas !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Devenir un héros part.IV<br/>
                                  -> Avoir sa fiche technique validée<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Le parcours du combattant part.I(niv.10)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Le parcours du combattant part.IV</span><span>Niv : 10</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg" class="PNJ"/>
Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 150 xp<br/>
                  <strong>En cas d'échec :</strong> Alors là je vous le souhaite pas !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Devenir un héros part.IV<br/>
                                  -> Avoir sa fiche technique validée<br/>
            </article>
         </section>
      </div>
      </div></span>
      <span><h1 class="titre">Le parcours du combattant part.I(niv.10)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Le parcours du combattant part.IV</span><span>Niv : 10</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg" class="PNJ"/>
Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.
               </article>
               <article style="height : 225px;">
                  <strong>En cas de réussite :</strong> 150 xp<br/>
                  <strong>En cas d'échec :</strong> Alors là je vous le souhaite pas !
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Avoir terminé Devenir un héros part.IV<br/>
                                  -> Avoir sa fiche technique validée<br/>
            </article>
         </section>
      </div>
      </div></span>
    </body>
    </html>

la dernière quête dépasse pour l'instant allégrement xD

Merci d'avance :love:



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 23 Mai - 9:22

Coucou Smile

Hum... Je ne suis pas sur d'avoir tout compris Embarassed

En gros, on aurait la colonne de gauche (celle avec la liste des quetes) et, en dessous (ou au dessus) des fleches (droite/gauche). Au clic sur l'une d'elle, on a la suite des quêtes qui apparait et on peut les sélectionner comme actuellement. C'est ça ?


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 23 Mai - 9:53

Oui, exactement Smile désolé si je suis pas claire ^^



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 23 Mai - 10:27

Si si j'ai compris =)

Bon ! On va donc regarder ça ^^ Je fais un test de mon coté (je vais essayer de voir pour te simplifier tout ça aussi, ton code risque d'etre très long Surprised)

et je reviens vite vers toi ^^


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 23 Mai - 11:01

ça marche merci beaucoup Miettes o/



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 24 Mai - 14:55

Coucou Smile

Avant de te montrer "le truc", dis-moi si c'était bien à quelques choses comme ça que tu pensais ?

http://miettes.exprimetoi.net/h33-elilith-les-quetes-d-apprentissage

(la "navigation" du menu est sur la droite (j'ai pas fait la mise en page)).

Si ça te convient, il te suffira de remplir ça :
Code:
{
    "titre": "",
    "niveau": "",
    "image": "",
    "texteRassemblement": "",
    "reussite": "",
    "echec": "",
    "objectif": ""
  }

Pour ajouter une quête. Par exemple :
Code:
{
    "titre": "Devenir un héros part.II",
    "niveau": "1",
    "image": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement": "A présent que votre personnage est validé, vous pouvez enfin débuter dans le monde du rpg, et pour cela vous êtes invités à poster votre toute première demande de rp ! Pour cela, rendez vous dans le forum \"entre héros\" et plus spécifiquement la partie \"organisation de rp/liens\" et poster votre topic ! (Répondre à une demande de rp déjà présente ne validera pas la quête) ",
    "reussite": "100 xp",
    "echec": "Une profonde tristesse de la part du staff",
    "objectif": "-> Avoir terminé Devenir un héros part.I<br/>-> Poster un topic de demande de rp"
  }

Le code fera ensuite le travail tout seul (mise en page + séparation des quetes pour le menu ^^)

ps : j'ai copié/collé plusieurs fois les quetes pour qu'on ait "plusieurs pages" de menu ; n'y prete pas trop d'attention non plus ^^


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 24 Mai - 16:22

Dans l'idée c'est parfait ! J'ai besoin de rien en code de plus que ça ?

Seul soucis, j'ai maintenant complètement achevé les quêtes et à un endroit j'ai deux personnages et donc deux images :/

Le code de la quête incriminée :

Code:
<span><h1 class="titre">Briser la solitude part.I (niv.20)</h1><div class="bloc_texte">
      <div class="bloc_quete">
         <div class="title">
            <span>Briser la solitude part.I</span><span>Niv : 20</span>
         </div>
         <section>
            <div class="rassemblement">
               <article style="height : 300px;">
                                          <img src="https://img4.hostingpics.net/pics/981705matredanimaux.jpg" class="PNJ"/>
                                          Bonjour. Qu'est-ce que tu viens faire ici ? Tu veux un familier c'est ça ? Si tu en veux un tu es au bon endroit. Ici on dresse des animaux et on apprend à se battre en équipe, que ce soit avec eux ou avec nos compagnons. N'est-ce pas Tooth ? <br/>
                                          <br/><br/><img src="https://img4.hostingpics.net/pics/514328animal.jpg" class="PNJ" style="float : right"/>
                                          Je confirme. Pour l'instant tu es seul(e). Reviens nous voir quand tu auras quelqu'un à tes côtés. Je ne peux rien faire pour ta solitude. Même si ça doit être triste. Je compatis.
               </article>
               <article style="height : 225px;">
                                          <strong>En cas de réussite :</strong> 5 points techniques pour ton familier<br/>100xp pour ton familier<br/>
                                          <strong>En cas d'échec :</strong> //
               </article>
            </div>
            <article style="width : 30%; height : 549px;">
                                  <strong>Objectifs de la quête :</strong>  <br/><br/>
                                  -> Acquérir un familier lvl 10.
            </article>
         </section>
      </div>
      </div></span>

Et il y en a quatre comme ça :/



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 24 Mai - 16:46

Aucun souci Smile

C'est ajouté ^^
http://miettes.exprimetoi.net/h33-elilith-les-quetes-d-apprentissage

(c'est la toute dernière quete)

Du coup, tu auras ça à remplir :
Code:
{
    "titre": "",
    "niveau": "",
    "image1": "",
    "texteRassemblement1": "",
    "image2": "",
    "texteRassemblement2": "",
    "reussite": "",
    "echec": "",
    "objectif": ""
  }
En sachant que si tu n'as pas de second perso, il ne faudra pas mettre image2 & texteRassemblement2

Exemple avec 1 perso :
Code:
{
    "titre": "Devenir un héros part.II",
    "niveau": "1",
    "image": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement": "A présent que votre personnage est validé, vous pouvez enfin débuter dans le monde du rpg, et pour cela vous êtes invités à poster votre toute première demande de rp ! Pour cela, rendez vous dans le forum \"entre héros\" et plus spécifiquement la partie \"organisation de rp/liens\" et poster votre topic ! (Répondre à une demande de rp déjà présente ne validera pas la quête) ",
    "reussite": "100 xp",
    "echec": "Une profonde tristesse de la part du staff",
    "objectif": "-> Avoir terminé Devenir un héros part.I<br/>-> Poster un topic de demande de rp"
  }

Exemple avec 2 persos :
Code:
{
    "titre": "Briser la solitude part.I",
    "niveau": "20",
    "image1": "https://img4.hostingpics.net/pics/981705matredanimaux.jpg",
    "texteRassemblement1": "Bonjour. Qu'est-ce que tu viens faire ici ? Tu veux un familier c'est ça ? Si tu en veux un tu es au bon endroit. Ici on dresse des animaux et on apprend à se battre en équipe, que ce soit avec eux ou avec nos compagnons. N'est-ce pas Tooth ?",
    "image2": "https://img4.hostingpics.net/pics/514328animal.jpg",
    "texteRassemblement2": "Je confirme. Pour l'instant tu es seul(e). Reviens nous voir quand tu auras quelqu'un à tes côtés. Je ne peux rien faire pour ta solitude. Même si ça doit être triste. Je compatis.",
    "reussite": "5 points techniques pour ton familier<br/>100xp pour ton familier<br/>",
    "echec": "//",
    "objectif": "-> Acquérir un familier lvl 10."
  }


Du coup, quand je t'aurais donné tout ce qu'il faut, tu n'aurais besoin que de ce code pour ajouter une quete Smile


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 24 Mai - 19:27

Du coup c'est parfait ! (et en plus c'est plus clair pour mon staff s'il veut rajouter une quête x') )



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Jeu 25 Mai - 8:23

Hello Smile

Bah oui, je pense que ça sera mieux ; par contre, il faut qu'ils puissent accéder aux js du forum Embarassed ça pose problème ou pas ? (on pourra appeler ce bloc dans un sujet grâce à une ifram)


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Jeu 25 Mai - 13:19

Nan ça pose pas de problèmes Smile !



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 9:53

Ok super =) Du coup, on y va ^^

Tout d'abord, on va créer le js qui va contenir toutes les quêtes. On va l'appeler "Controller Quetes" et on ne va rien cocher pour le placement ^^

Code:
; myApp.controller('quetes', ['$scope', function ($scope) {

  $scope.quetes = {};

  /* --- NE PAS TOUCHER AU-DESSUS DE CETTE LIGNE --- */

  // Liste des quetes
  $scope.quetes.liste = [{
    "titre": "Devenir un héros part.I",
    "niveau": "0",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Vous venez juste d'arriver sur le forum, ou peut être pas, mais votre première mission est bien sûr de créer votre personnage, comment ferait-il autrement, s'il n'existait pas, et comment pourrions nous lui attribuer de l'xp d'ailleurs ? Afin de régler ce soucis au plus vite, votre mission, si vous l'acceptez, est de poster votre fiche de présentation et d'être validé. Une fois que cette quête sera remplie, postez à la suite du topic pour que nous vous offrions vos premières récompenses.",
    "reussite": "50xp et 100 pièces d'or",
    "echec": "Et bien vous n'arrivez pas sur le forum, tout simplement !",
    "objectif": "-> Poster sa fiche de présentation<br/>-> Être validé"
  }
  ,
  {
    "titre": "Devenir un héros part.II",
    "niveau": "1",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "A présent que votre personnage est validé, vous pouvez enfin débuter dans le monde du rpg, et pour cela vous êtes invités à poster votre toute première demande de rp ! Pour cela, rendez vous dans le forum \"entre héros\" et plus spécifiquement la partie \"organisation de rp/liens\" et poster votre topic ! (Répondre à une demande de rp déjà présente ne validera pas la quête) ",
    "reussite": "100 xp",
    "echec": "Une profonde tristesse de la part du staff",
    "objectif": "-> Avoir terminé Devenir un héros part.I<br/>-> Poster un topic de demande de rp"
  }
  ,
  {
    "titre": "Devenir un héros part.III",
    "niveau": "2",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Quelle que soit la manière, il vas à présent falloir faire votre premier rp avec quelqu'un (attention, faire un solo ne validera pas la quête). Pour cela, une fois que vous aurez trouvé le partenaire idéal, rendez vous dans une des zones de rp et répondez à votre interlocuteur (ou lancez vous même le premier post). Le rp doit être achevé pour valider la quête (posté en correction) .",
    "reussite": "100 xp",
    "echec": "1000 coups de fouet",
    "objectif": "-> Avoir terminé Devenir un héros part.II<br/>-> Trouver un rp avec au moins une autre personne<br/>-> Achever le rp<br/>-> Poster le rp en correction"
  }
  ,
  {
    "titre": "Confirmer l'expérience part.I",
    "niveau": "5",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Nous vous avons assez aidé pour l'instant, il va falloir un peu vous débrouiller par vous même. Le niveau cinq sera le théâtre de grandes nouveautés et nous espérons qu'elle vous plairont, d'ici là, amusez vous bien, nous vous attendons dans quelques niveaux de plus !",
    "reussite": "Une potion de vitalité mineure",
    "echec": "Une patate à éplucher",
    "objectif": "-> Atteindre le niveau 5"
  }
  ,
  {
    "titre": "Devenir un héros part.IV",
    "niveau": "5",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Si jusqu'ici vous avez utilisé des systèmes très basique, nous pouvons à présent nous pencher sur des choses plus complexes (et par extension, plus intéressantes ! ) Pour que vous soyez capable d''accomplir certaines choses, il faudra que votre personnage devienne plus fort contextuellement, et pour cela, j'ai la solution : les statistiques contextuelles !",
    "reussite": "50 xp",
    "echec": "Pas de SC, dommage ! ",
    "objectif": "> Avoir terminé Devenir un héros part.III<br/>-> Faire une Mise à Jour<br/>-> Répartir 50 SC"
  }
  ,
  {
    "titre": "Entrer dans le monde du travail part.I",
    "niveau": "6",
    "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
    "texteRassemblement1": "Face à un tel manque d'argent, il est difficile de s'en sortir. Quelle est la solution ? Travailler bien sûr ! Il vas falloir mettre la main à la pate mon petit, ou choisir de ne pas la mettre du tout, ce qui serait tout de même franchement dommage !",
    "reussite": "1 point d'avancement",
    "echec": "des larmes ",
    "objectif": "-> Choisir une profession<br/>-> Accomplir une tâche<br/>"
  }
  ,
  {
    "titre": "Crafter part.I",
    "niveau": "6",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Hey ! Salut toi ! J'ai perdus mon précieux marteau et je ne peux plus rien forger ! Peux tu s'il te plait faire une dague à ma place ? Ah tu n'as pas de matériaux ? Et bien vas donc regarder du côté de par-là-bas on raconte qu'il y a de très beaux gisements de fer ! ",
    "reussite": "10 minerai de fer brut",
    "echec": "je ne sais plus quoi dire ... tu te poses encore la question ",
    "objectif": "-> Effectuer une récolte<br/>-> Avoir 1 minerai de fer brut<br/>"
  }
  ,
  {
    "titre": "Crafter part.II",
    "niveau": "6",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Et bien bravo ! Pour terminer ta dague il vas maintenant falloir te rendre à l'atelier et poster les ingrédients que tu met en jeu. Puis effectue un rp de fabrication si c'est la première fois que tu en fait une ! ",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "ben tant pis pour toi !",
    "objectif": "-> Avoir terminé Crafter part.I<br/>-> Fabriquer une dague de palier 1<br/>"
  }
  ,
  {
    "titre": "Crafter part.III",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une bien jolie dague que tu as là ! Mais pourquoi ne pas l'enchanter pour tester si tu es vraiment bon dans ce boulot ? On sait jamais, certaines personnes prometteuses nous décoivent parfois ... Il y a des cristaux à vendre dans la boutique d'à côté, sinon tu peux toujours en collecter quelques uns.",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "le staff te boude",
    "objectif": "-> Avoir terminé Crafter part.II<br/>-> Appliquer un enchantement palier 1 sur la dague"
  }
  ,
  {
    "titre": "Crafter part.IV",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une superbe dague enchantée ! Hey ça te dirais de devenir mon apprenti ? Oh ça va je rigole ! Pourquoi t'irais pas te fabriquer des gants en cuir au lieu de m'ennuyer avec ton air blasé ?",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "mais tu le sais qu'on peux pas échouer ?",
    "objectif": "-> Avoir terminé Crafter part.III<br/>-> Fabriquer des gants de cuir palier 1"
  }
  ,
  {
    "titre": "rafter part.V",
    "niveau": "8",
    "image1": "https://img4.hostingpics.net/pics/550264PNJalchimiste.jpg",
    "texteRassemblement1": "He ho toi ! L'apprenti du forgeron ! T'as pas finis de faire des allers retours ? Ca me donne mal à la tête ! Tu voudrais pas plutôt m'aider ? J'ai besoin d'une potion de vitalité et je n'ai aucune envie de la faire, je suis bien trop concentrée sur ma nouvelle trouvaille : un élixir de barbe piquante, fabuleux n'est ce pas ? Bref, dépêche toi de me filer un coup de main, je te payerais grassement !",
    "reussite": "Remboursement des composants dépensés<br/>50 xp<br />50 pièces d'or",
    "echec": "...",
    "objectif": "-> Avoir terminé Crafter part.IV<br/>-> Fabriquer une potion de vitalité palier 1"
  }
  ,
  {
    "titre": "Entrer dans le monde du travail part.II",
    "niveau": "8",
    "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
    "texteRassemblement1": "Hola mon petit ! Si tu as un job maintenant, ce serait peut être temps d'évoluer non ? Moi je sais pas toi, mais rester pour toujours dans l'échelle basse de la société, je n'aimerais pas trop ça ... Après tu fais comme tu veux, si tu préfère rester un mendiant toute ta vie, je ne t'en empêcherais pas !",
    "reussite": "1 point d'avancement",
    "echec": "la pauvreté pendant 125 générations ! ",
    "objectif": "-> Avoir terminé Entrer dans le monde du travail part.I<br/>-> Monter au deuxième échelon de sa profession"
  }
  ,
  {
    "titre": "Confirmer l'expérience part.II",
    "niveau": "10",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Il a des choses complexes en ce monde, et tu as déjà pus en entrevoir quelques unes, bientôt je t'offrirais la possibilité d'en découvrir encore plus, mais pour cela, il faut que tu continue à me faire confiance ! Essaye d'atteindre le niveau 10 et nous verrons cela.",
    "reussite": "rois cristaux d'enchantement",
    "echec": "Le désespoir éternel",
    "objectif": "-> Atteindre le niveau 10"
  }
  ,
  {
    "titre": "Devenir un héros part.V",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.I",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.II",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.III",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Test test test",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
    ,
  {
    "titre": "Crafter part.III",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une bien jolie dague que tu as là ! Mais pourquoi ne pas l'enchanter pour tester si tu es vraiment bon dans ce boulot ? On sait jamais, certaines personnes prometteuses nous décoivent parfois ... Il y a des cristaux à vendre dans la boutique d'à côté, sinon tu peux toujours en collecter quelques uns.",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "le staff te boude",
    "objectif": "-> Avoir terminé Crafter part.II<br/>-> Appliquer un enchantement palier 1 sur la dague"
  }
  ,
  {
    "titre": "Crafter part.IV",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une superbe dague enchantée ! Hey ça te dirais de devenir mon apprenti ? Oh ça va je rigole ! Pourquoi t'irais pas te fabriquer des gants en cuir au lieu de m'ennuyer avec ton air blasé ?",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "mais tu le sais qu'on peux pas échouer ?",
    "objectif": "-> Avoir terminé Crafter part.III<br/>-> Fabriquer des gants de cuir palier 1"
  }
  ,
  {
    "titre": "rafter part.V",
    "niveau": "8",
    "image1": "https://img4.hostingpics.net/pics/550264PNJalchimiste.jpg",
    "texteRassemblement1": "He ho toi ! L'apprenti du forgeron ! T'as pas finis de faire des allers retours ? Ca me donne mal à la tête ! Tu voudrais pas plutôt m'aider ? J'ai besoin d'une potion de vitalité et je n'ai aucune envie de la faire, je suis bien trop concentrée sur ma nouvelle trouvaille : un élixir de barbe piquante, fabuleux n'est ce pas ? Bref, dépêche toi de me filer un coup de main, je te payerais grassement !",
    "reussite": "Remboursement des composants dépensés<br/>50 xp<br />50 pièces d'or",
    "echec": "...",
    "objectif": "-> Avoir terminé Crafter part.IV<br/>-> Fabriquer une potion de vitalité palier 1"
  }
  ,
  {
    "titre": "Entrer dans le monde du travail part.II",
    "niveau": "8",
    "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
    "texteRassemblement1": "Hola mon petit ! Si tu as un job maintenant, ce serait peut être temps d'évoluer non ? Moi je sais pas toi, mais rester pour toujours dans l'échelle basse de la société, je n'aimerais pas trop ça ... Après tu fais comme tu veux, si tu préfère rester un mendiant toute ta vie, je ne t'en empêcherais pas !",
    "reussite": "1 point d'avancement",
    "echec": "la pauvreté pendant 125 générations ! ",
    "objectif": "-> Avoir terminé Entrer dans le monde du travail part.I<br/>-> Monter au deuxième échelon de sa profession"
  }
  ,
  {
    "titre": "Confirmer l'expérience part.II",
    "niveau": "10",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Il a des choses complexes en ce monde, et tu as déjà pus en entrevoir quelques unes, bientôt je t'offrirais la possibilité d'en découvrir encore plus, mais pour cela, il faut que tu continue à me faire confiance ! Essaye d'atteindre le niveau 10 et nous verrons cela.",
    "reussite": "rois cristaux d'enchantement",
    "echec": "Le désespoir éternel",
    "objectif": "-> Atteindre le niveau 10"
  }
  ,
  {
    "titre": "Devenir un héros part.V",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.I",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.II",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.III",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Test test test",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
    ,
  {
    "titre": "Crafter part.III",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une bien jolie dague que tu as là ! Mais pourquoi ne pas l'enchanter pour tester si tu es vraiment bon dans ce boulot ? On sait jamais, certaines personnes prometteuses nous décoivent parfois ... Il y a des cristaux à vendre dans la boutique d'à côté, sinon tu peux toujours en collecter quelques uns.",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "le staff te boude",
    "objectif": "-> Avoir terminé Crafter part.II<br/>-> Appliquer un enchantement palier 1 sur la dague"
  }
  ,
  {
    "titre": "Crafter part.IV",
    "niveau": "7",
    "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
    "texteRassemblement1": "Une superbe dague enchantée ! Hey ça te dirais de devenir mon apprenti ? Oh ça va je rigole ! Pourquoi t'irais pas te fabriquer des gants en cuir au lieu de m'ennuyer avec ton air blasé ?",
    "reussite": "Remboursement des composants dépensés<br/>50 xp",
    "echec": "mais tu le sais qu'on peux pas échouer ?",
    "objectif": "-> Avoir terminé Crafter part.III<br/>-> Fabriquer des gants de cuir palier 1"
  }
  ,
  {
    "titre": "rafter part.V",
    "niveau": "8",
    "image1": "https://img4.hostingpics.net/pics/550264PNJalchimiste.jpg",
    "texteRassemblement1": "He ho toi ! L'apprenti du forgeron ! T'as pas finis de faire des allers retours ? Ca me donne mal à la tête ! Tu voudrais pas plutôt m'aider ? J'ai besoin d'une potion de vitalité et je n'ai aucune envie de la faire, je suis bien trop concentrée sur ma nouvelle trouvaille : un élixir de barbe piquante, fabuleux n'est ce pas ? Bref, dépêche toi de me filer un coup de main, je te payerais grassement !",
    "reussite": "Remboursement des composants dépensés<br/>50 xp<br />50 pièces d'or",
    "echec": "...",
    "objectif": "-> Avoir terminé Crafter part.IV<br/>-> Fabriquer une potion de vitalité palier 1"
  }
  ,
  {
    "titre": "Entrer dans le monde du travail part.II",
    "niveau": "8",
    "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
    "texteRassemblement1": "Hola mon petit ! Si tu as un job maintenant, ce serait peut être temps d'évoluer non ? Moi je sais pas toi, mais rester pour toujours dans l'échelle basse de la société, je n'aimerais pas trop ça ... Après tu fais comme tu veux, si tu préfère rester un mendiant toute ta vie, je ne t'en empêcherais pas !",
    "reussite": "1 point d'avancement",
    "echec": "la pauvreté pendant 125 générations ! ",
    "objectif": "-> Avoir terminé Entrer dans le monde du travail part.I<br/>-> Monter au deuxième échelon de sa profession"
  }
  ,
  {
    "titre": "Confirmer l'expérience part.II",
    "niveau": "10",
    "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
    "texteRassemblement1": "Il a des choses complexes en ce monde, et tu as déjà pus en entrevoir quelques unes, bientôt je t'offrirais la possibilité d'en découvrir encore plus, mais pour cela, il faut que tu continue à me faire confiance ! Essaye d'atteindre le niveau 10 et nous verrons cela.",
    "reussite": "rois cristaux d'enchantement",
    "echec": "Le désespoir éternel",
    "objectif": "-> Atteindre le niveau 10"
  }
  ,
  {
    "titre": "Devenir un héros part.V",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.I",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.II",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Le parcours du combattant part.III",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Test test test",
    "niveau": "10",
    "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
    "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
    "reussite": "150 xp",
    "echec": "Alors là je vous le souhaite pas !",
    "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
  }
  ,
  {
    "titre": "Briser la solitude part.I",
    "niveau": "20",
    "image1": "https://img4.hostingpics.net/pics/981705matredanimaux.jpg",
    "texteRassemblement1": "Bonjour. Qu'est-ce que tu viens faire ici ? Tu veux un familier c'est ça ? Si tu en veux un tu es au bon endroit. Ici on dresse des animaux et on apprend à se battre en équipe, que ce soit avec eux ou avec nos compagnons. N'est-ce pas Tooth ?",
    "image2": "https://img4.hostingpics.net/pics/514328animal.jpg",
    "texteRassemblement2": "Je confirme. Pour l'instant tu es seul(e). Reviens nous voir quand tu auras quelqu'un à tes côtés. Je ne peux rien faire pour ta solitude. Même si ça doit être triste. Je compatis.",
    "reussite": "5 points techniques pour ton familier<br/>100xp pour ton familier<br/>",
    "echec": "//",
    "objectif": "-> Acquérir un familier lvl 10."
  }
  /*,
  {
    "titre": "",
    "niveau": "",
    "image1": "",
    "texteRassemblement1": "",
    "image2": "",
    "texteRassemblement2": "",
    "reussite": "",
    "echec": "",
    "objectif": ""
  }*/
  ];


  /* --- NE PAS TOUCHER EN-DESSOUS DE CETTE LIGNE --- */
  // Gestion quete à afficher
  $scope.lastQuete = 0;
  $scope.quetes.AfficherMasquerQuete = function( item ) {
    $scope.lastQuete = item;
    return $scope.lastQuete;
  };

  // Gestion menu à afficher
  $scope.listeMenu = 0;
  $scope.nbMenu = 14;
  $scope.listeMenuMax = 14;
  $scope.quetes.afficherListe = function( item, operation ){
    if(operation == "minus"){
      $scope.listeMenu -= $scope.nbMenu;
      $scope.listeMenuMax = $scope.listeMenuMax - $scope.nbMenu;
    }else if(operation == "plus"){
      $scope.listeMenu += $scope.nbMenu;
      $scope.listeMenuMax = $scope.listeMenu + $scope.nbMenu;
    }

    $scope.quetes.AfficherMasquerQuete($scope.listeMenu);

    return $scope.listeMenu;
       
  };


}]);

C'est ce js que tu devras modifier pour ajouter/éditer/supprimer une quête Smile

Idea Pense à récupérer l'url de ton js Wink




Ensuite, on va mettre ça sur une page HTML du forum (n'oublie pas de te mettre en mode avancé Wink )
Code:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Les quêtes d'apprentissage</title>

  <link href="https://fonts.googleapis.com/css?family=Felipa" rel="stylesheet">
 
<style type="text/css">
 
  body
{
  width : 794px;
  height : 600px;
  border : 6px inset #a6beee;
  padding : 10px;
}

.hidden{
  display: none;
}

.wrapper{
  bottom: 0;
  left: 18px;
  position: absolute;
  right: 0;
  top: 24px;
}

.bloc_texte
{
    position:absolute;
    left:207px;
    top:-10px;
    width :600px;
    height:619px;
    background-color:#cfd4de;
    border:1px solid black;
}

.titre
{
    position : relative;
  right : 8px;
  bottom : 10px;
  z-index : 2;
  width : 200px;
    font-size:14px;
    background-color:#4a5d85;
    color:#aec3ed;
    padding:4px;
    height: 26px;
}
.titre:hover
{
    cursor:pointer;
}
.decor
{
    position:absolute;
  top : 14px;
  left : 13px;
    height:618px;
  width : 206px;
  border : 3px solid #a6beee;
  z-index : 1;
  background-color:#cfd4de;
}
.bloc_quete .title
{
  border:2px solid #4a5d85;
  font-family : 'Felipa';
  font-size : 200%;
  text-align : center;
  display : flex;
  justify-content : space-between;
}
.bloc_quete article
{
  border:2px solid #4a5d85;
  padding : 10px;
  background-color:#c9d6f1;
}
.bloc_quete section
{
  display : flex;
}
.bloc_quete
{
  border : 4px ridge #a6beee;
  margin :auto;
  height : 611px;
  background-color:#c9d6f1;
}
.rassemblement
{
  width : 70%;
}
.PNJ
{
        float : left;
        height : 100px;
        width : 100px;
        border-radius : 50px;
        border : 1px solid #4a5d85;
        margin-right : 10px;
}

</style>

</head>
<body data-ng-app="myApp">

<div class="decor"></div>
 
<div data-ng-controller="quetes">
 

 
  <span ng-repeat="_ in quetes.liste" ng-if="$index % nbMenu == 0" class="wrapper">

    <div ng-if="$index % nbMenu == 0 && $index < nbMenu" style="position: fixed; top: 20px; right: 50px;z-index: 999">
      <p data-ng-click="quetes.afficherListe($index, 'minus')"  data-ng-show="listeMenu >= nbMenu"><< Quêtes précédentes</p>
      <p data-ng-click="quetes.afficherListe($index, 'plus')" data-ng-show=" listeMenu + nbMenu <= quetes.liste.length">Quêtes suivantes >></p>
    </div>
   
    <span data-ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3, $index + 4, $index + 5, $index + 6, $index + 7, $index + 8, $index + 9, $index + 10, $index + 11, $index + 12, $index + 13]" data-ng-init="quete = quetes.liste[i]" data-ng-class="{'hidden': !quete.titre}" data-ng-show="i < listeMenuMax && i >= listeMenu">
      <h1 class="titre" data-ng-click="quetes.AfficherMasquerQuete(i)">{{ quete.titre }} (niv. {{ quete.niveau }})</h1>
      <div class="bloc_texte" data-ng-show="i == lastQuete">
        <div class="bloc_quete">
          <div class="title">
            <span>{{ quete.titre }}</span><span>Niv : {{ quete.niveau }}</span>
          </div>
          <section>
            <div class="rassemblement">
              <article style="height : 300px;">
                <img src="{{ quete.image1 }}" class="PNJ"/>
                <span ng-bind-html="quete.texteRassemblement1  | rawHtml"></span>
                <span data-ng-class="{'hidden': !quete.image2 || !quete.texteRassemblement2}">
                  <br />
                  <br />
                  <br />
                </span>
                <img src="{{ quete.image2 }}" data-ng-class="{'hidden': !quete.image2}" class="PNJ" style="float : right"/>
                <span data-ng-class="{'hidden': !quete.texteRassemblement2}" ng-bind-html="quete.texteRassemblement2  | rawHtml"></span>         
              </article>
              <article style="height : 219px;">
                <strong>En cas de réussite :</strong> <span ng-bind-html="quete.reussite  | rawHtml"></span>  <br/>
                <strong>En cas d'échec :</strong>  <span ng-bind-html="quete.echec  | rawHtml"></span>
              </article>
            </div>
            <article style="width : 30%;">
              <strong>Objectifs de la quête :</strong>  <br/><br/>
              <span ng-bind-html="quete.objectif  | rawHtml"></span>
            </article>
          </section>
        </div>
      </div>
    </span>

  </span>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
var myApp = angular.module('myApp', []);

myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);
</script>
<!-- Controler -->
<script src="http://miettes.exprimetoi.net/39093.js" language="Javascript" type="text/javascript"></script>
 

</body>
</html>

Idea On n'utilise pas le haut et le bas du forum Wink

Exclamation N'oublie pas de remplacer l'url ici :
Code:
<script src="http://miettes.exprimetoi.net/39093.js" language="Javascript" type="text/javascript"></script>
par celle de ton js Smile

Idea Dès que tu vas modifier le javascript, l'url va changer ; il faudra donc aller changer aussi la page html pour remplacer le lien (c'est quelque chose de peu pratique de la part de FA, j'avoue :/ )




Je te laisse tester et revenir vers moi s'il y a un souci Smile


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 10:40

Coucou !

Déjà, merci beaucoup ;foouu !

J'ai rajouté la fin des quêtes et j'ai observé deux petits bugs (un vraiment petit et l'autre un peu plus embêtant).

Le premier c'est un décalage du css visiblement, sur les quêtes dont le titre fait deux lignes, le texte est décalé vers le bas. Je suppose que je pourrais trafiquer pour le redécaler vers le haut mais c'est juste pour savoir si c'est réglable facilement en js, sinon je me débrouillerais

Spoiler:
 


Pour le deuxième, c'est qu'une troisième page se créé sans nécessité, et ressemble à ça :
Spoiler:
 

Et sinon c'est parfait o/



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 10:47

ah oui ^^ En fait, j'ai fixé une hauteur pour que ça fasse plus propre ; il suffit de régler le height ici :
Code:
.titre
{
    position : relative;
  right : 8px;
  bottom : 10px;
  z-index : 2;
  width : 200px;
    font-size:14px;
    background-color:#4a5d85;
    color:#aec3ed;
    padding:4px;
    height: 26px;
}

Tu peux me donner ton js complet ? Comme ça je regarde sur mon ordi' pour la nouvelle page Smile

(il faut aussi que tu bosses la CSS pour les liens de navigation entre les pages =) mais je pense que ça ne devrait pas poser de problème Smile )


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 11:11

Oui pour le css pour la navigation entre les pages je comptais le faire :3

Du coup pour le bug d'affichage j'ai aussi dû changer le padding-top mais effectivement, rien de sorcier xDDD

Et le script :

Code:
; myApp.controller('quetes', ['$scope', function ($scope) {

      $scope.quetes = {};

      /* --- NE PAS TOUCHER AU-DESSUS DE CETTE LIGNE --- */

      // Liste des quetes
      $scope.quetes.liste = [{
        "titre": "Devenir un héros part.I",
        "niveau": "0",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Vous venez juste d'arriver sur le forum, ou peut être pas, mais votre première mission est bien sûr de créer votre personnage, comment ferait-il autrement, s'il n'existait pas, et comment pourrions nous lui attribuer de l'xp d'ailleurs ? Afin de régler ce soucis au plus vite, votre mission, si vous l'acceptez, est de poster votre fiche de présentation et d'être validé. Une fois que cette quête sera remplie, postez à la suite du topic pour que nous vous offrions vos premières récompenses.",
        "reussite": "50xp et 100 pièces d'or",
        "echec": "Et bien vous n'arrivez pas sur le forum, tout simplement !",
        "objectif": "-> Poster sa fiche de présentation<br/>-> Être validé"
      }
      ,
      {
        "titre": "Devenir un héros part.II",
        "niveau": "1",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "A présent que votre personnage est validé, vous pouvez enfin débuter dans le monde du rpg, et pour cela vous êtes invités à poster votre toute première demande de rp ! Pour cela, rendez vous dans le forum \"entre héros\" et plus spécifiquement la partie \"organisation de rp/liens\" et poster votre topic ! (Répondre à une demande de rp déjà présente ne validera pas la quête) ",
        "reussite": "100 xp",
        "echec": "Une profonde tristesse de la part du staff",
        "objectif": "-> Avoir terminé Devenir un héros part.I<br/>-> Poster un topic de demande de rp"
      }
      ,
      {
        "titre": "Devenir un héros part.III",
        "niveau": "2",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Quelle que soit la manière, il vas à présent falloir faire votre premier rp avec quelqu'un (attention, faire un solo ne validera pas la quête). Pour cela, une fois que vous aurez trouvé le partenaire idéal, rendez vous dans une des zones de rp et répondez à votre interlocuteur (ou lancez vous même le premier post). Le rp doit être achevé pour valider la quête (posté en correction) .",
        "reussite": "100 xp",
        "echec": "1000 coups de fouet",
        "objectif": "-> Avoir terminé Devenir un héros part.II<br/>-> Trouver un rp avec au moins une autre personne<br/>-> Achever le rp<br/>-> Poster le rp en correction"
      }
      ,
      {
        "titre": "Confirmer l'expérience part.I",
        "niveau": "5",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Nous vous avons assez aidé pour l'instant, il va falloir un peu vous débrouiller par vous même. Le niveau cinq sera le théâtre de grandes nouveautés et nous espérons qu'elle vous plairont, d'ici là, amusez vous bien, nous vous attendons dans quelques niveaux de plus !",
        "reussite": "Une potion de vitalité mineure",
        "echec": "Une patate à éplucher",
        "objectif": "-> Atteindre le niveau 5"
      }
      ,
      {
        "titre": "Devenir un héros part.IV",
        "niveau": "5",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Si jusqu'ici vous avez utilisé des systèmes très basique, nous pouvons à présent nous pencher sur des choses plus complexes (et par extension, plus intéressantes ! ) Pour que vous soyez capable d''accomplir certaines choses, il faudra que votre personnage devienne plus fort contextuellement, et pour cela, j'ai la solution : les statistiques contextuelles !",
        "reussite": "50 xp",
        "echec": "Pas de SC, dommage ! ",
        "objectif": "> Avoir terminé Devenir un héros part.III<br/>-> Faire une Mise à Jour<br/>-> Répartir 50 SC"
      }
      ,
      {
        "titre": "Entrer dans le monde du travail part.I",
        "niveau": "6",
        "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
        "texteRassemblement1": "Face à un tel manque d'argent, il est difficile de s'en sortir. Quelle est la solution ? Travailler bien sûr ! Il vas falloir mettre la main à la pate mon petit, ou choisir de ne pas la mettre du tout, ce qui serait tout de même franchement dommage !",
        "reussite": "1 point d'avancement",
        "echec": "des larmes ",
        "objectif": "-> Choisir une profession<br/>-> Accomplir une tâche<br/>"
      }
      ,
      {
        "titre": "Crafter part.I",
        "niveau": "6",
        "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
        "texteRassemblement1": "Hey ! Salut toi ! J'ai perdus mon précieux marteau et je ne peux plus rien forger ! Peux tu s'il te plait faire une dague à ma place ? Ah tu n'as pas de matériaux ? Et bien vas donc regarder du côté de par-là-bas on raconte qu'il y a de très beaux gisements de fer ! ",
        "reussite": "10 minerai de fer brut",
        "echec": "je ne sais plus quoi dire ... tu te poses encore la question ",
        "objectif": "-> Effectuer une récolte<br/>-> Avoir 1 minerai de fer brut<br/>"
      }
      ,
      {
        "titre": "Crafter part.II",
        "niveau": "6",
        "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
        "texteRassemblement1": "Et bien bravo ! Pour terminer ta dague il vas maintenant falloir te rendre à l'atelier et poster les ingrédients que tu met en jeu. Puis effectue un rp de fabrication si c'est la première fois que tu en fait une ! ",
        "reussite": "Remboursement des composants dépensés<br/>50 xp",
        "echec": "ben tant pis pour toi !",
        "objectif": "-> Avoir terminé Crafter part.I<br/>-> Fabriquer une dague de palier 1<br/>"
      }
      ,
      {
        "titre": "Crafter part.III",
        "niveau": "7",
        "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
        "texteRassemblement1": "Une bien jolie dague que tu as là ! Mais pourquoi ne pas l'enchanter pour tester si tu es vraiment bon dans ce boulot ? On sait jamais, certaines personnes prometteuses nous décoivent parfois ... Il y a des cristaux à vendre dans la boutique d'à côté, sinon tu peux toujours en collecter quelques uns.",
        "reussite": "Remboursement des composants dépensés<br/>50 xp",
        "echec": "le staff te boude",
        "objectif": "-> Avoir terminé Crafter part.II<br/>-> Appliquer un enchantement palier 1 sur la dague"
      }
      ,
      {
        "titre": "Crafter part.IV",
        "niveau": "7",
        "image1": "https://img4.hostingpics.net/pics/636014PNJforgeron.jpg",
        "texteRassemblement1": "Une superbe dague enchantée ! Hey ça te dirais de devenir mon apprenti ? Oh ça va je rigole ! Pourquoi t'irais pas te fabriquer des gants en cuir au lieu de m'ennuyer avec ton air blasé ?",
        "reussite": "Remboursement des composants dépensés<br/>50 xp",
        "echec": "mais tu le sais qu'on peux pas échouer ?",
        "objectif": "-> Avoir terminé Crafter part.III<br/>-> Fabriquer des gants de cuir palier 1"
      }
      ,
      {
        "titre": "Crafter part.V",
        "niveau": "8",
        "image1": "https://img4.hostingpics.net/pics/550264PNJalchimiste.jpg",
        "texteRassemblement1": "He ho toi ! L'apprenti du forgeron ! T'as pas finis de faire des allers retours ? Ca me donne mal à la tête ! Tu voudrais pas plutôt m'aider ? J'ai besoin d'une potion de vitalité et je n'ai aucune envie de la faire, je suis bien trop concentrée sur ma nouvelle trouvaille : un élixir de barbe piquante, fabuleux n'est ce pas ? Bref, dépêche toi de me filer un coup de main, je te payerais grassement !",
        "reussite": "Remboursement des composants dépensés<br/>50 xp<br />50 pièces d'or",
        "echec": "...",
        "objectif": "-> Avoir terminé Crafter part.IV<br/>-> Fabriquer une potion de vitalité palier 1"
      }
      ,
      {
        "titre": "Entrer dans le monde du travail part.II",
        "niveau": "8",
        "image1": "https://01varvara.files.wordpress.com/2010/04/sergei-kirillov-a-satisfied-merchant-russian-people-1994-e1272149551393.jpg?w=1000",
        "texteRassemblement1": "Hola mon petit ! Si tu as un job maintenant, ce serait peut être temps d'évoluer non ? Moi je sais pas toi, mais rester pour toujours dans l'échelle basse de la société, je n'aimerais pas trop ça ... Après tu fais comme tu veux, si tu préfère rester un mendiant toute ta vie, je ne t'en empêcherais pas !",
        "reussite": "1 point d'avancement",
        "echec": "la pauvreté pendant 125 générations ! ",
        "objectif": "-> Avoir terminé Entrer dans le monde du travail part.I<br/>-> Monter au deuxième échelon de sa profession"
      }
      ,
      {
        "titre": "Confirmer l'expérience part.II",
        "niveau": "10",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Il a des choses complexes en ce monde, et tu as déjà pus en entrevoir quelques unes, bientôt je t'offrirais la possibilité d'en découvrir encore plus, mais pour cela, il faut que tu continue à me faire confiance ! Essaye d'atteindre le niveau 10 et nous verrons cela.",
        "reussite": "rois cristaux d'enchantement",
        "echec": "Le désespoir éternel",
        "objectif": "-> Atteindre le niveau 10"
      }
      ,
      {
        "titre": "Le parcours du combattant part.I",
        "niveau": "10",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Tu es arrivé jusqu'ici, mon enfant, et es ce ici que ton voyage s'arrêtera ? Je ne l'espère pas, en tout cas si j'étais toi, je ne l'espérerais pas. Il est temps à présent que tu prenne ton courage à deux mains et que tu devienne un véritable combattant. Quel que soit tes choix, je t'y aiderais, mais ne crois pas que le chemin sera facile.",
        "reussite": "150 xp",
        "echec": "Alors là je vous le souhaite pas !",
        "objectif": "-> Avoir terminé Devenir un héros part.IV<br/>-> Avoir sa fiche technique validée"
      }
      ,
      {
        "titre": "Le parcours du combattant part.II",
        "niveau": "11",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Bien mon enfant, mais il ne faut pas t'arrêter en si bon chemin ! Pourquoi ne ferais tu pas une quête pour t'entraîner ? Souvent les quêtes nécessitent de se battre et cela pourra renforcer ton expérience! Lorsque tu auras finis, reviens me voir et je t'apprendrais quelques petits trucs, tu verras !",
        "reussite": "50 xp<br/>5 points techniques",
        "echec": "Un maître d'arme en colère",
        "objectif": "-> Avoir terminé Le parcours du combattant part.I<br/>-> Avoir sa fiche technique validée"
      }
      ,
      {
        "titre": "Le parcours du combattant part.III",
        "niveau": "14",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Mon enfant, aujourd'hui est un grand jour, je vais t'envoyer chasser. Vois tu ce Baloth là-bas ? Je l'utilise pour entraîner mes jeunes recrues. Ce n'est pas le plus puissant, mais il pourra te donner du fil à retordre si tu t'y prends comme un manche. Fais attention à ne pas le tuer d'accord ?! Contente toi de lui faire un peu peur.",
        "reussite": "100 xp<br/>10 points techniques",
        "echec": "Impossible de continuer la suite de quête",
        "objectif": "-> Avoir terminé Le parcours du combattant part.II<br/>-> Lancer une chasse (si la quête est en cours, l'adversaire sera automatiquement le Baloth)<br/>-> Faire peur au Baloth sans le tuer<br/>"
      }
      ,
      {
        "titre": "Le parcours du combattant part.IV",
        "niveau": "15",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Ouf, j'ai cru que tu l'avais tué ! Tu me vois ravis que tu ne l'ai pas fait mon enfant ! Bien, pour que je puisse continuer mon entraînement dans de bonnes conditions, il va falloir que tu choisisses plus particulièrement ce que tu veux que je t'apprenne ! Je ne peux pas juste te laisser traîner comme ça, allez dépêche toi, choisis la spécialité que tu voudrais apprendre !",
        "reussite": "10 xp de classe<br/>50 xp",
        "echec": "//",
        "objectif": "-> Avoir terminé Le parcours du combattant part.III<br/>-> Choisir une classe"
      }
      ,
      {
        "titre": "Le parcours du combattant part.V",
        "niveau": "16",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Une belle journée n'es-ce pas ? Mon travail avec toi est presque terminé mon enfant ! Si tu souhaites continuer, je t'invite à affronter un autre de tes camarades qui sont sur la fin de leur apprentissage eux aussi. Ils seront sans doute nombreux à vouloir le faire puisque je leur ai tous donné la même mission. Entre tuez vous si vous le voulez, ce ne sont plus mes affaires.",
        "reussite": "10 xp de classe<br/>100 xp",
        "echec": "//",
        "objectif": "-> Avoir terminé Le parcours du combattant part.IV<br/>-> Faire un combat staté (quelle qu'en soit l'issue) d'au moins deux posts."
      }
      ,
      {
        "titre": "Confirmer l'expérience part.III",
        "niveau": "20",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Hmm je vois, tu as bien progressé ! Mais ce n'est pas encore assez, il a d'autres choses que tu dois voir. Je vais t'attendre ici jusqu'à ce que tu sois assez fort pour me retrouver, nous verrons bien si tu t'en sors aussi facilement que tu sembles le croire. Allons, dépêche toi, je n'ai pas toute la vie !",
        "reussite": "200 pièces d'or",
        "echec": "//",
        "objectif": "-> Atteindre le niveau 20"
      }
      ,
      {
        "titre": "Briser la solitude part.I",
        "niveau": "20",
        "image1": "https://img4.hostingpics.net/pics/981705matredanimaux.jpg",
        "texteRassemblement1": "Bonjour. Qu'est-ce que tu viens faire ici ? Tu veux un familier c'est ça ? Si tu en veux un tu es au bon endroit. Ici on dresse des animaux et on apprend à se battre en équipe, que ce soit avec eux ou avec nos compagnons. N'est-ce pas Tooth ?",
        "image2": "https://img4.hostingpics.net/pics/514328animal.jpg",
        "texteRassemblement2": "Je confirme. Pour l'instant tu es seul(e). Reviens nous voir quand tu auras quelqu'un à tes côtés. Je ne peux rien faire pour ta solitude. Même si ça doit être triste. Je compatis.",
        "reussite": "5 points techniques pour ton familier<br/>100xp pour ton familier<br/>",
        "echec": "//",
        "objectif": "-> Acquérir un familier lvl 10."
      }
      ,
      {
        "titre": "Briser la solitude part.II",
        "niveau": "20",
        "image1": "https://img4.hostingpics.net/pics/981705matredanimaux.jpg",
        "texteRassemblement1": "De retour ? C'est bien, nous allons pouvoir commencer les choses réellement intéressantes. Un peu d'argent suffira à ce que j'apprenne quelques petits trucs à ton compagnon. Comme c'est la première fois je serais généreuse, n'est-ce pas Tooth ?",
        "image2": "https://img4.hostingpics.net/pics/514328animal.jpg",
        "texteRassemblement2": "Je confirme. Je m'occupe de dresser les compagnons animaux et mon amie les autres, tu vois, il y aura toujours quelqu'un pour s'occuper de tes amis. Ne t'inquiète pas. Vas t-en, tu nous gênes dans notre travail.",
        "reussite": "Prix d'un entraînement d'un jour<br/>100xp pour ton familier<br/>",
        "echec": "//",
        "objectif": "-> Avoir terminé Briser la solitude part.I. <br/> Payer un entraînement d'au moins une journée"
      }
      ,
      {
        "titre": "Briser la solitude part.III",
        "niveau": "20",
        "image1": "https://img4.hostingpics.net/pics/981705matredanimaux.jpg",
        "texteRassemblement1": "Voilà ton compagnon, il est encore plus fort qu'avant ! Mais nous ne pouvons pas toujours nous occuper de lui comme ça, il faut aussi que vous fassiez des choses ensemble ! Je ne veux plus vous voir tant que tu ne te seras pas correctement occupé de lui ! Allez zou ! N'est-ce pas Tooth ?",
        "image2": "https://img4.hostingpics.net/pics/514328animal.jpg",
        "texteRassemblement2": "Je confirme. Trop de personnes négligent leurs amis et les laissent ici avec nous sans jamais les récupérer. Mais à quoi servent ils dans ces conditions ? En plus de cela, nous coûtons assez cher.",
        "reussite": "100xp<br/>200xp pour ton familier<br/>",
        "echec": "//",
        "objectif": "-> Avoir terminé Briser la solitude part.II. <br/>Participer à une quête pour familier <br/> Faire au moins une chasse avec ton familier"
      }
      ,
      {
        "titre": "Confirmer l'expérience part.IV",
        "niveau": "60",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Et bien dit donc, je ne te reconnais presque plus à présent. Mais rien n'est encore terminé. Je ne me lasse pas de te voir grandir, vois-tu ? Mais cette fois-ci, j'ai d'autres choses à faire, il faudra que tu sois vraiment puissant(e) si tu veux revenir me voir.",
        "reussite": "200 pièces d'or<br/>100xp<br/>20xp de classe",
        "echec": "//",
        "objectif": "-> Atteindre le niveau 60<br/>->Atteindre le niveau de classe 50"
      }
      ,
      {
        "titre": "Le parcours du combattant part.VI",
        "niveau": "60",
        "image1": "https://img4.hostingpics.net/pics/239734PNJmaitredarme.jpg",
        "texteRassemblement1": "Hey te revoilà ! Tu n'es plus le même mon enfant, si tu m'autorises encore à te nommer ainsi ! Tu te rapelles qu'à l'époque je t'avais appris une spécialisation particulière ? Et bien je peux maintenant t'en apprendre une deuxième, reviens me voir dès que tu seras prêt !",
        "reussite": "20 xp de classe<br/>100 xp",
        "echec": "//",
        "objectif": "-> Avoir terminé Le parcours du combattant part.V<br/>-> Débloquer une seconde classe de base OU une classe légendaire"
      }
      ,
      {
        "titre": "Devenir sédentaire part.I",
        "niveau": "60",
        "image1": "https://img4.hostingpics.net/pics/837314PNJbanquier.jpg",
        "texteRassemblement1": "Vous venez pour ... ? Acheter un domaine ? Voyez vous cela ! Et vous avez assez d'argent ? Si ce n'est pas le cas, vous pouvez allez voir ailleurs, ici on ne traite qu'avec de l'or ... ou des services rendus. Je vais vous fournir un conseiller une fois que vous aurez votre propriété, c'est contenus dans le prix. Mais n'espérez pas autre chose. ",
        "reussite": "500 pièces d'or dans la caisse du domaine<br/>une petite maison<br/>une auberge",
        "echec": "//",
        "objectif": "-> Acheter un domaine OU effectuer une quête pour l'obtenir"
      }
      ,
      {
        "titre": "Devenir sédentaire part.II",
        "niveau": "61",
        "image1": "https://img4.hostingpics.net/pics/715975PNJconseiller.jpg",
        "texteRassemblement1": "Bonjour maître, je suis votre conseiller en domaine, avez-vous déjà commencé à le développer ? Quoi qu'il en soit, vous aurez très probablement besoin de moi pour comprendre comment tout cela fonctionne. Pour commencer, il va falloir vous débrouiller pour obtenir quelques habitants. N'oubliez pas que les habitants ont besoin de nourriture!",
        "reussite": "Une ferme",
        "echec": "//",
        "objectif": "-> Avoir terminé devenir sédentaire part.I <br/>-> Avoir 20 habitants <br/> -> Avoir une production positive de nourriture"
      }
      ,
      {
        "titre": "Devenir sédentaire part.III",
        "niveau": "61",
        "image1": "https://img4.hostingpics.net/pics/715975PNJconseiller.jpg",
        "texteRassemblement1": "A présent il va falloir rentabiliser votre domaine, pour ne pas avoir besoin de payer ses améliorations de votre poche ! Vous pouvez accomplir des quêtes qui vous fourniront de l'argent ou des aménagements, ou tout simplement vous débrouiller avec le commerce et les impôts !",
        "reussite": "500 pièces d'or dans le coffre du domaine",
        "echec": "//",
        "objectif": "-> Avoir terminé devenir sédentaire part.II <br/>-> Avoir plus de 5000 pièces d'or dans la caisse du domaine <br/> -> Avoir 50 habitants"
      }
      ,
      {
        "titre": "Devenir sédentaire part.IV",
        "niveau": "65",
        "image1": "https://img4.hostingpics.net/pics/715975PNJconseiller.jpg",
        "texteRassemblement1": "Votre domaine a bien fructifié ! Félicitations !  Mais pour l'instant il ne vous sert pas à grand chose, essayez de construire des bâtiments spécialisés qui pourront vous être utile plus tard ! Un bâtiment de guilde, par exemple, vous permet de faire votre propre guilde ou clan !",
        "reussite": "5000 pièces d'or dans la caisse du domaine",
        "echec": "//",
        "objectif": "-> Avoir terminé devenir sédentaire part.III <br/>-> Avoir construit deux bâtiments spécialisés ou plus <br/> -> Avoir 100 habitants"
      }
      /*,
      {
        "titre": "",
        "niveau": "",
        "image1": "",
        "texteRassemblement1": "",
        "image2": "",
        "texteRassemblement2": "",
        "reussite": "",
        "echec": "",
        "objectif": ""
      }*/
      ];


      /* --- NE PAS TOUCHER EN-DESSOUS DE CETTE LIGNE --- */
      // Gestion quete à afficher
      $scope.lastQuete = 0;
      $scope.quetes.AfficherMasquerQuete = function( item ) {
        $scope.lastQuete = item;
        return $scope.lastQuete;
      };

      // Gestion menu à afficher
      $scope.listeMenu = 0;
      $scope.nbMenu = 14;
      $scope.listeMenuMax = 14;
      $scope.quetes.afficherListe = function( item, operation ){
        if(operation == "minus"){
          $scope.listeMenu -= $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenuMax - $scope.nbMenu;
        }else if(operation == "plus"){
          $scope.listeMenu += $scope.nbMenu;
          $scope.listeMenuMax = $scope.listeMenu + $scope.nbMenu;
        }

        $scope.quetes.AfficherMasquerQuete($scope.listeMenu);

        return $scope.listeMenu;
         
      };


    }]);

Merci encore



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 11:16

Zioup là Smile

Dans le html, j'ai juste remplacé ça :
Code:
<p data-ng-click="quetes.afficherListe($index, 'plus')" data-ng-show=" listeMenu + nbMenu <= quetes.liste.length">Quêtes suivantes >></p>
par ça :
Code:
<p data-ng-click="quetes.afficherListe($index, 'plus')" data-ng-show=" listeMenu + nbMenu < quetes.liste.length">Quêtes suivantes >></p>


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 11:29

Et bien ça marche parfaitement ! Merci beaucoup Miettes ! J'essaye d'apprendre le js et le jquery de mon côté et j'y comprends rien du tout xDD ! Mais en tout cas c'est parfait ! Merci milles fois !

Tu peux classer si tu veux !



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 12:00

Si jamais tu veux une explication, je peux essayer de te la donner hein =)


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mer 31 Mai - 18:57

Ah bah ce serait avec plaisir ! Si ça peut t'aider à pas trop t'embêter, je connais assez bien le js maintenant (j'ai honte de t'avouer que c'est grâce à open classrooms) mais je débarque totalement en jquery (je sais juste qu'il faut mettre un '$' pour sélectionner quelque chose xD



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Sam 3 Juin - 8:07

Hello Smile

En réalité, ici, le langage utilisé est de l'angular. En gros, c'est du js "poussé" et facilement associable au html Smile ça s'utilise de plus en plus sur les sites pour les choses répétitives (ce qui est totalement le cas ici ^^). Je ne vais pas tout d'expliquer, juste les "grandes lignes" et si ça t'intéresse, il y a ce site qui est top (c'est là que j'ai appris les bases) : https://www.tinci.fr/blog/apprendre-angular-en-un-jour-le-guide-ultime/

On y va =) On va commencer par le JS ^^ Dans le html, tu as ce js :
Code:
var myApp = angular.module('myApp', []);
Il signifie juste : je vais utiliser de l'angular ici. Tout le code js que je vais appeler sera lié à ce module angular que j'ai décidé d'appeler "myApp".

Dans une même page, tu peux avoir plusieurs modules angulars, chacun faisant ses propres fonctions Smile Du coup, on aurais pu avoir :
Code:
var appMusique = angular.module('appMusique', []);
var appFilm = angular.module('appFilm', []);
var appSeries = angular.module('appSeries', []);

Ensuite, tu as ça :
Code:
myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

Ici, j'ai juste créé un filtre pour que les balises html soient interprétés dans les textes qu'on récupére (j'avoue, c'est un filtre trouver sur le net Embarassed)
$sce = le scope, c'est à dire l'élement sur lequel on va appliquer le filtre (= la source quoi ^^)
Et on lit ce filtre à myApp.

Si on reprend l'exemple avec les différents modules angular, le filtre "rawHtml" (= c'est son nom) ne peut pas être utilisé dans le module appFilm par exemple Smile Il est uniquement lié au module myApp.

----

Est-ce que jusque là ça va ? Smile


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Lun 5 Juin - 16:53

Yes ! Je vais me renseigner sur l'angular quand j'aurais finis le jquery du coup o/



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Lun 19 Juin - 9:43

Hello Smile

On va maintenant parler du gros js "Controller Quetes"

Code:
 myApp.controller('quetes', ['$scope', function ($scope) {
ici, ça veut dire : je crée un controller dans mon application angular qui s'appelle "myApp". Ce controller s'appelle "quetes"

Code:
  $scope.quetes = {};
Dans mon controller "quetes", je vais avoir une variable "quetes" qui va stocker plein d'infos (une sorte de grosse armoire)

Code:
$scope.quetes.liste = []
Dans ma grosse armoire "quetes", je vais créer un tableau de valeur. Ce tableau s'appellera "liste"

Code:
{
        "titre": "Devenir un héros part.I",
        "niveau": "0",
        "image1": "http://46.105.142.133/~diogo/stats/pisg/unknown-person09.jpg",
        "texteRassemblement1": "Vous venez juste d'arriver sur le forum, ou peut être pas, mais votre première mission est bien sûr de créer votre personnage, comment ferait-il autrement, s'il n'existait pas, et comment pourrions nous lui attribuer de l'xp d'ailleurs ? Afin de régler ce soucis au plus vite, votre mission, si vous l'acceptez, est de poster votre fiche de présentation et d'être validé. Une fois que cette quête sera remplie, postez à la suite du topic pour que nous vous offrions vos premières récompenses.",
        "reussite": "50xp et 100 pièces d'or",
        "echec": "Et bien vous n'arrivez pas sur le forum, tout simplement !",
        "objectif": "-> Poster sa fiche de présentation<br/>-> Être validé"
      }
Voilà à quoi ressemble chaque ligne de mon tableau "liste"

----

Est-ce que pour le moment, ça va ? Smile


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Lun 19 Juin - 14:19

parfaitement ! merci de prendre le temps de m'expliquer !



Spoiler:
 
Revenir en haut Aller en bas

Miettes

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Intervenante
Bons Points (BP) : 212

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 20 Juin - 9:25

Hello Smile

De rien ^^

Du coup, on continue avec ce js.

Code:
// Gestion quete à afficher
      $scope.lastQuete = 0;
      $scope.quetes.AfficherMasquerQuete = function( item ) {
        $scope.lastQuete = item;
        return $scope.lastQuete;
      };
Cette partie va nous être utile pour l'affichage. Dans le html (qu'on décryptera ensuite), on va renvoyer toutes les infos des quêtes. Ce bout de code aussi va permettre de :
1)
Code:
$scope.lastQuete = 0;
signaler que, par défaut (= à l'ouverture de la page), la dernière quête affichée est la première (n'oublie pas qu'en js, on commence à compter à partir de 0 Wink )

2)
Code:
$scope.quetes.AfficherMasquerQuete = function( item ) {
On crée une fonction qui recevra une valeur lorsqu'on l'appellera. Dans le html tu as ça :
Code:
data-ng-click="quetes.AfficherMasquerQuete(i)"
i correspond à l'id de la quête sur laquelle on a cliqué et dans le js, item va prendre la valeur de i. Mais on en reparlera ^^

3)
Code:
$scope.lastQuete = item;
On enregistre que la dernière quête affichée correspond à celle sur laquelle on vient de cliquer (item correspond à i, qui correspond à l'id de la quete)

4)
Code:
return $scope.lastQuete;
On renvoie l'id de la quete à afficher. Ici, on le met dans le $scope (= dans le contexte où l'on est) pour pouvoir se servir de cette valeur dans le html (ça sera plus clair quand on étudiera le html)

----

Est ce que c'est ok pour cette partie ? Smile Surtout, n'hésite pas à me poser des questions, même si tu penses qu'elles sont idiotes =) (aucune question n'est bête quand il s'agit de comprendre Smile )


Revenir en haut Aller en bas

Elilith

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:
Voir le profil de l'utilisateur
Inspectrice
Bons Points (BP) : 2773

MessageSujet: Re: [Codage]Menu déroulant en JS   Mar 20 Juin - 11:29

Salut ;foouu
huum ... je me demande juste à quoi ça sert de retourner $scope.lastQuete puisque c'est pas une variable créée dans la fonction elle devrait être accessible ailleurs non ? D'autant plus que on a déjà la variable item (celle qu'au moment de l'utilisation on envoie à la fonction) qui stocke la même valeur, non ? Du coup j'ai du mal à comprendre l'utilité d'avoir cette variable en autant de fois, à moins que j'ai complètement pas compris et que ce soit pas du tout la même chose xD !



Spoiler:
 
Revenir en haut Aller en bas

MessageSujet: Re: [Codage]Menu déroulant en JS   

Revenir en haut Aller en bas
[Codage]Menu déroulant en JS
Page 1 sur 2
Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» script Menu déroulant au survol du pseudo
» Menu déroulant couleur (besoin code html)
» Menu déroulant qui se replie après avoir été ouvert
» Problème installation du menu déroulant
» Menu déroulant vers le haut et non vers le bas
Réponse rapide

School of Progress :: La bibliothèque :: Besoin d'aide ?+