AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -45%
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre ...
Voir le deal
339 €

    [résolu]Plusieurs choix à sélectionner pour le bestiaire

    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Mer 21 Juin 2017 - 16:05

    Bonjour, bonjour !

    Je viens poster une demande, mais j'ignore si elle est possible :/

    J'ai donc utilisé le LS qui suit : https://www.never-utopia.com/t60723-bestiaire-et-herbier-avec-triage et qui fonctionne parfaitement ! Cependant, je me demandais s'il était possible de pouvoir sélectionner plusieurs "tags" ? Je montre l'exemple de mon bestiaire : http://kolmen-kirosi.forumactif.com/h1-bestiaire j'aimerais par exemple sélectionner les animaux qui vivent dans "montagne", mais aussi ceux de la catégorie "inoffensifs" pour avoir les animaux inoffensifs des montagnes, sauf qu'avec le code actuel c'est soit l'un, soit l'autre.
    Donc ma question est simple : est-il possible de modifier le code du LS pour pouvoir sélectionner plusieurs options (un de chaque catégorie par exemple) et non plus une seule à la fois ?

    Les codes sont exactement ceux du LS, j'ai juste rajouté un cadre autour et changé les couleurs, je ne les joins donc pas au sujet, mais si c'est nécessaire, n'hésitez pas à le dire !

    Merci d'avance :love: :hug:




    • Revenir en haut
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Dim 25 Juin 2017 - 10:48

    Bonjour,

    Si je ne me trompe pas, je peux remonter le sujet, donc je signale juste qu'il est toujours d'actualité ! Merci :love:




    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 28 Juin 2017 - 23:49

    Salut!

    Je précise que je ne prends pas la commande, je viens juste fouiner un peu.

    Si tu ne te débrouille pas mal en codage, il y aurait la possibilité d'adapter le code de la boutique interactive pour ton bestiaire.



    • Revenir en haut
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Jeu 29 Juin 2017 - 21:48

    Bonjour !

    Ah, merci de l'information ! Alors, je n'y connais vraiment rien en script (je sais juste utiliser correctement des onglets, mais guère plus XD), j'ai tout de même essayé de modifier mon bestiaire en me basant sur la boutique ! J'ai tenté de rajouter le Checked et les scripts qui me semblaient liés, mais ça ne fonctionne pas vraiment :ptdr: Du coup je vais voir si je dois tenter de modifier le script en lui-même, en essayant de ne pas tout casser au passage XD

    Je laisse tout de même ma demande ouverte au cas où une autre personne serait disponible, mais je te remercie de l'aide apportée (et du LS de base) :ninjahug:




    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 1 Juil 2017 - 18:25

    Salut!

    Essaies ceci et dis-moi si tu aimes ^^

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Onyx" />
      <title>Bestiaire</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
      <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville|UnifrakturCook|Pirata+One|Nunito' rel='stylesheet' type='text/css' />
      <style type="text/css">
        /*Corps*/
        body {
        margin: 0px;
        }
        .total{width:760px;
      margin-left: auto;
      margin-right: auto;}
        /*Le bloc entier du bestiaire*/
        #bestiaire {
        position: relative;
            padding-bottom: 10px;
            margin: auto;
            width: 661px;
            background-color: #DBDADA;
            font-size: 14px;
            font-family: 'Nunito', sans-serif;
            color: #000000;
        }
        /*Le bloc du titre du bestiaire*/
        #bestiaire_top {
        padding: 10px;
            font-size: 35px;
            font-family:'Pirata One', cursive;
            text-shadow:1px 1px #000!important;
            color:#BDA055!important;
            text-align: center;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom: 1px solid #747474;
        }
        /*Menu de gauche*/
        #menu {
        float: left;
            padding-top: 5px;
            width: 160px;
            height: 650px;
            margin-right: 10px;
            padding-left: 5px;
            border-right: 1px solid #747474;
        }
        /*Les boutons de tri*/
        #trier, #trier2 {
        display: block;
        margin: auto;
        }
        /*Titres des catégories*/
        .menu_title {
        display: block;
        text-align: left;
        margin: 0px 0px -5px 35px;
        color: #827A72;
        font-size: 20px;
        font-family: 'UnifrakturCook', cursive;
        text-shadow:1px 1px #000!important;
        }
        /*Liste des options des catégories*/
        #menu ul {
        margin-top: 5px;
        margin-bottom: 10px;
        list-style-type:none;
        }
        /*Option des catégories*/
        #menu ul li {
        margin-left: -30px;
        }
        /*Partie de droite*/
        #middle {
        width: 480px;
        overflow: auto;
        height: 550px;
        text-align: center;
        }
       
            /*Center les créatures*/
            .contenu_shoponglet > div {
            margin: auto;
            margin-bottom: 10px;
            }
            /*Nom de créature*/
            .creature_name {
            margin: auto;
            width: 440px;
            padding: 5px;
            border: 1px solid #827A72;
            background-color: #827A72;
            color: #BDA055;
            text-shadow: -1px -1px 1px #000000;
            font-size: 24px;
            font-family: 'Pirata One', cursive;
            }
            /*Bloc de créacture sous le nom*/
            .creature_bloc {
            margin: auto;
            position: relative;
            width: 450px;
            height: 150px;
            border-top: none;
            border: 1px solid #827A72;
            overflow: hidden;
            }
            /*Image de créature*/
            .creature_bloc > img:first-child {
            width: 450px;
            height: 150px;
            }
            /*Bloc de description de plante*/
            .creature_in {
            padding: 5px;
            background-color: #DBDADA;
            background-color: rgba(219, 218, 218, 0.7);
            position: absolute;
            top: -150px;
            left: 0px;
            width: 440px;
            height: 140px;
            transition: 0.5s;
            -webkit-transition: 0.5s;
            text-align: justify;
            font-size:11px;
            line-height:12px;font-family: 'Nunito', sans-serif;
            color: #000000;
            }
            /*Apparition de la description de créature*/
            .creature_bloc:hover .creature_in {
            top: 0px;
            }
            /*Partie de gauche de la description de créature*/
            .creature_caract {
            width: 160px;
            float: left;
            }
            /*Partie de droite de la description de créature*/
            .creature_desc {
            float: left;
            height: 140px;
            margin-left: 5px;
            margin-right: -5px;
            padding-right: 5px;
            width: 275px;
            float: left;
            overflow: auto;
            }
       
       
        /*Credit*/
        .credits {
        font-size: 12px;
        position: absolute;
        width: 200px;
        bottom: 2px;
        left: 2px;
        text-align: left;
        }
        a {
        text-decoration: none;
        color: #454545;
        }
        a:hover {
        color: #000000;
        }
      </style>
    </head>
    <body>
     
    <div class="total">     
    <!-- DÉBUT TABLEAU DU HAUT  -->

    <table width="100%"  border="0" cellspacing="0" cellpadding="0" align="center" height="105">
    <tbody><tr>

    <td width="179"><img src="https://img15.hostingpics.net/pics/950433Haut1b.png" width="179" height="105" alt="" /></td>
    <td align="center" background="https://img15.hostingpics.net/pics/805148Haut2b.png"><img src="" width="" height="" alt="" /></td>
    <td width="179"><img src="https://img15.hostingpics.net/pics/930601Haut3.png" width="179" height="105" alt="" /></td>
    </tr>
    </tbody></table>

    <!-- FIN TABLEAU DU HAUT -->

    <!-- DEBUT TABLEAU DU CENTRE -->

    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tbody>
    <tr>
    <td width="34" background="https://img15.hostingpics.net/pics/639157Centre1.png" style=" background-position: top left; repeat:y;"> </td>
    <td align="center" style="background-color:#dbdada;">
              <table><tr><td>
               
               
               
      <form enctype="multipart/form-data" name="post" method="post" action="/post" id="bestiaire" onsubmit="CompleteMessage()" target="_blank">
        <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
        <div id="bestiaire_top"><div id="badam"></div>
          Le bestiaire de <span class="FORUMNAME"></span>
        </div>

        <!-- DÉBUT DU MENU POUR TRIER -->
        <div id="menu">
          <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
          <button id="trier" type="button" onclick="triage()">Trier les Créatures</button><br />

          <!-- DÉBUT CATÉGORIE TYPE -->
          <span class="menu_title">Type</span>
          <ul id="Type">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Terrestre" />
              Terrestre
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Marin" />
              Marin
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Aérien" />
              Aérien
            </li>
          </ul>
          <!-- FIN CATÉGORIE TYPE -->

          <!-- DÉBUT CATÉGORIE HABITAT -->
          <span class="menu_title">Habitat</span>
          <ul id="Habitat">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Plaines" />
              Plaines
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Foret" />
              Forêt
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Montagne" />
              Montagne
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Glaciers" />
              Glaciers
            </li>
            <!-- OPTION #5 -->
            <li><input type="checkbox" name="Grottes" />
              Grottes
            </li>
            <!-- OPTION #6 -->
            <li><input type="checkbox" name="Oceans" />
              Océans et Mers
            </li>
            <!-- OPTION #7 -->
            <li><input type="checkbox" name="Lacs" />
              Lacs et Rivières
            </li>
          </ul>
          <!-- FIN CATÉGORIE HABITAT -->

          <!-- DÉBUT CATÉGORIE RARETÉ -->
          <span class="menu_title">Rareté</span>
          <ul id="Rarete">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Mythique" />
              Mythique
            </li>
          </ul>
          <!-- FIN CATÉGORIE RARETÉ -->
         
          <!-- DÉBUT CATÉGORIE DANGEROSITÉ -->
          <span class="menu_title">Dangerosité</span>
          <ul id="Dangerosite">
            <!-- OPTION #1 -->
            <li><input type="checkbox" name="Inoffensif" />
              Inoffensif
            </li>
            <!-- OPTION #2 -->
            <li><input type="checkbox" name="Faible" />
              Faible
            </li>
            <!-- OPTION #3 -->
            <li><input type="checkbox" name="Dangereux" />
              Dangereux
            </li>
            <!-- OPTION #4 -->
            <li><input type="checkbox" name="Mortel" />
              Mortel
            </li>
          </ul>
          <!-- FIN CATÉGORIE DANGEROSITÉ -->

        </div>
        <!-- FIN DU MENU POUR TRIER -->

        <div id="middle">
          <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

            <!-- DÉBUT ITEM -->
              <div class="Terrestre Plaines Commun Inoffensif">
                <div class="creature_name">Nom de l'animal</div>
                <div class="creature_bloc">
                  <img src="http://img15.hostingpics.net/pics/923631761.png" />
                  <div class="creature_in">
                    <div class="creature_caract">
                      <b>Type :</b> Terrestre<br />
                      <b>Habitat :</b> Jungle<br />
                      <b>Rareté :</b> Commun<br />
                      <b>Dangerosité :</b> Inoffensif<br />
                    </div>
                    <div class="creature_desc">
                      Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
                    </div>
                  </div>
                </div>
              </div>
            <!-- FIN ITEM -->

          </div>
          <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
          </div>
        </div>
        <div style="clear: both;"></div>
      </form>
               
               
               
               
                </td></tr></table>
    </td>
    <td width="34" background="https://img15.hostingpics.net/pics/696473Centre2.png" style=" background-position: top right; repeat:y;"> </td>
    </tr>
    </tbody>
    </table>

    <!-- FIN TABLEAU DU CENTRE -->

       
       
    <!-- DEBUT TABLEAU DU BAS -->

    <div style="margin-top:0px;"><table width="100%"  border="0" cellpadding="0" cellspacing="0" height="32" align="center">
    <tbody>
    <tr>
    <td width="49"><img src="https://img15.hostingpics.net/pics/438605Bas1.png" width="49" height="32" alt="" /></td>
    <td align="center" background="https://img15.hostingpics.net/pics/413277Bas2.png"><img src="" width="" height="30" alt="" /></td>
    <td width="53"><img src="https://img15.hostingpics.net/pics/137591Bas3.png" width="53" height="32" alt="" /></td>
    </tr>
    </tbody>
    </table></div>

    <!-- FIN TABLEAU DU BAS -->
       
    </div> 
             
    <script type="text/javascript">
      //<!--
      function notriage(){
        $('#menu').find('input:checked').prop( "checked", false );
        $('#contenu_shoponglet_Tout').css("display", "block");
        $('#contenu_shoponglet_Autre').html("");
      }
     
      /*Nombre de catégories*/
      var nbtype = $("#menu").find("ul").length;
     
      /*Fonction triage*/
      function triage() {
     
        /*On trouve le nombre de cases cochées*/
        var totalcheck = $('#menu').find('input:checked').length;
        /*On se débarasse des items déjà triés*/
        $('#contenu_shoponglet_Autre').html("");
     
        /*Si aucune case est cochée*/
        if (totalcheck < 1) {
          /*On garde tous les items*/
          $('#contenu_shoponglet_Tout').css("display", "block");
        }
        /*Sinon*/
        else {
          /*On fait disparaître la liste complète*/
          $('#contenu_shoponglet_Tout').css("display", "none");
          /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
          var nomtypech = [];
          /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
          for (i = 0; i < nbtype; i++) {
            var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
            if (nbcatcheckcal > 0) {
              var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
              nomtypech.push(nomtype);
            }
          }
          /*Nombre de catégories qui ont une case cochée*/
          var qunomtypech = nomtypech.length;
          /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
          var nbnomcatch = [];
          /*Tableau qui contient le name de chaque case cochée*/
          var nomcatch = [];
          for (i = 0; i < qunomtypech; i++) {
            /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
            nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
            for (y = 0; y < nbnomcatch[i]; y++) {
              /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
              var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
              nomcatch.push(truc1);
            }
          }
          /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
          var banane = 0;
     
          /*Pour chaque catégorie où il y a une case cochée...*/
          for (i = 0; i < qunomtypech; i++) {
            /*Si on est à la 1ère catégorie*/
            if (i < 1) {
              /*Pour chaque case cochée de la 1ère catégorie...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Si on est la première case cochée de la 1ère catégorie*/
                if (banane < 1) {
                  /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ses items on le met dans la partie de droite*/
                  for (z = 0; z < machin; z++) {
                    $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
                /*Si on est la xème case cochée de la 1ère catégorie*/
                else {
                  /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
                  var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
                  /*Pour chacun de ces items...*/
                  for (z = 0; z < machin; z++) {
                    /*Item que on est en train de regarder*/
                    var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                    /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                    var autretruc = 0;
                    /*Pour chaque name qui est avant le name que on regarde présentement...*/
                    for (w = 0; w < banane; w++) {
                      /*Name où on est rendu à vérifier*/
                      var pamplemousse = nomcatch[w];
                      /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                      if (bamibam.hasClass(pamplemousse)) {
                        /*on ajoute 1 à la variable autretruc*/
                        autretruc = autretruc + 1;
                      }
                    }
                    /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                    if (autretruc < 1) {
                    /*On ajoute le item à la zone de droite*/
                      bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                    }
                  }
                  /*On passe à la case suivante*/
                  banane = banane + 1;
                }
              }
            }
            /*Si on est pas la 1ère catégorie qui a une case cochée...*/
            else {
              /*On regarde le nombre de item dans la partie de droite*/
              var chose12 = $('#contenu_shoponglet_Autre').children().length;
              /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
              var calculenlever = [];
              /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
              for (z = 0; z < chose12; z++) {
                calculenlever[z] = 0;
              }
              /*Pour chaque case cochée de la catégorie où on est rendue...*/
              for (y = 0; y < nbnomcatch[i]; y++) {
                /*Pour chaque item qui est dans la liste de droite...*/
                for (z = 0; z < chose12; z++) {
                  /*On regarde le xème item de droite*/
                  var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
                  /*Name de la case où on est rendu*/
                  var tomate = nomcatch[banane];
                  /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
                  if (fraise.hasClass(tomate)) {
                    calculenlever[z] = calculenlever[z] + 1;
                  }
                }
                /*On passe à la case suivante*/
                banane = banane + 1;
              }
              /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
              for (y = 0; y < chose12; y++) {
                if (calculenlever[y] < 1) {
                  $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
                }
              }
              /*On détruit les items à droite qui ont la classe Detruire*/
              $('#contenu_shoponglet_Autre').children('.Detruire').remove();
            }
          }
          /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
          var kiwi = $('#contenu_shoponglet_Autre').children().length;
          if (kiwi < 1) {
            $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
          }
        }
      }
      //-->
    </script>
    </body>
    </html>



    • Revenir en haut
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Sam 1 Juil 2017 - 19:55

    Salut !

    Oh, c'est vraiment PAR-FAIT !
    C'est adorable de t'en être tout de même occupé, ça me fait vraiment super plaisir (et du coup je vois comment il fallait modifier XD). Merci mille fois, je ne sais pas comment je me débrouillerais sans ton aide et sans tes super LS ! C'est absolument parfait, c'est tout à fait ce que je voulais ! :hug:
    Encore une fois merci à toi, c'est super gentil d'avoir pris le temps de me bidouiller tout ça ! :hug2: :love:
    Personnalisation réglée grâce à Onyx, merci ! ♥




    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Mer 8 Mai 2024 - 11:05