AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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



25 résultats trouvés pour javascript

Offrande

Des Paillettes derrière le curseurs - Sam 12 Aoû 2017 - 0:24



Bonjour tout le monde,
Comme cela fait un petit moment que je n'ai pas posté de LS, alors je me lance avec un JS beaucoup demandé sur le net que j'ai trouvé sur internet :heart:

Pour un aperçus en live je vous propose de regarder sur mon forum : Aperçus ou cette petite vidéo

Vous pouvez changer sur ce JS la couleurs des paillettes ainsi que le nombre de celle-ci seulement.

Un petit message de remerciement est toujours le bienvenue :heart:


Le Code :

Créer un Nouveau JS > Sur toutes les pages

Code:
var colour = "#FFFFFF";  // couleur des étoiles
var sparkles = 300;  // nombre d'étoiles
 
 
var x = ox = 400;
var y = oy = 300;
var swide = 800;
var shigh = 600;
var sleft = sdown = 0;
var tiny = new Array;
var star = new Array;
var starv = new Array;
var starx = new Array;
var stary = new Array;
var tinyx = new Array;
var tinyy = new Array;
var tinyv = new Array;
window.onload = function() {
  if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i = 0;i < sparkles;i++) {
      var rats = createDiv(3, 3);
      rats.style.visibility = "hidden";
      document.body.appendChild(tiny[i] = rats);
      starv[i] = 0;
      tinyv[i] = 0;
      var rats = createDiv(5, 5);
      rats.style.backgroundColor = "transparent";
      rats.style.visibility = "hidden";
      var rlef = createDiv(1, 5);
      var rdow = createDiv(5, 1);
      rats.appendChild(rlef);
      rats.appendChild(rdow);
      rlef.style.top = "2px";
      rlef.style.left = "0px";
      rdow.style.top = "0px";
      rdow.style.left = "2px";
      document.body.appendChild(star[i] = rats);
    }
    set_width();
    sparkle();
  }
};
function sparkle() {
  var c;
  if (x != ox || y != oy) {
    ox = x;
    oy = y;
    for (c = 0;c < sparkles;c++) {
      if (!starv[c]) {
        star[c].style.left = (starx[c] = x) + "px";
        star[c].style.top = (stary[c] = y) + "px";
        star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
        star[c].style.visibility = "visible";
        starv[c] = 50;
        break;
      }
    }
  }
  for (c = 0;c < sparkles;c++) {
    if (starv[c]) {
      update_star(c);
    }
    if (tinyv[c]) {
      update_tiny(c);
    }
  }
  setTimeout("sparkle()", 40);
}
function update_star(i) {
  if (--starv[i] == 25) {
    star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
  }
  if (starv[i]) {
    stary[i] += 1 + Math.random() * 3;
    if (stary[i] < shigh + sdown) {
      star[i].style.top = stary[i] + "px";
      starx[i] += (i % 5 - 2) / 5;
      star[i].style.left = starx[i] + "px";
    } else {
      star[i].style.visibility = "hidden";
      starv[i] = 0;
      return;
    }
  } else {
    tinyv[i] = 50;
    tiny[i].style.top = (tinyy[i] = stary[i]) + "px";
    tiny[i].style.left = (tinyx[i] = starx[i]) + "px";
    tiny[i].style.width = "2px";
    tiny[i].style.height = "2px";
    star[i].style.visibility = "hidden";
    tiny[i].style.visibility = "visible";
  }
}
function update_tiny(i) {
  if (--tinyv[i] == 25) {
    tiny[i].style.width = "1px";
    tiny[i].style.height = "1px";
  }
  if (tinyv[i]) {
    tinyy[i] += 1 + Math.random() * 3;
    if (tinyy[i] < shigh + sdown) {
      tiny[i].style.top = tinyy[i] + "px";
      tinyx[i] += (i % 5 - 2) / 5;
      tiny[i].style.left = tinyx[i] + "px";
    } else {
      tiny[i].style.visibility = "hidden";
      tinyv[i] = 0;
      return;
    }
  } else {
    tiny[i].style.visibility = "hidden";
  }
}
document.onmousemove = mouse;
function mouse(e) {
  set_scroll();
  y = e ? e.pageY : event.y + sdown;
  x = e ? e.pageX : event.x + sleft;
}
function set_scroll() {
  if (typeof self.pageYOffset == "number") {
    sdown = self.pageYOffset;
    sleft = self.pageXOffset;
  } else {
    if (document.body.scrollTop || document.body.scrollLeft) {
      sdown = document.body.scrollTop;
      sleft = document.body.scrollLeft;
    } else {
      if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft = document.documentElement.scrollLeft;
        sdown = document.documentElement.scrollTop;
      } else {
        sdown = 0;
        sleft = 0;
      }
    }
  }
}
window.onresize = set_width;
function set_width() {
  if (typeof self.innerWidth == "number") {
    swide = self.innerWidth;
    shigh = self.innerHeight;
  } else {
    if (document.documentElement && document.documentElement.clientWidth) {
      swide = document.documentElement.clientWidth;
      shigh = document.documentElement.clientHeight;
    } else {
      if (document.body.clientWidth) {
        swide = document.body.clientWidth;
        shigh = document.body.clientHeight;
      }
    }
  }
}
function createDiv(height, width) {
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.height = height + "px";
  div.style.width = width + "px";
  div.style.overflow = "hidden";
  div.style.backgroundColor = colour;
  return div;
}
;

Message spécial au dessus du formulaire MP en fonction du destinataire - Mer 8 Fév 2017 - 23:31


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello <3

Parfois un (ou plusieurs) membres de votre staff sont absents, mais les membres leur envoient quand même des MP plein de détresse.
Les mises en garde en gras et rouge "Je suis absente, je vous conseille de vous adresser à un autre membre du staff" dans la signature ne suffisent pas toujours pour stopper les membres. (:face:)

Pour rajouter encore une petite couche, voici un système ajoutant un petit message au-dessus du formulaire, si l'un des destinataire est dans une liste d'absents que vous avez défini.

Exemple avec un petit message en bleu en haut

(on notera le message d'avertissement bien pourri. S'il vous plait, écrivez un joli message pour vos membres)

Le code est fait pour fonctionner quand le pseudo du destinataire est déjà écrit, pas quand le membre l'écrit lui-même. Cela peut se modifier, mais il s'agit là d'une version plus légère.


Vous pouvez bien entendu adapter ce code pour écrire un autre message que pour les absents, à vous de voir :)
De même, le code n'est pas figé. Il pourrait être personnalisé et aller chercher la liste des absents dans un sujet par exemple (ainsi plus de gens pourraient éditer la liste des absents)


Le code à rajouter



Pour apprendre comment gérer les codes Javascript sur forumactif : Gestion des codes Javascript

Panneau d'administration > Modules > HTML & Javascript > Gestion des codes javascript
Ajoutez un nouveau JS en cochant "Sur toutes les pages"
Code:
/*
 * Message prévenant de l'absence d'un membre lors de l'envoie d'un MP
 * version 1 (fevrier 2017)
 * Never Utopia
 */
$(function(){
    if (document.location.pathname !== "/privmsg") return;

    // phrase à modifier
    var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";

    // Pseudos des absents, séparés par un point virgule, exemple "Pseudo;Pseuuudo"
    var pseudos = "Pseudo";

    /* NE PAS MODIFIER EN DESSOUS */
    var arrPseudo = pseudos.toLowerCase().split(";");
    // On regarde s'il y a l'un des pseudos des absents dans les destinaires
    if ($('input[name="username[]"]').filter(function() { return arrPseudo.indexOf(this.value.toLowerCase()) > -1 }).length) {
        /* On ajoute le message*/
        $('form[action="/privmsg"]').before('<div class="avertissement-mp">' + message +'</div>');
    }
});


Pour styliser le bloc, il faudra rajouter du CSS.
Voici celui que j'utilise pour ma boite bleue :

Panneau d'administration > Affichage > Couleurs > Onglet "Feuille de Style CSS"
Code:
/* Message prévenant absence si MP */
.avertissement-mp {
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #1b7cad;
  color: white;
  border-radius: 3px;
}


Personnaliser



Pour changer la phrase, il vous faudra modifier cette ligne là :
Code:
var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";


Et le plus important, la liste des membres absents, se modifie ici :
Code:
var pseudos = "Pseudo";


S'il y a plusieurs pseudos, il faut les séparer avec un point virgule, exemple :
Code:
var pseudos = "Pseudo 1;Pseudo 2";

Note : attention à ne pas mettre des espaces en trop :)

Probablement personne ne va utiliser ça, mais j'avais envie de le sortir :siffle:

Vous pouvez demandez de l'aide dans "Personnalisation" pour faire une adaptation de ce code ou bien mettre un message dans "Problème avec mon code" pour recevoir de l'aide

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12




Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Le profil (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>




2. Mise en forme (CSS)


Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:

/*Bloc profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}




3. Créer les champs du 2e personnage (profil)


Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:




4. Faire fonctionner le système de double profil (Javascript)


Enfin, on passe au javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "http://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Sacha73

Galerie d'image en onclick - Ven 26 Aoû 2016 - 17:31


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello,

Voici une proposition de LS, je vous laisse le découvrir.

   
   
     
Galerie d'image avec effet onclick
Voici un moyen de rendre les galeries de vos membres beaucoup plus esthétiques, cette galerie est réalisée avec un effet onclick possédant 42 emplacements et réalisé de manière a évité un effet d'overflow.
Voir
Statique :: www
En action :: www




     Voici le code HTML à placer sur un sujet ::
Code:
<div id="Amispub-galerie">
    <div id="Amispub-galerietitre">Galerie de PSEUDO</div>
    <div id="Amispub-originale">
    <span>Titre de la photo 1</span>
    <div id="Amispub-miniimage"><ul id="Amispub-minigalerie"><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 2"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 2" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 3"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 3" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 4"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 4" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 5"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 5" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 6"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 6" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 7"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 7" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 8"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 8" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 9"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 9" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 10"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 10" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 11"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 11" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 12"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 12" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 13"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 13" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 14"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 14" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 15"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 15" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 16"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 16" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 17"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 17" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 18"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 18" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 19"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 19" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 20"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 20" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 21"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 21" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 22"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 22" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 23"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 23" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 24"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 24" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 25"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 25" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 26"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 26" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 27"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 27" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 28"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 28" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 29"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 29" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 30"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 30" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 31"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 31" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 32"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 32" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 33"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 33" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 34"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 34" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 35"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 35" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 36"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 36" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 37"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 37" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 38"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 38" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 39"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 39" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 40"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 40" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 41"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 41" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 42"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 42" /></a></li>
    </ul></div>
    <div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div></div>
    <div style="float: right; color: #990033; font-weight: bold; margin-right: 10px; margin-top: -10px;">Codage galerie image by Sacha <a TARGET="_blank" href="http://www.never-utopia.com/" style="background-color: #4682B4; color: #DAE6F0; font-weight: bold; text-decoration:none;">Never Utopia</a></div></div>


   Remarque :: Le code présenté ne se poste qu'une seule fois par page, si le code est posté une nouvelle fois sur la même page ou si vos sujets sont paramétrés avec un rappel de la première publication du sujet sur la page suivante, le code ne fonctionnera pas, il ne prendra qu'en compte le premier code de la page, le suivant code aura pour effet au clic d'afficher l'image sur l'onglet actif de votre navigateur plutôt que dans le cadre alloué à cet effet.

Il est donc, nécessaire de faire un espace galerie des membres avec une demande d'ouverture d'un sous-forum de la part de vos membres et ainsi pouvoir ouvrir des nouveaux sujets sur leur galerie. 


   Fonctionnement :: Chaque emplacement est réaliser de cette manière ::
Code:
<li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li>


   Comme vous le remarquerez, il y a donc sur chaque emplacement 2 URL, il vous faudra remplacer cette URL par la vôtre et ces deux fois par emplacement.

   Votre image se redimensionnera pour la miniature à 32X32PX quelle qu'en soit sa taille d'origine, ensuite, au clic, votre image se redimensionnera avec un max width et height de 500X300PX, pourquoi max, simplement que votre image gardera des proportions d'affichages correctes lors de son redimensionnement.

   Vous remarquerez également sur chaque emplacement, qu'il y a un title, celui-ci vous servira à mettre une description de votre image qui s'affichera sur l'emplacement au-dessous du titre de votre galerie, de même il y également alt qui vous permet de mettre un titre à votre image qui sert au passage de votre souris à afficher une infobulle contenant le titre de votre image.


   Vous avez également la possibilité de mettre une image par défaut, elle peut être la première image de votre galerie.
 Il s'agit de ceci :
Code:
<div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div>


   Il suffit juste de remplacer l'URL par l'URL de votre première image de votre galerie où une autre qui servira d'image par défaut à l'arrivée d'un membre sur votre galerie.


   Il est déconseillé de faire des sauts de ligne dans la structure HTML, sans quoi, vous risquez de fausser son paramétrage, n'oubliez pas, le code HTML est installé sur un sujet et non sur une page HTML !


   Le code CSS a placer :: Affichage -> Images et couleurs -> Couleurs -> Feuille de style ::

Code:
/* *********************Debut galerie image onclick by Sacha******************** */
    #Amispub-galerie {
    background: #dcdcdc;
    border: 6px solid #666;
    border-radius: 50px;
    padding: 15px;
    margin: 15px 30px;
    text-align: center;
    }
    #Amispub-galerietitre {
    background-color: #ccc;
    width: 450px;
    color: #404040;
    font-weight: bold;
    font-size: 40px;
    border-radius: 100px 30px/30px 100px;
    border: 6px solid #666;
    padding: 20px;
    margin: auto;
    }
    ul#Amispub-minigalerie {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    ul#Amispub-minigalerie li {
    float: left ;
    }
    ul#Amispub-minigalerie li a img {
    height: 32px;
    width: 32px;
    padding: 1.5px 1.5px 3px;
    font-size:0px
    }
    #Amispub-cadre {
    max-width: 500px;
    max-height: 300px;
    }
    #Amispub-originale {
    clear: both;
    margin: 0 auto;
    }
    #Amispub-originale span {
    color: #404040;
    font-family: Georgia,serif;
    font-size: 12px;
    font-weight: bold;
    display: block;
    background: #ccc;
    border: 6px solid #666;
    text-align: left;
    padding: 4px;
    min-height: 40px;
    }
    #Amispub-cadrage {
    background-color: #ccc;
    height: 300px;
    margin-left: 230px;
    padding: 5px;
    width: 500px;
    margin-top: -18px;
    border: 4px solid #666;
    }
    #Amispub-miniimage {
    background-color: #ccc;
    height: 300px;
    width: 210px;
    padding: 5px;
    border: 4px solid #666;
    float: left;
    overflow: auto;
    }
    #Amispub-originale img {
    margin: auto;
    }
    /* *********************Fin galerie image onclick by Sacha******************** */



   Le code JS a placer dans :: Module -> Codes Javascript -> Créer un nouveau Javascript -> Mettre un titre explicite -> Placer sur les sujets ::

Code:
function displayPics(){var photos=document.getElementById("Amispub-minigalerie");var liens=photos.getElementsByTagName("a");var big_photo=document.getElementById("Amispub-cadre");var titre_photo=document.getElementById("Amispub-originale").getElementsByTagName("span")[0];for(var i=0;i< liens.length;i++){liens[i].onclick= function(){big_photo.src= this.href;big_photo.alt= this.title;titre_photo.firstChild.nodeValue= this.title;return false}}}window.onload= displayPics;


     
Les codes ont été proposée par Sacha (Co Fondateur des Amis de la pub).
     Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

   


Sacha.

Onyx

Système de Boutique avec triage automatique - Lun 4 Juil 2016 - 6:56




Système de Boutique avec triage automatique


Salut !

Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).

La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier.

Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.

Pour voir la Boutique en direct : cliquez ici.
Pour voir l'aperçu de la Boutique en image : cliquez ici.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer la boutique dans une page HTML.
  • Ensuite, nous allons voir comment la personnaliser.
  • Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.


Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer la boutique (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</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' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    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: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*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 {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Panier invisible*/
    #panier {
    display: none;
    border: none;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*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>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" 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="boutique_top"><div id="badam"></div>
      La boutique 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 Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- 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="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

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

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

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
      <textarea id="panier"></textarea>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button><input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="total" id="total" style="display:none"></textarea>
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  $('#total').val(totalbase);
  var totaltotal = [];
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var total = qt*prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = qt+" "+nomitem+" à "+prix+"$ pour un total de "+total+"$<br />";
    totaltotal.push(total);
    var nbtotal = totaltotal.length;
    var vraitotal = 0;
    for (i = 0; i < nbtotal; i++) {
      vraitotal = vraitotal+totaltotal[i];
    }
    $('#total').val(vraitotal);
    $('#total2').html(vraitotal);
    if ($('#panier').val().length < 1) {
      $('#panier').val(phrase);
    }
    else {
      var ajoutphrase = $('#panier').val();
      ajoutphrase = ajoutphrase+phrase;
      $('#panier').val(ajoutphrase);
    }
    var machinchose = $('#panier').val();
    $('#vuepanier').html(machinchose);
  });
  function effacer() {
    $('#vuepanier').html("Votre panier est vide.");
    $('#panier').val("");
    var nbtotal = totaltotal.length;
    for (i = 0; i < nbtotal; i++) {
    totaltotal[i] = 0;
    $('#total').val(totalbase);
    $('#total2').html(totalbase);
    }
  }
  function CompleteMessage() {
      document.getElementById('message').value = "Bonjour,<br /><br /> J'aimerais acheter les articles suivants s'il vous plaît :<br /><br />" +
      document.getElementById('panier').value +
      "<br />Le coût total de ma commande est de : " +
      document.getElementById('total').value +
      "$.";
  }
  //-->
</script>
<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>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.

Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
Code:
   <input type="hidden" value="70" name="t" />


Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.




2e version de la Boutique:
Suite à un commentaire de Roz comme quoi ce serait bien de pouvoir modifier un peu plus les objets une fois qu'ils sont dans le panier, j'ai fait une nouvelle version qui donne cet aperçu juste ici.

Le code reste très semblable à l’exception du javascript alors la personnalisation sera la même avec les deux versions.

Voilà le code à mettre de la même façon que celui de la première version :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</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' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    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: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*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 {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
   
    /*Liens*/
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
   
    /*Bloc objet dans le panier*/
    .item_input {
    display: inline-block;
    margin-bottom: 5px;
    background-color: #cfcfcf;
    padding: 2px;
    width: 475px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .iteminsidepanier {
    margin-left: 5px;
    display: inline-block;
    text-align: left;
    }
    /*Les boutons dans le panier*/
    .item_input button {
    }
    /*Le bouton supprimer de l'objet dans le panier*/
    .button_delete {
    margin-right: 2px;
    display: inline-block;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    margin: 0px 2px 0px 2px;
    display: inline-block;
    padding: 2px;
    border: 1px solid #a3a3a3;
    background: #efefef;
    width: 45px;
    text-align: center;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" 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="boutique_top"><div id="badam"></div>
      La boutique 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 Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- 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="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

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

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

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
    <input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  var totaltotal = 0;
 
  /*Quand on ajoute un item au panier*/
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var qtprixcalculation = qt * prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = "<span class='item_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
      "<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$ pour un total de" +
      " <span class='thetotalinside'>"+qtprixcalculation+"</span>$.</span>";
    if ($('#vuepanier').html() == "Mon panier est vide.") {
      $('#vuepanier').html(phrase);
    }
    else {
      var ajoutphrase = $('#vuepanier').html();
      ajoutphrase = ajoutphrase+phrase;
      $('#vuepanier').html(ajoutphrase);
    }
    calcultotal();
  });
 
  /*Ajouter un item déjà dans le panier*/
  function addqtitem(bihihi) {
    var curritem = parseInt($(bihihi).prev().val());
    var curritemafter = curritem + 1;
    $(bihihi).prev().val(curritemafter);
    calcultotal();
  }
 
  /*Enlever un item déjà dans le panier*/
  function removeqtitem(bohoho) {
    var curratem = parseInt($(bohoho).next().val());
    var curratemafter = curratem - 1;
    $(bohoho).next().val(curratemafter);
    calcultotal();
  }
 
  /*Supprimer un item déjà dans le panier*/
  function deleteqtitem(bahaha) {
    $(bahaha).parent().remove();
    calcultotal();
  }
 
  /*Fonction pour calculer*/
  function calcultotal() {
    totaltotal = 0;
    $('.item_input').each(function(){
      if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
        $(this).remove();
      }
      var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var otherquant = parseInt($(this).find('.input_nb_object:first').val());
      $(this).find('.thetotalinside:first').html((otherprix*otherquant));
      totaltotal = totaltotal + (otherprix*otherquant);
    });
    if ($('#vuepanier').html().length < 1) {
      $('#vuepanier').html("Mon panier est vide.");
      $('#total2').html(totalbase);
    }
    else {
      $('#total2').html(totaltotal);
    }
  }
 
  /*Fonction pour effacer le panier*/
  function effacer() {
    $('#vuepanier').html("Mon panier est vide.");
    $('#total2').html(totalbase);
  }
 
  /*Fonction pour poster le message*/
  function CompleteMessage() {
    var thetotalprice = totaltotal;
    var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.item_input').each(function(){
      var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var thesupername = $(this).find('.thename:first').html();
      var thequant = parseInt($(this).find('.input_nb_object:first').val());
      var thequantpricetotal = thequant * theprice;
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$ pour un total de "+thequantpricetotal+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<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>




2. Personnaliser la boutique


Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier. Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.


Voilà un exemple de 1 catégorie avec 4 options :
Code:
      <!-- 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="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options. La liste (le ul) a un id qui sert à indiquer quel est la catégorie. Chaque catégorie doit avoir un id différent des autres catégories.

Ensuite, chaque option est sous cette forme :
Code:
        <!-- OPTION # -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>


Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".

Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'item qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.

Donc si je résume rapidement, chaque catégorie à son propre "id" qui est unique à cette catégorie et qui ne doit pas se répéter ailleurs.
Ensuite, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.




Ensuie, on passe à la section où il y a tous les items (contenu d'onlglet "Tout"). Vous y trouverez des items sous cette forme :
Code:
        <!-- DÉBUT ITEM -->
       <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
<div class="Arme Max99 Commun Niv1">


Ces classes correspondent aux options auxquelles l'item appartient. Du coup, quand vous créez votre item, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'item appartient et vous le mettez dans la classe de l'item.

Un item peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.

Ici, j'ai 4 classes parce que l'item appartient à 4 options, soit Arme, Max99, Commun et Niv1. Cela fait que l'item appartient à ces options : Arme, Niveau 1, Moins de 100$ et Commun.

Vous pouvez changez l'image de l'item en mettant le lien de votre image dans "URL DE ITEM".
Vous pouvez également changer le nom de l'item et ses attibuts (Type, niveau, rareté).
Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'item.




Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les items Wink



3. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



4. Mettre la boutique dans un iframe


Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 1000px; width: 700px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Bestiaire et Herbier avec triage - Lun 4 Juil 2016 - 6:55




Bestiaire et Herbier avec triage


Salut !

Suite à la demande de Myosotis (qui s'était inspiré de ce bestiaire et cet herbier faits par Kamuy Sinen), j'ai fait un bestiaire et un herbier. Pour ceux qui ne le savent pas, un herbier est un recueil des végétaux d'un certain territoire. Quant au bestiaire, il s'agit d'un recueil des animaux/créatures d'un territoire.

Pour voir l'aperçu du Bestiaire : cliquez ici.
Pour voir l'aperçu de l'Herbier : cliquez ici.

Effet spécial 1
Quand on clique sur une catégorie, les animaux/végétaux sont triés et seuls ceux de la catégorie que vous avez sélectionnée apparaîssent. Vous pouvez personnaliser le code pour mettre les catégories que vous souhaitez.

Effet spécial 2
Si vous avez trop d'options dans le menu, vous pouvez rajouter un petit script qui vous permettra de réduire les menus et de les ouvrir en cliquant dessus pour qu'ils prennent moins de place.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le bestiaire/herbier dans une page HTML.
  • Ensuite, nous allons voir comment le personnaliser.
  • Puis, nous allons voir comment ajouter l'option pour que les menus soient réduits.
  • Enfin, nous allons mettre le bestiaire/herbier dans un iframe pour le rendre accessible.


Laisser le crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Créer le bestiaire/herbier (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre bestiaire/herbier.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Pour le bestiaire, on met le code suivant et on enregistre :
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=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://wallpaperlayer.com/img/2015/5/simple-brown-background-8083-8397-hd-wallpapers.jpg');
    background-size: cover;
    }
    /*Le bloc entier du bestiaire*/
    #bestiaire {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/405891bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #705733;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #705733;
    color: #705733;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .bestonglet {
    margin-left: -20px;
    color: #705733;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .bestonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .bestonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .bestonglet_1 {
    margin-left: -10px;
    color: #2b2010;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_bestonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #705733;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de créature*/
    .creature_name {
    margin: auto;
    color: #a68e68;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de créacture sous le nom*/
    .creature_bloc {
    margin: auto;
    }
    /*Image de créature*/
    .creature_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #705733;
    height: 150px;
    }
    /*Bloc de description de créature*/
    .creature_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la créature*/
    .creature_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de créature*/
    .creature_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #503713;
    }
    a {
    text-decoration: none;
    color: #503713;
    }
    a:hover {
    color: darkred;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_bestonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_bestonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_bestonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_bestonglet(name) {
        document.getElementById('bestonglet_'+anc_bestonglet).className = 'bestonglet_0 bestonglet';
        document.getElementById('bestonglet_'+name).className = 'bestonglet_1 bestonglet';
        document.getElementById('contenu_bestonglet_'+anc_bestonglet).style.display = 'none';
        document.getElementById('contenu_bestonglet_'+name).style.display = 'block';
        anc_bestonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="bestiaire">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Type<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_1 bestonglet" id="bestonglet_Tout" onclick="javascript:change_bestonglet('Tout');">
            <span class="Tout">Tous les types</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mammi" onclick="javascript:change_bestonglet('Mammi');">
            <span class="Mammi">Mammifères</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Oiseaux" onclick="javascript:change_bestonglet('Oiseaux');">
            <span class="Oiseaux">Oiseaux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Poissons" onclick="javascript:change_bestonglet('Poissons');">
            <span class="Poissons">Poissons</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Reptiles" onclick="javascript:change_bestonglet('Reptiles');">
            <span class="Reptiles">Reptiles</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Amphibiens" onclick="javascript:change_bestonglet('Amphibiens');">
            <span class="Amphibiens">Amphibiens</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Insectes" onclick="javascript:change_bestonglet('Insectes');">
            <span class="Insectes">Insectes et Arachnides</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Jungle" onclick="javascript:change_bestonglet('Jungle');">
            <span class="Jungle">Jungle</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Plaines" onclick="javascript:change_bestonglet('Plaines');">
            <span class="Plaines">Plaines</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Foret" onclick="javascript:change_bestonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Montagne" onclick="javascript:change_bestonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Glace" onclick="javascript:change_bestonglet('Glace');">
            <span class="Glace">Glaciers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Desert" onclick="javascript:change_bestonglet('Desert');">
            <span class="Desert">Désert</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Volcan" onclick="javascript:change_bestonglet('Volcan');">
            <span class="Volcan">Volcan</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ocean" onclick="javascript:change_bestonglet('Ocean');">
            <span class="Ocean">Océans et Mers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Lac" onclick="javascript:change_bestonglet('Lac');">
            <span class="Lac">Lacs et Rivières</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>

      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Dangerosité<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ino" onclick="javascript:change_bestonglet('Ino');">
            <span class="Ino">Inoffensif</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Faible" onclick="javascript:change_bestonglet('Faible');">
            <span class="Faible">Faible</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Danger" onclick="javascript:change_bestonglet('Danger');">
            <span class="Danger">Dangereux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mortel" onclick="javascript:change_bestonglet('Mortel');">
            <span class="Mortel">Mortel</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->

      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tout">
       
      <!-- DÉBUT 1ER ANIMAL -->
        <div class="Mammi Jungle Commun Ino">
          <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">
                Mammifère - Jungle - Commun - Inoffensif
              </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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ER ANIMAL -->
       
        <!-- DÉBUT 2E ANIMAL -->
        <div class="Mammi Plaines Rare Faible">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/169146302.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Plaines - Rare - Faible
              </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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E ANIMAL -->

        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->

      </div>

      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_bestonglet = 'Tout';
    change_bestonglet(anc_bestonglet);
  //-->
</script>
</body>
</html>


Pour l'herbier, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Herbier</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=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://img11.hostingpics.net/pics/782158bla.jpg');
    background-size: cover;
    }
    /*Le bloc entier du herbier*/
    #herbier {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/740116bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #0f5228;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #0f5228;
    color: #0f5228;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .herbonglet {
    margin-left: -20px;
    color: #0f5228;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .herbonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .herbonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .herbonglet_1 {
    margin-left: -10px;
    color: #093319;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_herbonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #0f5228;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de la plante*/
    .plante_name {
    margin: auto;
    color: #4e9f4c;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de la plante sous le nom*/
    .plante_bloc {
    margin: auto;
    }
    /*Image de plante*/
    .plante_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #0f5228;
    height: 150px;
    }
    /*Bloc de description de la plante*/
    .plante_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la plante*/
    .plante_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de la plante*/
    .plante_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #0f5228;
    }
    a {
    text-decoration: none;
    color: #0f5228;
    }
    a:hover {
    color: #198842;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_herbonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_herbonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_herbonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_herbonglet(name) {
        document.getElementById('herbonglet_'+anc_herbonglet).className = 'herbonglet_0 herbonglet';
        document.getElementById('herbonglet_'+name).className = 'herbonglet_1 herbonglet';
        document.getElementById('contenu_herbonglet_'+anc_herbonglet).style.display = 'none';
        document.getElementById('contenu_herbonglet_'+name).style.display = 'block';
        anc_herbonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="herbier">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Usage<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_1 herbonglet" id="herbonglet_Tout" onclick="javascript:change_herbonglet('Tout');">
            <span class="Tout">Tous</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Alimentaire" onclick="javascript:change_herbonglet('Alimentaire');">
            <span class="Alimentaire">Pour nourrir</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Medecine" onclick="javascript:change_herbonglet('Medecine');">
            <span class="Medecine">Pour soigner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Poison" onclick="javascript:change_herbonglet('Poison');">
            <span class="Poison">Pour empoisonner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Outil" onclick="javascript:change_herbonglet('Outil');">
            <span class="Outil">Pour fabriquer</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Joli" onclick="javascript:change_herbonglet('Joli');">
            <span class="Joli">Pour décorer</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Floraison<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Printemps" onclick="javascript:change_herbonglet('Printemps');">
            <span class="Printemps">Printemps</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Ete" onclick="javascript:change_herbonglet('Ete');">
            <span class="Ete">Été</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Automne" onclick="javascript:change_herbonglet('Automne');">
            <span class="Automne">Automne</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Hiver" onclick="javascript:change_herbonglet('Hiver');">
            <span class="Hiver">Hiver</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Annuel" onclick="javascript:change_herbonglet('Annuel');">
            <span class="Annuel">Toute l'année</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>
     
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Sub" onclick="javascript:change_herbonglet('Sub');">
            <span class="Sub">Sub-Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tropical" onclick="javascript:change_herbonglet('Tropical');">
            <span class="Tropical">Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Foret" onclick="javascript:change_herbonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Montagne" onclick="javascript:change_herbonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Commun" onclick="javascript:change_herbonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Rare" onclick="javascript:change_herbonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tresrare" onclick="javascript:change_herbonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->
      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tout">
       
      <!-- DÉBUT 1ERE PLANTE -->
        <div class="Alimentaire Ete Foret Commun">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.onlinetransilvania.ro/wp-content/uploads/2014/03/IMG_9857-1300x866-450x150-croped.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour nourrir - Éte - Forêt - Commun
              </div>
              <div class="plante_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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ERE PLANTE -->
       
        <!-- DÉBUT 2E PLANTE -->
        <div class="Poison Printemps Foret Tresrare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.sylvie-tribut-astrologue.com/wp-content/uploads/2015/09/12-LE-PISSENLIT.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour empoisonner - Printemps<br />Forêt - Très rare
              </div>
              <div class="plante_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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E PLANTE -->

        <!-- DÉBUT 3E PLANTE -->
        <div class="Medecine Hiver Montagne Rare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://victorianviolas.co.uk/wp-content/uploads/2015/10/parade-closeup-450x150.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour soigner - Hiver - Montagne - Rare
              </div>
              <div class="plante_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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E PLANTE -->

      </div>
     
      <div class="contenu_herbonglet" id="contenu_herbonglet_Alimentaire"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Medecine"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Poison"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Outil"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Joli"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Printemps"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Ete"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Automne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Hiver"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Annuel"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Sub"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tropical"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Foret"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Montagne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Commun"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Rare"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tresrare"></div>
     
    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_herbonglet = 'Tout';
    change_herbonglet(anc_herbonglet);
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



2. Personnaliser le bestiaire/herbier


Il y a plusieurs parties au code. Il y a la section "menu" avec des catégories et des onglets où il y a des sous-catégories. Puis, il y a la section "contenu d'onglet" de "Tout" où il y a tous les végétaux/animaux. Enfin, il y a la section "contenu d'onglets" des sous-catégories dans lesquels les végétaux/animaux sont triés.

Le menu et divisé en plusieurs carégories et sous-catégories.

Voici un exemple du bestiaire de 1 catégorie qui a 4 sous-catégories :
Code:
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les sous-catégories.

Chaque sous-catégorie est sous cette forme :
Code:
        <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
          <span class="Myth">Mythique</span>
        </li>


À noter qu'il y a 3 endroits dans cette sous-catégorie où vous trouvez le mot "Myth", soit dans le "id" du "li", dans les parenthèses du "onclick" du "li"dans dans la "class" du "span" qui entoure le nom de la catégorie.

Ce mot, "Myth", permet d'identifier cette sous-catégorie et permettra aussi d'identifier l'animal qui y appartiendra alors c'est important qu'il soit pareil aux 3 endroits.




Ensuie, on passe à la section où il y a tous les animaux (contenu d'onlglet "Tout"). Vous y trouverez des animaux sous cette forme :
Code:
        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </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.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
        <div class="Oiseaux Foret Tresrare Danger">


Ces classes correspondent aux sous-catégories auxquelles l'animal appartient. Du coup, quand vous créez votre animal, vous devez vous rendre dans les sous-catégories et regarder quel "mot" vous avez mis pour identifier les sous-catégories auxquelles l'animal contient et vous le mettez dans la classe de l'animal.

Ici, j'ai 4 classes parce que l'animal appartient à 4 sous-catégories, soit Oiseaux, Forêt, Très rare et Dangereux.




Enfin, vous avez les contenus d'onglets vides où les animaux seront distribués selon les sous-catégories auxquelles ils appartiennent :
Code:
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>


Encore une fois, à la fin du "id" de chaque contenu d'onglet, vous avez le "nom" propre à chaque sous-catégorie.

Donc si je résume, vous devez choisir un certain "nom" (qui ne doit pas avoir d'espaces ou d'accents idéalement) qui doit être à 3 fois dans l'onglet de la sous-catégorie, 1 fois dans la classe des animaux qui appartiennent à la sous-catégorie et 1 fois dans l'id dans un contenu d'onglet où seront triés les animaux.

Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même Wink

Note : J'ai pris des exemples avec le bestiaire, sauf que l'herbier est identique à l'exception du nom de certaines classes. Du coup, vous devriez être capable de vous débrouiller ^^



3. Option pour réduire les menus


Il suffit simplement d'aller juste avant la fermeture de la balise "body", soit juste avant cela :
Code:
</body>
</html>


Et d'y rajouter ce bout de code :
Code:
<script text="javascript">
  //<!--
    $('.menus').find('img').css("display", "inline-block");
    $('.menus').find('img').css("margin-left", "5px");
    $('.menus').css("cursor", "pointer");
    $('.menus').next().css("max-height", "0px");
    $('.menus').click(function(){
      $('.menus').css("cursor", "pointer");
      $('.menus').next().css("max-height", "0px");
      var bam = $(this).next().find('li').length;
      var boum = (bam * 28) * 45;
      $(this).next().css("max-height", boum+"px");
      $(this).css("cursor", "default");
     });
  //-->
</script>




4. Mettre le bestiaire/herbier dans un iframe


Maintenant que la page HTML est créée avec le bestiaire/herbier, il faut le mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le bestiaire/herbier soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 600px; width: 885px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre bestiaire/herbier), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Vous aurez peut-être besoin de modifier le height (la hauteur) et le width (la largeur) pour qu'il n'y a pas de barre de défilement (scroll).





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Formulaire de présentation - Sam 2 Juil 2016 - 5:49




Formulaire de présentation


Salut !

Fournir une fiche de présentation aux membres pour qu'ils puissent poster une belle présentation est une excellente idée. Sauf que parfois, certains membres ont de la difficulté à remplir la fiche de présentation parce qu'ils ont de la difficulté avec le codage.

Du coup, ce formulaire permettra à vos membres de simplement remplir les champs du formulaire et les entrées se mettront automatiquement au bon endroit dans une fiche. Pas mal, n'est-ce pas ?

Pour voir l'aperçu du formulaire de présentation en direct : cliquez ici.
Pour voir l'aperçu du formulaire de présentation en image : cliquez ici.
Pour voir l'aperçu de la fiche de présentation en image : cliquez ici.


Attention :
Évidemment, vous aurez probablement plus de champs à faire remplir que moi ou peut-être s'appelleront-ils différemment. Du coup, vous voudrez sans doute personnaliser votre code. Pour savoir comment faire, je vous envoie sur ce tutoriel afin de comprendre les formulaires et les différentes étapes (la construction des champs et la récupération des données du formulaire).


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le formulaire dans une page HTML.
  • Ensuite, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Puis, nous allons ajouter le CSS pour la fiche de présentation.
  • Enfin, nous allons ajouter une iframe pour que les membres puissent remplir le formulaire.


Laisser les crédits vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^



1. Créer le formulaire (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre formulaire.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque, comme "Formulaire de présentation".
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <title>Formulaire de Présentation</title>
    <style type="text/css">
      /*Corps*/
      body {
      margin: 0px;
      color: #757575;
      font-family: 'Verdana';
      font-size: 13px;
      }
      /*Formulaire*/
      #monId {
      background-color: #dfdfdf;
      box-shadow: inset 0px 0px 15px #656565;
      margin: auto;
      border-radius: 10px;
      width: 500px;
      padding: 15px;
      }
      /*Titres*/
      h1, h2, h3 {
      color: #757575;
      text-align: center;
      font-family: 'Monotype Corsiva', cursive;
      font-size: 32px;
      font-weight: normal;
      }
      /*Petit titre*/
      h2 {
      font-size: 24px;
      }
      /*Champs text, number, password, textarea et select*/
      input[type="text"], input[type="number"], input[type="password"], textarea, select {
      display: inline-bloc;
      width: 97%;
      margin-top: 3px;
      background-color: #efefef;
      color: #858585;
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
      font-size: 13px;
      font-family: 'Arial';
      }
      /*Champs radio*/
      input[type="radio"] {
      display: inline-bloc;
      margin-top: 3px;
      vertical-align: bottom;
      }
      /*Champs submit et reset*/
      input[type="submit"], input[type="reset"] {
      margin-top: 10px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      background-color: #fdfdfd;
      border: 1px solid #c4c4c4;
      color: #757575;
      padding: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
      }
      /*Champs submit et reset au survol*/
      input[type="submit"]:hover, input[type="reset"]:hover {
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
      color: #656565;
      }
      /*Champs reset et prévisualiser*/
      input[type="reset"], input[name="preview"] {
      margin-top: 0px;
      margin-right: 10px;
      font-weight: normal;
      }
      /*Champs textarea*/
      textarea {
      min-width: 97%;
      max-width: 97%;
      min-height: 100px;
      }
      /*Astérisques rouges*/
      .redd {
      color: red;
      }
      /*Crédits*/
      .credits {
      margin: 10px auto -10px auto;
      font-size: 11px;
      text-align: center;
      }
      .credits a {
      color: darkgreen;
      text-decoration: none;
      }
      .credits a:hover {
      color: blue;
      }
    </style>
    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {   
           
        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
          "<div class='prez'>" +
          "<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
          "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
          "<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
          "<div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
          "<div class='prez_right'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
          "<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
          "<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
          "<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
          "<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
          "<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
          "<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
          "Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
          "Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.value + "</div><div class='prez_title'>" +
          "Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
          "Informations sur le joueur</div><div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
          "<div class='prez_right2'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
          "<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
          "<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
          "<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</div><div style='clear: both;'></div></div>" +
          "<div class='prez_credit'>Par <a href='http://www.never-utopia.com/u27' target='_blank'>Onyx</a> de <a href='http://www.never-utopia.com' target='_blank'>Never-Utopia</a>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</div></div></div>";

        /*On vérifie si on peut ou non envoyer le message*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");
        var totalchampsobligatoires = 0;
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }
        if (totalchampsobligatoires < champsobligatoires.length) {
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }
        else {
          return true;
        }
      }
    //-->
    </script>
  </head>
  <body>
    <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de Présentation</h1>
      <h2>Informations sur le personnage</h2>
      <label for="prenom">Prénom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
      <br />
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="nom" id="nom" /><br />
      <br />
      <label for="surnom">Surnom :</label><br />
      <input type="text" name="surnom" id="surnom" /><br />
      <br />
      <label for="age">Âge<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="age" id="age" /><br />
      <br />
      <label for="group">Groupe<span class="redd">*</span> :</label><br />
      <select name="group" id="group">
        <option>Premier</option>
        <option>Deuxième</option>
        <option>Troisième</option>
        <option>Quatrième</option>
        <option>Etc.</option>
      </select><br />
      <br />
      <label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
      <br />
      <label for="aime">Aime<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="aime" id="aime" /><br />
      <br />
      <label for="deteste">Déteste<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
      <br />
      <h2>Descriptions du personnage</h2>
      <label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
      <br />
      <br />
      <label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
      <br />
      <br />
      <label for="hist">Histoire<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="hist" id="hist"></textarea><br />
      <br />
      <br />
      <h2>Informations sur le joueur</h2>
      <label for="nomhrp">Prénom :</label><br />
      <input type="text" name="nomhrp" id="nomhrp" /><br />
      <br />
      <label for="agehrp">Âge :</label><br />
      <input type="text" name="agehrp" id="agehrp" /><br />
      <br />
      <label for="connu">Comment avez-vous connu le forum<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="connu" id="connu" /><br />
      <br />
      <label for="avis">Votre avis sur le forum ?</label><br />
      <textarea name="avis" id="avis"></textarea><br />
      <br />
      <label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="secret" id="secret" /><br />
      <br />
      <h2>Personnaliser la mise en page</h2>
      <label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
      <input type="text" name="urlimghaut" id="urlimghaut" value="http://img15.hostingpics.net/pics/959085haut.jpg" /><br />
      <br />
      <label for="citation">Petite citation :</label><br />
      <input type="text" name="citation" id="citation" value="Petite citation" /><br />
      <br />
      <label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
      <input type="text" name="urlimgava" id="urlimgava" value="http://img15.hostingpics.net/pics/485538middle.jpg" /><br />
      <br />
      <label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
      <input type="text" name="urlimgbas" id="urlimgbas" value="http://img15.hostingpics.net/pics/858946bas.jpg" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="preview" value="Prévisualiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
      <div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
    </form>
  </body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devez vous rendre, sur votre forum, dans le forum ou sous-forum où les gens pourront passer poster leur présentation. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/f" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce forum.

Vous devez copier ce nombre et venir remplace le 10 à cet endroit :
Code:
  <input type="hidden" name="f" value="10" />


Cela va permettre que la présentation des utilisateurs du formulaire soit postée au bon endroit.



2. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



3. Mise en forme de la fiche de présentation (CSS)


Si quelqu'un postait une fiche avec le formulaire, vous verriez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme la fiche de présentation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de la présentation*/
.prez {
  background-color: #202020;
  box-shadow: 5px 5px 3px #555555;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 8px;
  width: 500px;
  color: #959595;
  padding-bottom: 10px;
  font-family: 'Verdana';
  font-size: 12px;
}
/*Image du haut de la présentation*/
.prez_haut {
  display: inline-block;
  width: 500px;
  height: 200px;
  border-bottom: 40px solid #050505;
}
/*Nom de la présentation*/
.prez_nom {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: #202020;
  text-shadow: -2px -2px 1px white;
  width: 100%;
  text-align: center;
  margin-top: -60px;
  margin-bottom: 15px;
}
/*Petite citation de la présentation*/
.prez_citation {
  width: 100%;
  text-align: center;
  color: #747474;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
/*Blocs de la présentation*/
.prez_bloc {
  background-color: #353535;
  border: 3px solid #101010;
  padding: 10px;
  margin: 0px 10px 0px 10px;
}
/*Autres images de la présentation*/
.prez_ava, .prez_bas {
  display: inline-block;
  width: 200px;
  height: 320px;
  float: left;
  border: #000000 1px dotted;
}
/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
  display: inline-block;
  margin-left: 5px;
  float: left;
  width: 240px;
}
/*Champs de la présentation*/
.prez_champ {
  color: #dfdfdf;
}
/*Sous-titres de la présentation*/
.prez_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 5px;
  font-size: 16px;
  background: #000000;
  color: #959595;
  border-top: 2px solid #353535;
  
  margin: 15px 0px 5px 0px;
}
/*Images du bas de la présentation*/
.prez_bas {
  width: 100px;
  height: 100px;
}
/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
  width: 340px;
}
/*Crédits*/
.prez_credit {
  margin: 5px auto -10px auto;
  font-size: 10px;
  text-align: center;
}




4. Ajouter l'iframe du formulaire


Maintenant que la page HTML est créée avec le formulaire, que les formulaires ont été autorisé et que le CSS pour la fiche de présentation est installé, il faut mettre le formulaire accessible aux membres.

Pour cela, vous pouvez, soit mettre le lien vers le formulaire à quelque part sur votre forum, soit le poster dans une iframe dans un message et les membres vont le remplir directement là.

Pour la 2e option, vous devez vous rendre là où vous voulez que le formulaire soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 2100px; width: 550px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez de l'aide pour personnaliser le formulaire ou la fiche de présentation.

À plus !

Comment faire un formulaire (de présentation, de partenariat, etc.) - Mar 14 Juin 2016 - 5:13



Comment faire un formulaire 1/2



Bonjour !

Alors une des demandes fréquentes dans la section des demandes de codes est celle du fameux "formulaire". Un formulaire pour passer une commande, un formulaire pour poster une présentation, un formulaire pour les demandes de partenariats, etc.

Ce tutorial vous montrera comment créer le formulaire de votre choix par vous-même. On y verra aussi comment mettre des champs obligatoires, comment gérer les différents types de champs à remplir et comment personnaliser le résultat du formulaire.

Voici un petit exemple du type de résultat qu'on peut obtenir :
http://forum-test-onyx5.forum-canada.com/h9-formulaire-de-bouffe

Et un autre exemple d'un formulaire de présentation :
http://www.never-utopia.com/t60709-formulaire-de-presentation

Durant ce tutoriel, je ferai référence à quelques reprises au premier exemple.

À noter que puisque la majorité des membres s'intéressent plus à l'application d'un formulaire dans le cadre de forumactif, le tutoriel fera de même.
Vous pouvez quand même utiliser la plupart des notions apprises ici à l'extérieur de forumactif. Cependant, ce tutoriel ne traite pas du traitement PHP qui est nécessaire dans la majorité des cas si vous avez votre propre.


Étape 1 - Squelette du formulaire



Étape 1.1 - Juste le formulaire


La première étape, afin de créer un formulaire, c'est de se créer une page HTML dans lequel nous allons mettre le squelette du formulaire.

Pour ceux qui n'ont jamais utlisé une page HTML, voici un petit tuto sur les pages HTML fait par Nyo :
http://www.never-utopia.com/t50282-creer-une-page-html-pour-fiche-de-pub-formulaires-etc


Bref, vous créez une page HTML (en mode avancé, pas le mode simple) et vous y mettez la base de toute page HTML :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Auteur" />
    <title>Titre de la Page</title>

    <style type="text/css">
      /* Ici le CSS! */
    </style>

    <script type="text/javascript">
    //<!--
      /* Ici le Javascript */
    //-->
    </script>

  </head>
  <body>
    <!-- Ici le HTML! -->
  </body>
</html>


C'est le temps d'enregistrez votre page html pour la première fois.




Nous allons maintenant créer le squelette du formulaire entre les balises "body". Pour cela, il va falloir modifier la page HTML que vous avez enregistrée.

Lorsque vous modifiez votre formulaire, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.

Bref, on va commencer le squelette du formulaire par ceci :
Code:
   <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      Contenu du formulaire
    </form>


Hé, minute papillon! De késsé?

J'imagine que vous l'avez deviné, mais la balise "form" est une balise de formulaire. Dans cette balise, il y a plusieurs attributs.

Le "id" permet de donne un id unique au formulaire pour le sélectionner plus tard.

Le "action" permet d'indiquer au formulaire où on va envoyer les données du formulaire pour qu'elles soient traitées. Dans notre cas, on met "/posting.forum" parce qu'on c'est la page de forumactif qui permet de poster un nouveau message/sujet).
Si vous avez créé une page de traitement php parce que vous avez votre propre site, ce serait cette adresse qu'il faudrait mettre. Si vous vouliez envoyer un mail, vous pourriez utiliser l'adresse de traitement du logiciel de messagerie de votre choix, ce qui ferait "mailto:nomdudestinataire@hotmail.fr" par exemple.

Le "method" indique la façon dont le formulaire est envoyé, soit selon la méthode "get" qui met les données dans la barre d'URL (dans la plupart des cas, très peu utile) ou selon la méthode "post" qui met les données dans le contenu html de la page de réception. Nous, c'est la méthode "post" qu'on veut.

Le "name" est simplement un nom quelconque qu'on donne à ce formulaire. On va s'en servir plus tard dans le javascript.

Le "enctype" précise la façon dont les données sont cryptées. C'est assez compliqué à expliquer alors disons simplement que dans la majorité des situations, on utilise le enctype "multipart/form-data".

Le "target", dans cette situation, nous dit d'ouvrir un nouvel onglet pour poster le formulaire. Si vous mettez le formulaire dans un iframe plus tard, cela vous évitera de poster un message dans un message.

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


Étape 1.2 - Comprendre les différents types de champs à remplir


On a maintenant un formulaire, sauf qu'il est vide. Tout formulaire qui se respecte doit avoir des champs à remplir pour que l'utilisateur puisse fournir des informations.

Ok, et à quoi ressemble un champ à remplir?

À ceci :
Code:
<label for="question1">Question 1</label><br />
<input id="question1" name="question1" value="" type="text" size="50"></input>


Vous voyez qu'il y a 2 nouvelles types de balises, "label" et "input".

Balise Label

La balise "label" est une "étiquette", elle sert à "étiquetter" un champ à remplir. En soi, cette balise n'a rien de spécial, à l'exception que lorsqu'on clique dessus, cela met le focus sur le champs à remplir qui y est lié.

D'ailleurs, c'est à cela que sert l'attribut "for", à associer un label à un input. La valeur de l'attribut "for" doit absolument être le même que le "id" du champ à remplir qui y est associé.

-----------

Balise Input

La balise "input" est un champ à remplir.

Le "id" permet de lier le champ au label (ne pas oublier qu'un id est "unique", alors ne mettez pas le même id à plusieurs champ).

Le "name" sert à donner un nom au champ à remplir. Ce nom servira, plus tard, à sélectionner la valeur du champ dans un javascript pour transformer les données en un message. Il doit être unique pour chaque champ à remplir. Les seules exceptions sont celles du champ "radio" et du champ "checkbox" (on les verra plus tard).

Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

Le "size" contrôle la longueur du champ (en nombre de caractères). Cela fonctionne avec les champ text, mais pas tous les types de champ.

Enfin, le "type" permet d'indiquer quel est le type de champ. Voici une petite liste des "type" de champ possibles :

Hidden : C'est un champ caché et invisible

Text : Pour du texte court.


Radio : Pour des choix de réponse où il peut y avoir une seule option choisie.
Oui ou Non

Checkbox : Pour des choix de réponse où il peut y avoir plusieurs options choisies.
Option1 et Option2

Button : Pour un bouton.


Number : Pour un nombre.


Password : Pour un mot de passe.


Reset : Pour rénitialiser le formulaire (vider les champs)


Submit : Pour soumettre le formulaire.



Cette liste n'est pas complète parce qu'il y a des "type" moins utilisés et qui ne sont pas acceptés sur tous les navigateurs. Pour une liste complète, on va à cet endroit.

Aussi, je vous mets sous spoiler ce tutoriel de Riku qui démontre un peu plus les différents champs et certaines options à mettre dans les champs (readonly, disabled, selected, checked, etc.) :

Tutoriel de Riku:
Bonsoir les cocos.
Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en HTML !! Je dis bien en HTML, le traitement en PHP c'est une autre histoire Razz

Formulaire en HTML

Je vais vous faire peur d'entrée... voici un code :

Code:
<form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
<input type="hidden" name="Riku Asakura" value="Formulaire" />
Votre nom : <input type="text" name="nom" />
<br />
Votre Prénom : <input type="text" name="Prénom" /> 
<br />
Votre adresse : <input type="text" name="Adresse" size="80" /> 
<br />
<textarea name="texte" cols=35 rows=10></textarea>
<br />
Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
<br />
Votre site : <input type="text" name="url" size=50 value="http://" />
<br />
<input type="submit" value="Envoyer le formulaire " name="submit" />
<br />
<input type="reset" value="Effacer " name="reset" />
 

Ce qui donne:


Votre nom :

Votre Prénom :

Votre adresse :



Votre mot de passe :

Votre site :





Quelques explications :
  • action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
  • disabled : créé une liste ou un champs grisé.
  • "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
  • "checkbox" : Contenu de type="" - Créé une case à cocher.
  • "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
  • "button" : Contenu de type="" - Créé un bouton cliquable.
  • cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
  • maxlenght : délimite le nombre de caractères maximum dans un champ.
  • method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
  • name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
  • name pour créer un même groupe de bouton.(cf. exemple plus bas)
  • readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
  • rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
  • "password" : contenu de type="" - Créé un champ de saisie crypté.
  • value : Donne une valeur par défaut à un champ.
  • "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
  • "submit" : Bouton d'envoi de données.
  • type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
  • size : définit la largeur d'un champ.


Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
Code:
<form>
N-U est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Résultat :
N-U est :



- Créer un choix par défaut dans une liste déroulante
Code:
<form>
Never-Utopia est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super" selected="selected">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Donnera :

Never-Utopia est :


Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
Code:
selected="selected"

dans l'option à sélectionner par défaut.

On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
Radio
Code:
<form>
Les tutos de N-U sont :
<input type="radio" name="tuto" value="excellents" />Excellents<br />
<input type="radio" name="tuto" value="bons"  checked="checked" />bons<br />
<input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
<input type="radio" name="tuto" value="bof" />bof<br />
<input type="radio" name="tuto" value="nuls" />nuls</form>


Les tutos de N-U sont :
Excellents

bons

Pas Mal

bof

nul


Sauf qu'ici on aura utilisé
Code:
 checked="checked"

pour présélectionner un choix.
On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
Checkbox
Code:
<form>Vous trouvez que je suis :
<input type="checkbox" value="excellent" />Barbant<br />
<input type="checkbox" value="bon" checked="checked" />Agréable<br />
<input type="checkbox" value="pas-mal"  checked="checked" />Beau gosse<br />
<input type="checkbox" value="bof" />Trop long<br />
<input type="checkbox" value="nul" />Je sais pô...</form>

Vous trouvez que je suis :
Barbant

Agréable

Beau gosse

Trop long

Je sais pô...


Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
ptdr !

Enjoy Wink






J'ai parlé d'une exception du "name" pour le type "radio" et le type "checkbox", n'est-ce pas? Le "name" nous sert dans le javascript à sélectionner la valeur d'un champ, donc il est important que tous les champs aient un "name" différent.

Pour le type "radio" et le type "checkbox", il y a un petit pépin. En effet, pour une même question (un même label), il y a plusieurs champs (plusieurs input).

Histoire de pouvoir démêler cela un peu, on va se servir du "checked" pour vérifier si un champ est coché ou non (on va voir le checked plus tard). Du coup, il n'y a plus besoin de mettre un "name" différent pour chaque input. Plutôt le contraire en fait.

Il est important que, dans les cas de champs "radio" et "checkbox", tous les champs qui font partie d'une même question aient le même "name".

Pourquoi? Parce que le "name" va permettre aux différents champs de rester associés entre eux. Dans le cas d'un champ de type "radio", on peut seulement cocher un champ parmi ceux qui ont le même "name" et si on coche un autre champ qui a le même "name", celui qui était coché précédemment se décoche.

Perdu? Voilà un petit exemple pour vous montrer comme cela fonctionne quand on clique sur un champ radio :




Et l'exemple en code :
Code:
<label for="question_quelconque">Question quelconque</label><br />

<label for="option1">Option 1</label> <input id="option1" name="question_quelconque" value="Mon option 1" type="radio"></input><br />

<label for="option2">Option 2</label> <input id="option2" name="question_quelconque" value="Mon option 2" type="radio"></input>





Outre les balises "input" et "label", il y en a 3 autres qui peuvent être utile dans un formulaire.

Il s'agit des balises "textarea", "select" et "option".

Voilà à quoi elles ressemblent (en code) :
Code:
<textarea name="arara" id="blablabla">Bla bla bla.</textarea>

<select name="restaurants" id="restaurants">
  <option>McDo</option>
  <option>PFK</option>
  <option>Mike</option>
  <option>Subway</option>
  <option>A&W</option>
  <option>Les frites de Suzanne</option>
</select>



Et voilà leur utilité/apparence :
Textarea : C'est une balise utilisée pour du texte long.


Select et Option : Pour des listes déroulantes. La balise "select" correspond à la liste en elle-même et les balises "option" sont les différentes options de la liste.



Étape 1.3 - Créer les champs de notre formulaire


J'ai vraiment besoin de l'expliquer?

Maintenant que vous savez comment fonctionnent les champs, à vous de d'essayer de construire vos questions et vos champs pour votre formulaire ^^

Voici  les questions et les champs pour l'exemple que je vous avais montré tout à l'heure :
Code:
   <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de commande de Bouffe, miam miam !</h1>
      <h2>Mes informations</h2>
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input type="text" size="50" name="nom" id="nom" /><br />
      <br />
      <label for="adresse">Adresse<span class="redd">*</span> :</label><br />
      <input type="text" size="70" name="adresse" id="adresse" /><br />
      <br />
      <label for="phone">Numéro de téléphone<span class="redd">*</span> :</label><br />
      <input type="text" size="20" name="phone" id="phone" /><br />
      <br />
      <h2>Commande</h2>
      <label for="resto">Nom du restaurant<span class="redd">*</span> :</label><br />
      <select name="resto" id="resto">
        <option>McDo</option>
        <option>PFK</option>
        <option>Buffet Chinois Hans</option>
        <option>Mike</option>
        <option>Subway</option>
        <option>Sushi Shop</option>
        <option>Chez Angelo l'Italien</option>
        <option>Les frites de Suzanne</option>
      </select><br />
      <br />
      <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
      <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
      <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />
      <br />
      <h3>Commande avec menu prédéfini</h3>
      <label for="nmenu">N° de menu :</label><br />
      <input type="number" style="width: 50px;" name="nmenu" id="nmenu" max="20" min="1" value="1" /><br />
      <br />
      <label for="nperso">Nombre de personnes qui commandent :</label><br />
      <input type="number" style="width: 50px;" name="nperso" id="nperso" max="20" min="1" value="1" /><br />
      <br />
      <h3>Commande personnalisée</h3>
      <label for="commande">Contenu de la commande</label><br />
      <textarea name="commande" id="commande"></textarea><br />
      <br />
      <h2>Paiement</h2>
      <label for="paie">Type de paiement<span class="redd">*</span> :</label><br />
      <label for="visa">Carte Visa</label> <input type="radio" name="paie" id="visa" checked="checked" value="Carte Visa" /><br />
      <label for="mastercard">Carte Mastercard</label> <input type="radio" name="paie" id="mastercard" value="Carte Mastercard" /><br />
      <label for="cash">Argent comptant</label> <input type="radio" name="paie" id="cash" value="Argent comptant" /><br />
      <label for="debit">Carte de débit</label> <input type="radio" name="paie" id="debit" value="Carte de débit" /><br />
      <br />
      <label for="trucs">Trucs pour faire baisser le montant total :</label><br />
      <label for="coupon">Coupon-rabais</label> <input type="checkbox" name="coupon" id="coupon" value="Coupon-rabais" /><br />
      <label for="ami">"Ami" du proprio</label> <input type="checkbox" name="ami" id="ami" value="Ami du proprio" /><br />
      <label for="cadeau">Cartes cadeaux</label> <input type="checkbox" name="cadeau" id="cadeau" value="Cartes cadeaux" /><br />
      <br />
      <label for="secret">Mon code secret VIP de "Chez Angelo l'Italien" :</label><br />
      <input type="password" size="30" name="secret" id="secret" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
    </form>


Note : Les h1, h2 et h3 sont simplement des balises de titres.
Note2 : Les br sont des retour à la ligne, cela remplace un "enter" classique qui, dans une page HTML, ne sert à rien.

À vous de jouer pour faire votre propre formulaire maintenant !

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Attention au champ pour envoyer le message !

Sur forumactif, le champ pour envoyer le message, celui qui a pour type "submit", doit absolument avoir "post" dans son "name". Le name "post" sert à indiquer qu'on veut poster notre message et non pas faire quelque chose d'autre avec.

Du coup, il doit ressembler à cela :
Code:
<input type="submit" name="post" value="Envoyer le formulaire" />


D'ailleurs, si jamais vous voulez rajouter l'option de "prévisualiser" le message avant qu'il soit posté, vous pouvez faire un copier/coller du bouton, mais en utilisant le name "preview" à la place de "post".

Du coup, le bouton prévisualiser ressemblerait à ceci :
Code:
<input type="submit" name="preview" value="Prévisualiser le formulaire" />



Étape 2 - Les champs invisibles de notre formulaire


Houston, on a un problème! Mais de quoi elle parle, des champs invisibles ? WTF ?

Roh, allez, c'est pas si effrayant, je vous en ai déjà parlé tout à l'heure !

Je parle ici des balises "input" de type "hidden", ceux qu'on peut mettre partout sans que la personne qui rempli le formulaire ne les voit.

Mais pourquoi on en aurait besoin ??!

Vous croyez peut-être que votre formulaire, une fois rempli, va savoir qu'il doit aller dans se poster en réponse à un sujet déjà créé ou qu'il doit créer un nouveau sujet dans un sous-forum précis? Nope, il n'en sait rien.

Heureusement, on est là pour l'aider ^^

Donc voilà les champs invisibles qui seront à ajouter directement après la balise "form" :
Code:
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />


.... Et ça veut dire quoi, ça? C'est bien beau d'aider le formulaire à savoir où aller, mais j'en ai pas plus idées que lui moi ><

Ouais, j'imagine XD Allez, passons chaque ligne au peigne fin !


Code:
<input type="hidden" name="mode" value="newtopic" />

Cela sert à définir le mode du message.
Si on met "newtopic" comme valeur, c'est qu'on crée un nouveau sujet. Si on met "reply" comme valeur, c'est qu'on répond à un sujet déjà existant. Si on met "move" comme valeur, c'est qu'on veut déplacer un sujet.
Je ne nommerai pas tous les modes, mais il y en a beaucoup, un pour presque chaque option possible sur forumactif.
Nous, ce qui nous intéresse pour le moment, c'est le "newtopic" pour créer un nouveau sujet et le "reply" pour répondre à un sujet.


Code:
<input type="hidden" name="topictype" value="0" checked="checked" />

Cela sert à dire quel type de sujet on crée.
Si c'est un message normal, on lui donne la valeur "0".
Si c'est une note (post-it), ce sera la valeur "1".
Si c'est une annonce, ce sera la valeur "2".
Si c'est une annonce globale, ce sera la valeur "3".


Code:
<input type="hidden" name="message" value="" />

Il s'agit du contenu du message qui sera posté. Comme le message va prendre les données du formulaire, on le met vide pour le moment et on ira s'occuper de le remplir plus tard grâce au javascript.


Code:
<input type="hidden" name="f" value="10" />

C'est le "où". Où est-ce que le message doit être posté?
Le "f" dans le "name" indique que c'est dans un forum ou sous-forum.
Si on voulait que ce soit dans une catégorie, on aurait mis la valeur "c".
Si on aurait voulait que ce soit dans un sujet déjà créé, on aurait mis la valeur "t".

Ensuite, le "10" dans le "value" indique dans quel forum/sous-forum/catégorie/sujet le message doit être posté.
Autrement dit, vous vous rendez sur la page du sujet/sous-forum/etc. où vous voulez que le sujet soit posté et vous regardez dans la barre d'adresse.
Directement après le "f" (ou c ou t), vous verrez un nombre.
C'est ce nombre qu'il faut mettre dans "value".


Code:
<input type="hidden" name="subject" id="titre" value="" />

C'est simplement le titre du sujet. Si vous voulez que la personne le remplisse par elle-même, vous pouvez changer le "type" pour "text" et l'intégrer au reste du formulaire. Sinon, laissez-le caché et on ira remplir le titre à l'aide du javascript plus tard ^^


Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Et voilà pour cette section \o/

NyoTheNeko

Les margin et les padding - Sam 2 Jan 2016 - 14:03



Margin & Padding


Bonjour à vous les loulous! :hug:
Aujourd'hui, je vous propose un petit tuto tout simple pour vous expliquer un petit concept qui, pour les débutants, peut parfois être difficile à comprendre: les margin et les padding. En soi, une fois qu'on a compris de quoi il en retourne, il est facile de manier les blocs sans trop de problème avec les tailles.

À quoi ça correspond?


Bon, je vous lance des termes, comme ça, en pleine figure: mais à quoi est-ce que ça correspond exactement? Alors tout simplement, le "margin" représente la marge, c'est à dire, la distance entre votre bloc et un autre.
Commençons par un petit exemple. Voici deux blocs, un rouge et un noir:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Ce n'est pas le sujet principal mais je vous explique rapidement le code plus haut.
Tout d'abord, je donne à mes deux div un display: inline-block, qui me permettra de les mettre côte à côté. Je fais cela surtout pour qu'il soit plus aisé de voir l'effet qu'ont les marges pour la suite de l'exemple. Le vertical-align: top me permet également de dire, que si je les veux côte à côte, je veux aussi que le haut de chaque bloc soit aligné. J'aurai pu également mettre "middle" ou "bottom", si je voulais que les deux blocks soient centrés en hauteur l'un par rapport à l'autre, ou alors que le bas de chaque bloc soit aligné.
Ensuite, à l'aide de height et width je donne une hauteur puis une largeur à mes blocs.
Enfin background me permet de donner une couleur de fond à mes blocs, respectivement rouge (red) et noir (black).


Vous remarquez donc que ces deux blocs sont collés l'un contre l'autre. À présent, si je rajoute une marge avec l'aide de margin au premier, ils ne le seront plus:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Nous remarquons ici deux choses. Premièrement: margin crée une marge autour de l'ensemble du bloc, ce qui veut dire qu'il y a une marge en bas, mais aussi en haut. Pour que vous puissiez le voir, voici une représentation visuelle de la marge (en jaune):
Une autre chose que vous aurez remarqué également, c'est que le bloc de droite s'est aligné, non pas avec le haut du bloc, mais le haut du bloc avec sa marge, et donc il ne semble plus que les deux blocs soient alignés.
Dans la prochaine section, je vous expliquerais pourquoi.

Passons à présent au padding. En français, le padding peut au mieux se traduire par du rembourrage, mais en soi, ce mot peut ne pas vous dire grand chose, et c'est normal.
Reprenons nos deux carrés, mais rajoutons cette fois-ci du texte dans le premier:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Le code ici est fondamentalement le même qu'avant, si ce n'est qu'on a rajouté le color: white; qui permet de donner la couleur au texte. Ainsi, tout texte dans le premier carré aura une couleur blanche.


Vu que je n'ai pas de marge, les deux carrés sont collés, mais également le texte à l'intérieur est collé aux bords du carré. À présent, rajoutons un peu de rembourrage avec l'aide de padding:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Là on remarque à nouveau deux choses: le fait que le texte n'est plus collé aux bords du bloc, donc qu'il y a une sorte de "marge intérieure" (ce fameux rembourrage justement). On remarque que le rembourrage fait également tout le tour interne du bloc.
Voici une image pour vous représenter visuellement le padding, ici en violet:

Vous pouvez voir aussi que le bloc rouge est à présent plus haut (mais aussi plus large bien que ce soit moins marquant) que le noir. Pourtant, les valeurs indiqués dans height et width dont les même, ainsi, ils devraient avoir la même taille, non?
Eh bien je réponds dans la prochaine section! Wink

Notez que j'aurai très bien pu mettre aussi une autre div ou tout autre élément, comme une image par exemple, dans le bloc. J'ai simplement choisi d'utiliser du texte, mais le padding aura un effet sur tout ce qui se trouve à l'intérieur du bloc.


Comment utiliser ces propriétés?


Avant d'aller vous expliquer plus en profondeur les effets exact de margin et padding sur votre bloc, je vais vous expliquer comment utiliser ces propriétés. Avec les codes plus haut, vous avez probablement deviné comment mettre une marge autour de l'ensemble de vote bloc, mais il y a plusieurs façons pour ne mettre des marge qu'à des endroits spécifiques, ou encore, des marges différentes à chaque côté. Il en va bien sûr de même pour le rembourrage.

Dans la suite du texte, je n’écrirais que "marges", mais c'est en réalité pour éviter de mettre à chaque phrase margin/padding, ou marge/rembourrage à chaque fois, vu que les propriétés sont très largement les même.

Notez également que le code de base pour chaque exemple est ceci:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>



Donc comme vous l'avez vu plus haut, pour mettre une marge tout autour d'un élément, il suffit d'utiliser la propriété seule avec une seule et unique valeur. Voici un exemple avec des marges de 10 pixels:
Code:
margin: 10px;
padding: 10px;


En l'utilisant sur le carré rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 10px; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Maintenant, imaginez que je ne veuille des marges qu'à gauche. Il me suffit en réalité de rajouter le suffixe "left" le mot pour gauche en anglais. Voici un exemple avec des marges de 10 pixels:
Code:
margin-left: 10px;
padding-left: 10px;


Voilà ce que cela donne si je mets les marges au carré noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; margin-left: 10px; padding-left: 10px;">Je suis un carré noir</div>


Il en va de même pour chacun des côtés. Il suffit de rajouter le suffixe correspondant. Donc "top" pour le haut, "bottom" pour le bas, et enfin, "right" pour la droite.
Code:
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;


Voici un exemple pour chaque.
Marges à droite pour le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-right: 10px; padding-right: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en haut sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-top: 10px; padding-top: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en bas sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-bottom: 10px; padding-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Visuellement parlant, le dernier ne semble pas faire grand chose, mis à part allonger le bloc rouge. Cependant, on peut voir qu'il y a bien une marge en bas. Preuve en image, avec le padding en violet et le margin en jaune:


Vous pouvez bien évidemment combiner les quatre côtés pour avoir des marges différentes à chaque côté. Ainsi, prenons cet exemple:
Code:
margin-left: 10px;
margin-right: 5px;
margin-top: 20px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 10px;


Je vais donc appliquer les margin au rouge et appliquer les padding au noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-left: 10px; margin-right: 5px; margin-top: 20px; margin-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding-left: 10px; padding-right: 5px; padding-top: 20px; padding-bottom: 10px;">Je suis un carré noir</div>


Visuellement, avec les padding en violet et les margin en jaune:

Vous avez cependant aussi la possibilité, plutôt que d'utiliser chaque propriété de top, bottom, left et right à chaque fois, de tout mettre en une ligne. Pour ceci, c'est très simple: il suffit de mettre les quatre valeurs, l'une après l'autre, en suivant ce sens: top, right, bottom et enfin left (donc haut, droite, bas et gauche). Pour vous en rappeler, vous pouvez imaginer faire un cercle en suivant les aiguilles d'une montre dans votre tête en commençant par en haut.
Ainsi, l'exemple précédent devient:
Code:
margin: 20px 5px 10px 10px;
padding: 20px 5px 10px 10px;


Et si comme plus tôt j'applique les margin au rouge et les padding au noir, on a bien:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 20px 5px 10px 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding: 20px 5px 10px 10px;">Je suis un carré noir</div>


Notez qu'on peut également réduire le nombre de valeurs que l'on met, et ainsi "fusionner" plusieurs valeurs, mais cela suit des règles.

Par exemple, si les marges n'ont que trois valeurs:
Code:
margin: 20px 5px 10px;
padding: 20px 5px 10px;

Ici donc, top aura 20 px, left et right en auront 5px et bottom aura 10px. Ce sont donc les valeurs de droite et gauche qui seront les même.

Si les marges n'ont que deux valeurs:
Code:
margin: 20px 5px;
padding: 20px 5px;

Ici donc, top et bottom auront 20 px; left et right en auront 5px. Ce sont donc les valeurs haut et bas, ainsi que de droite et gauche qui seront les même. La valeur de top & bottom arrive en premier, celle de left & right en second.

Et comme nous l'avons vu tout au début, une seule et unique valeur donne les marge des quatre côtés:
Code:
margin: 20px;
padding: 20px;


Effets de margin et padding


Comme nous avons pu le voir un peu plus tôt, il est temps de voir les effets qu'ont les margin et padding sur les blocs, et leur interaction avec les autres éléments d'une page.

En réalité, le padding et le margin agissent sur la taille d'un élément, et plus particulièrement sur la place que ce dernier prend sur une page. En effet, en temps normal, la taille d'un élément, est pour sa hauteur height + border et pour sa largeur width + border.

Faites tout de même attention, car le border (= la bordure) fait, en général, tout le tour du bloc. Il faut donc compter autant la bordure de gauche que celle de droite en largeur (celle du haut + celle du bas en hauteur) dans votre calcul. Ainsi, si votre bordure est partout de 5 px, vous avez en tout 10 px de bordure en hauteur qui s'ajoute à la hauteur donnée de l'élément, idem pour la largeur.
Cependant, si vous n'avez qu'une bordure en haut de 5 px et nulle part ailleurs, vous n'avez que 5 pixels qui se rajoute à la hauteur de votre élément.


Ainsi, si on prend un bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, on a en tout un bloc de 300 de large et 300 de haut. Donc quelque chose comme ça:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto;"></div>


Hey! C'est quoi ce margin: auto; me direz-vous, et c'est normal parce que j'en n'ai pas parlé. Le margin: auto vous permet en réalité de centrer sur la page ou dans l'élément contenant tout élément à largeur spécifiée et de type bloc. Cela correspond donc à mettre un margin-left: auto; margin-right: auto;. Vous pouvez rajouter des autres marges (de haut et de bas) en les rajoutant à la suite dans le CSS. Si vous les mettez avant, le margin: auto va les "annuler".
Pour savoir pourquoi, je vous conseille le tuto sur l'ordre et l'héritage de Manumanu.


Maintenant, si je venais à ajouter un padding, la taille de l'élément se modifierait en conséquence. Ainsi, au lieu d'avoir le calcul de plus haut, j'ai à présent: pour sa hauteur height + border + padding et pour sa largeur width + border + padding.

Notez que la réflexion sur combien est ajouté est le même que pour le border, vu que le padding fait aussi tout le tour de l'élément, selon les valeurs indiqués.


Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, mais rajoutons un padding de 100px. On a donc en tout un bloc de 500 de large et 500 de haut. En effet, on avait les 300 d'origine (bordure + taille), mais on rajoute encore 200 de padding, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de padding, ce qui font 200 en tout.

Cela donne donc:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto; padding: 100px;"></div>


Voici une image pour vous le représenter:

Les margin, quant à elles, ne vont pas visuellement agrandir l'élément, mais va influencer la place que va prendre notre bloc sur la page. Par exemple, je vais à présent ajouter deux blocs à mon exemple. Un qui va venir à sa droite, et un qui sera juste en-dessous. N.B. : je vais retirer le margin: auto au bloc et mettre un display: inline-block; vertical-align: top;.


Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


On remarque donc actuellement que la "place" que prend mon élément n'est nulle autre que sa taille, c'est à dire: taille + bordure + padding. Cependant, avec une marge, la place que prendra mon élément sera: taille + bordure + padding + margin.

Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels et padding de 100px. Si on rajoute une marge de 100 px, mon bloc prendra 700 de large et 700 de haut. En effet, on avait les 500 d'origine (bordure + taille + padding), mais on rajoute encore 200 de marge, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de margin, ce qui font 200 en tout.

Dans notre exemple, cela donne ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


Le carré rouge est passé sous notre bloc principal!

En effet, parce que la place que prend le grand bloc est trop "grande", le petit bloc rouge n'a plus la place de se mettre à côté de lui, et de ce fait, va passer à la ligne suivant. Ligne suivant, qui se retrouve donc sous la marge du grand bloc. Ainsi, quand vous utilisez les margin et padding, vous devez faire attention à leur valeur, car c'est avec des valeurs trop grandes que les différents éléments passent "à la ligne" car ils n'ont pas la place.

C'est aussi la raison du pourquoi le vertical-align: top ne semblait pas s'aligner avec le bloc correctement, parce que l'alignement se fait en réalité avec toute la place que prend le bloc, margin comprise. Donc si on aurait voulu que les blocs soient alignés en haut, on aurait du rajouter une margin-top au bloc noir comme ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; margin-top: 10px;"></div>


Je ne rajoute qu'un margin-top, car je veux simplement l'aligner avec le début du bloc, et non pas avoir plus de marge.

Pour fini, foici visuellement, voici la place que prend notre bloc:

On a donc:

Taille d'un élément = taille donnée + border + padding
Place que prend un élément = taille donnée + border + padding + margin


Cependant, on peut encore se poser une question légitime: qu'est-ce que je fais si je ne veux pas faire des maths dans ma tête pour toujours avoir la bonne taille de bloc? Donc:

Est-ce qu'il y a un moyen d'empêcher le changement de taille?


La réponse est oui, mais seulement depuis l'apparition du CSS3, grâce à la propriété box-sizing. Notez cependant que je ne vais pas vous l'expliquer en profondeur: je laisse le soin au cursus de le faire, notamment l'étape "Un peu de CSS3 et ses exigences". Je vais cependant vous donner un exemple et voir superficiellement cette propriété, simplement pour que vous la connaissiez et puisiez l'utiliser si le cœur vous en dit.

Cependant, la propriété box-sizing ne va influencer que la taille et non pas la place que prend l'élément. Donc le margin aura toujours le même effet.

Prenons donc notre élément, puis le même élément avec un padding, comme normalement:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px;">Et moi je suis cette même boîte avec un padding!</div>


On voit donc, comme on l'a appris, que la taille va changer. Mais à présent, rajoutons à la boîte avec padding un box-sizing avec comme valeur border-box, qui va donc dire que la largeur de la boite est le contenu et le padding, et non pas juste le contenu.
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Les boîtes ne sont pas de la même taille?

Effectivement, la seconde est plus petite! Cela vient du fait que le box-sizing va également influencer sur la bordure, et ainsi, au lieu d'avoir taille totale = taille de base + bordure on a simplement taille totale = taille de base, et donc, la bordure et la padding, au lieu de se rajouter, resterons dans la boîte.

Donc pour avoir la même taille, on devrait rajouter 2 px partout au second bloc pour la bordure, comme ceci:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 202px; height: 102px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Donc de toute façon c'est embêtant?

Oui et non, dans le sens où vous êtes alors certain que votre élément fait bien X de large comme vous l'avez indiqué, quelque soit le padding ou la bordure que vous lui avez donné, et n'aurez alors plus qu'à calculer la marge en plus. donc au lieu de faire une somme de quatre chose, on en a plus que deux.  :star:

Quoiqu'il en soit, il vous est recommandé d'utiliser box-sizing: border-box partout si vous le pouvez, parce que ça facilite la vie de tout le monde! ♥

Et sur les éléments inline?


Mais oui, qu'en est-il du padding et margin des éléments inline? Parce que comme on le sait, les éléments inline se fichent pas mal de leur taille.

Par exemple:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="color: blue;">bleu</span> dedans, parce que c'est joli.


Si je rajoute une taille au span, un élément inline, eh bien... ça ne fait rien.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="width: 400px; height: 100px; color: blue;">bleu</span> dedans, parce que c'est joli.


Cependant, quand on rajoute une margin, la margin du haut et du bas n'ont aucune influence, mais les margin de gauche et droite, elle oui.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Donc si je n'avais qu'une margin-top, ça ne ferait rien:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin-top: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Le padding réagit exactement comme le margin:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Cependant, ils se visualisent tout comme pour un bloc:

Seulement, le haut et le bas n'ont aucun effet. Ou vraiment? Car en effet, s'ils ne "poussent" pas les autres lignes pour faire de la place, mais l'élément s'agrandit bien! Et ceci peut se voir avec un background:

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Pour le margin par contre? Toujours rien.

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Et voilà, vous savez à présent tout sur les margin et les padding! Utilisez cette connaissance à bon escient! :hug:

Astuce Forumactif Javascript - Informations membres - Sam 28 Nov 2015 - 23:44



Hello :)

Nous allons parler d'informations sur le membre qui regarde la page mises à disposition par Forumactif.

Vous connaissez peut-être déjà USERNAME et ses copines (vous pouvez voir la liste officielle ici → http://www.never-utopia.com/popup_help.forum?l=miscvars ). On écrit {USERNAME} et ceci est remplacé par le pseudo du membre qui lit (ou bien par "Invité").

Nous pourrons afficher des informations supplémentaires telles que :
  • si la personnes est connectée
  • son avatar
  • son pseudo
  • son nombre de MP
  • le nombre de message sur le forum
  • ses point de réputation
  • d'autres à voir un peu plus bas Wink


Ces informations peuvent être affichées sur le forum directement, par exemple avec l'avatar dans la barre de navigation :


Mais on peut aussi les utiliser pour élaborer d'autres codes, par exemple afficher certaines choses seulement si le membre est connecté / déconnecté, s'il a plus de X messages, etc ^^
Exemples possibles :
- Si on a un guide du nouveau, il sera mis en avant sur toutes les pages pour ceux qui ont peu de messages.
- Mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
- Faire une PA différente pour connecté / non connecté

Les données



Au moment où je commence ce tutoriel, voici les données que je peux récupérer :

  • session_logged_in : si le membre connecté ou non
  • username :  pseudo du membre
  • user_id : identifiant de membre
  • user_level : si je suis membre simple (0) / droit de modération quelque part (2) / admin (3)
  • user_lang :  langue
  • activate_toolbar : si la toolbar est activée (1) ou non (0)
  • fix_toolbar : la toolbar fixée ou non
  • notifications : notifications activées ou non
  • avatar :  html de l'image de l'avatar
  • user_posts :   nombre de messages du membre sur le forum
  • user_nb_privmsg : nombre de MP
  • point_reputation : nombre de points de réputation


Si la toolbar est activée, on peut également récupérer d'autres d'infos, dont le rang de la personne.

Comment trouver ces données ?



Ces données sont dans un objet javascript (ne partez paaaas !), si vous voulez connaitre leur valeur vous pouvez les trouver comme ceci :

- Avec la console du navigateur. Pour en savoir plus, lisez ce topic => Outils de débug par Valtena, surtout la section "la console".
On fait clic droit, inspecter l'élément. On va aller à l'onglet "Console" et écrire dedans _userdata (puis touche entrée ou cliquer sur Executer)


Cela vous donnera quelque chose comme ça :
Code:
_userdata["session_logged_in"] = 1; // connecté ou non
_userdata["username"] = "Nihil Scar Winspeare"; // mon pseudo
_userdata["user_id"] = 7734; // mon identifiant de membre (pour accéder au profil par exemple)
_userdata["user_level"] = 0; // si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
_userdata["user_lang"] = "fr"; // ma langue
_userdata["activate_toolbar"] = 1; // si la toolbar est activée (1) ou non (0)
_userdata["fix_toolbar"] = 0; // si j'ai fixée la toolbar ou non
_userdata["notifications"] = 1; // si j'ai les notifications activées
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />'; // le html de l'image de mon avatar
_userdata["user_posts"] = 1986; // le nombre de messages sur le forum
_userdata["user_nb_privmsg"] = 506; // le nombre de MP
_userdata["point_reputation"] = 236; // le nombre de points de réputation


- Sinon, on peut voir tout ça directement dans le code source. On fait un  clic droit, "afficher le code source", et dedans on cherche "_userdata"


Si ces données n'apparaissent pas, il se peut qu'une modification de votre template overall_header soit la cause. Vérifiez que la variable {HOSTING_JS} est bien présente.


Détail & exemples d'utilisation



J'ai essayé de détailler les variables que j'utilise le plus souvent, ou bien où il y a des petites subtilités à connaitre.

Connecté ou non ?


Code:
_userdata["session_logged_in"] = 1;

Si le membre est connecté la valeur sera 1, sinon cela sera 0.
Exemples d'utilisation :
- masquer un élément si le membre est déconnecté / afficher une zone seulement s'il est connecté, etc...
- pour les générateurs de présentation / commandes sur une page HTML, re-diriger ailleurs si le membre est déconnecté

Pseudo


Code:
_userdata["username"] = "Nihil Scar Winspeare";

Connecté : Pseudo du membre.
Déconnecté : Anonymous

Code:
_userdata["user_id"] = 7734;

Connecté : Identifiant de l'utilisateur. L'id (identifiant) permet par exemple d'accéder au profil de l'utilisateur. Je suis 7734, donc le lien es celui ci → http://www.never-utopia.com/u7734
Déconnecté : la valeur est -1

Autorisations


Code:
_userdata["user_level"] = 0;

0 = simple membre ou déconnecté
1 = admin
2 = droits de modération quelque part
/!\ Pour ce point là, on lit tout et son contraire, je vous conseille donc de faire quelques tests pour être absolument sûrs. Surtout qu'il existe d'autres façons de vérifier si une personne est modo / admin ^^

Avatar


Code:
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />';

Dans tous les cas cela sera une balise image html.
Si connecté : avatar du membre
Si connecté et pas d'avatar : avatar par défaut dans le Panneau d'Admin
Si déconnecté : avatar par défaut dans le Panneau d'Admin
Exemple utilisation : - http://www.never-utopia.com/t56172-rajouter-l-avatar-de-l-utilisateur

Réputation


Code:
_userdata["point_reputation"] = 236;

Les points de réputation (Le système de réputation (Evaluation des posts + le bouton Merci))

Rang


/!\ Il faut que la toolbar soit activée
Code:
_lang["rank_title"] = "V.I.P.";

Si connecté : le rang de la personne (Les rangs)
Si déconnecté : vide
Exemple :
- Beaucoup de forum de RP utilisent les rangs pour les groupes. On pourrait par exemple changer le thème (ou juste certains petits éléments), ou encore rajouter un lien rapide vers le quartier général d'un groupe, etc)


Comment les utiliser ?


Certaines variables peuvent s'utiliser telle quelle en mettant leurs valeurs, d'autres permettent de faire des tests afin de faire un code différent en fonction de leur valeur.

Par exemple :
Code:
if (_userdata.session_logged_in == 1) {
    /* code si connecté */
}


Spoiler:
Le code peut se simplifier comme ça car 1 = vrai :
Code:
if (_userdata.session_logged_in) {
    /* code si connecté */
}



Pouvoir les utiliser comme on utilise {USERNAME}



On peut rajouter ce javascript sur toutes les pages :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    });
});


Si je veux afficher seulement les MP, dans mon HTML je peux faire comme ceci par exemple :
Code:
Mes MP : <span class="js-user_nb_privmsg"></span>


Le code va insérer la valeur à l'intérieur de la balise span, pour insérer la bonne valeur :
Code:
Mes MP : <span class="js-user_nb_privmsg">155</span>


Voici un exemple avec plus de html :
Code:
Utilisateur connecté ? <span class="js-session_logged_in"></span><br/>
Pseudo : <span class="js-username"></span><br/>
Id : <span class="js-user_id"></span><br/>
Image de l'avatar : <span class="js-avatar"></span><br/>
Nombre de messages : <span class="js-user_posts"></span><br/>
Nombre de messages privés <span class="js-user_nb_privmsg"></span><br/>
Nombre de points de réputation <span class="js-point_reputation"></span><br/>


Et grâce au javascript, le contenu des span sera changé comme ceci :
Code:
Utilisateur connecté ? <span class="js-session_logged_in">1</span><br>
Pseudo : <span class="js-username">Nihil Scar Winspeare</span><br>
Image de l'avatar : <span class="js-avatar"><img src="http://img15.hostingpics.net/pics/602962nihiloffline.png" alt=""></span><br>
Nombre de messages : <span class="js-user_posts">1991</span><br>
Nombre de messages privés <span class="js-user_nb_privmsg">506</span><br>
Nombre de points de réputation <span class="js-point_reputation">237</span><br>


Un exemple avec toutes les variables :

Précicison → si vous utilisiez précédemment ce tuto, vous pouvez l'enlever. En effet, le code fourni ici est plus complet. :)

Merci ♥

valtena_ethan

Angular / webcomponent et forum actif - Sam 17 Oct 2015 - 19:40


Bonjour,

Je me demandais ce soir, en écumant le forum, pourquoi aussi peu d'alternative à jquery ? notament du côté de javascript pur ou de technologie permettant les web componante comme angularjs.

Seconde question : Avez-vous tenté l'aventure avec angular ? Quelle retour pouvez-vous donner dessus ?

Rajouter une Google Font sur les chatbox en iframe - Dim 2 Aoû 2015 - 16:14



Rajouter une Google Font sur les chatbox en iframe - phpbb2



On ne peut pour l'instant pas ajouter du javascript sur la page de la chatbox, vous n'aurez donc pas la modificaton sur cette page là.


Ce code ne fonctionne que sur une page où la chatbox est en iframe Wink

La première étape est de vous munir du code fourni par Google Fonts, par exemple pour la police Quicksand :
Code:
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' />


Ensuite, on ajoute un nouveau javascript
Panneau d'administration >> Modules >> Html & JavaScript >> Gestion des codes JavaScript >> Créer un nouveau javascript

On coche "sur l'index" si la CB est seulement sur l'index, sinon "sur toutes les pages" si elle est présente sur toutes les pages (merci Captain Obvious).

Le code Javascript :
Code:
$(function(){
    /* on attends que l'iframe de la CB soit chargée */
    $("iframe[src*='/chatbox']").load(function(){
        $(this).contents().find("head").append("<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>");
    });
});


Vous pouvez ensuite utiliser la police en question normalement, comme aux autres endroits de votre forum. Wink

Si vous rencontrez des problèmes, n'hésitez pas à poster dans le forum Problème avec mon code ou Personnalisations.

Rajouter l'avatar de l'utilisateur - Sam 27 Juin 2015 - 15:30



Rajouter sur la page l'avatar du membre connecté



Ce code permet d'ajouter l'avatar du membre où on le souhaite sur une page du forum.
Exemple d'utilisation :
- Ajouter l'avatar du membre à côté de la réponse rapide

Note : il y a des tas de manière de faire, ce tutoriel n'est qu'un exemple Wink
Pour faciliter le tutoriel, j'utilise jQuery qui est mis par défaut sur les forumactifs et qui va nous faciliter le code.

Utilisation



Partout où vous voulez mettre l'avatar de l'utilisateur, il suffit de rajouter la classe ".js-useravatar" à votre conteneur. La balise image avec l'avatar sera rajoutée ensuite en javascript à l'intérieur de votre élément.

Je dois donc par exemple mettre le code :
Code:
<div class="js-useravatar"></div>


Et le contenu de la div sera remplacé par l'image à l'intérieur de ma div.

   
Je peux aussi utiliser une balise span, une balise p, etc... Il faut juste que cela ne soit pas une balise orpheline (une balise auto-fermante, comme par exemple br, img, input etc).


Il est possible de mettre un contenu par défaut, qui sera ensuite remplacé par l'image de l'avatar, ou qui s'affichera si le javascript ne fonctionne pas. Par exemple :
Code:
<div class="js-useravatar">Contenu temporaire</div>


Styliser



Comment styliser l'image de l'avatar ?
Je vous conseille de rajouter une classe supplémentaire à votre balise.
Ainsi par exemple si mon avatar se trouvera dans un panneau coulissant sur le côté, je peux mettre une seconde classe comme ceci :
Code:
<div class="js-useravatar panneau_avatar"></div>


Et ensuite je met mon CSS comme ceci :
Code:
.panneau_avatar {
    /* style du bloc autour de l.image*/
}

.panneau_avatar img {
    /* style de l.image */
}


Pourquoi mettre une seconde classe, et ne pas styliser directement .js-useravatar ?
→ A priori, vous allez peut-être utiliser cet ajout de l'avatar à plusieurs endroits sur le forum. Si vous stylisez directement .js-useravatar, vous risquez de vous retrouver avec le même style à plusieurs endroits.
En rajoutant une seconde classe, vous êtes sûrs de bien séparer d'un côté le style (avec la classe supplémentaire ajoutée) et le javascript qui ajoute l'avatar (avec la classe .js-useravatar).


Javascript



Le JS, on le met dans PA > Modules > Gestion des codes Javascript.
Ensuite, on rajoute un nouveau script qu'on peut appeler par exemple "Ajouter avatar du membre", qu'on active sur les pages où on en a besoin :)

Code :
Code:
/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
    
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
        
        /* on remplace le contenu de .js-useravatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
        
    }
});


Fonctionnement


Avant d'écrire le javascript, on va d'abord se demander "qu'est ce que je veux faire" ? On ne se jette pas d'un coup sur le code sans réfléchir :)

Je veux remplacer l'avatar de l'utilisateur à l'intérieur des éléments avec la classe js-useravatar.


A partir de cela, je vais me poser quelques questions :

- Comment sélectionner les éléments avec la class js-useravatar ?
En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
En CSS mon sélecteur est .js-useravatar, je fais donc
Code:
$('.js-useravatar');


- Comment je fais pour obtenir l'avatar de l'utilisateur  ?
Forumactif nous met gentiment à disposition une liste d'informations ♥. Il s'agit d'un objet javascript _userdata, qui contient diverses informations sur l'utilisateur sur le site. A ma connaissance, il n'y a pas de sujet officiel de ForumActif qui les recense. Pour en savoir plus, vous pouvez lire ce sujet
Celle qui nous intéresse est celle de l'avatar. Pour y accéder, il nous suffit d'écrire _userdata.avatar. Elle contient un code HTML avec l'image du membre.

Exemple du HTML qu'elle peut contenir :
Code:
<img src="http://r26.imgfast.net/users/2613/44/65/70/avatars/1-23.jpg" alt="" />


Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :
Code:
<img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />


Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)


- Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-useravatar :toto: ?
On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :
Code:
$('.js-useravatar').html("coucou");

Ce code là permet de remplacer le html de .js-useravatar par coucou :)


Code Javascript, un peu plus en détail


On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci :
Code:
$(function(){
    /* code à l'intérieur */
});

On ne peut pas manipuler de manière sûre une page tant que la page n'est pas "prête". Si vous tentez de sélectionner quelque chose sur une page qui n'est pas chargée, l'élément ne sera pas trouvable, et vous allez vous retrouver avec rien qui ne se passe ou de jolies erreurs :)

Avec ce code, on attend que le DOM (la structure de la page) soit chargé, comme ça on peut faire nos modifications, nos sélections, sans problème.

Précision:
Il s'agit d'un équivalent de ce code là que vous verrez aussi parfois.
Code:
$(document).ready(function() {
    /* code à l'intérieur */
});

Cette version là est juste un peu plus longue.


Code:
var $loadAvatar = $('.js-useravatar');

Cette ligne permet de sélectionner les éléments avec la classe "js-useravatar", et on va les stocker dans une variable nommée $loadAvatar.

Code:
if ($loadAvatar.length > 0) {
    /* code à l'intérieur */
}

Cette partie là n'est pas obligatoire, mais elle permet d'être sûrs qu'on a bien un avatar à ajouter sur la page.
$loadAvatar.length va me donner le nombre d'éléments sélectionnés. Je regarde donc s'il y a plus de 0 (donc au minimum 1) élément sélectionné.
Cela signifie "s'il y a un élément dans $loadAvatar, fait ..."

Et enfin, la dernière ligne :
Code:
$loadAvatar.html(_userdata.avatar);

Elle dit → remplace le html de $loadAvatar par _userdata.avatar
Tout le contenu à l'intérieur de chaque $loadAvatar sera remplacé par notre image de profil.

En cas de problème, n'hésitez pas à poster dans la section Problème avec mon code.

Afficher la zone Lancés de dés dans une catégorie précise - Lun 16 Mar 2015 - 13:01



Afficher la zone "Lancés de dés" seulement dans un forum en particulier



Ce code permet d'afficher la zone "lancer de dés" seulement dans certaines catégories / forums ! (version phpBB2)

Note : le code n'est pas sous hide, je tenterai de vérifier les commentaires donc si vous avez la moindre question pour une amélioration / une précision, n'hésitez pas. ♥

Ce code a été créé pour un forum en phphbb2, mais il fonctionne aussi sur PunBB et Invision :)


Rendu



Pour en savoir plus sur le lancé de dés, je vous invite à lire le Tutoriel officiel de ForumActif ainsi que le Tutoriel par Halloween sur Never Utopia


Par défaut, le lancé de dés est disponible dans tous les sujets de votre forum.
Mais, parfois on ne l'utilise que dans une zone précise du forum, et on n'en a pas besoin partout.
Cette option permet de masquer la zone "Lancé de dés" par défaut puis l'afficher seulement dans un forum / catégorie :)
/!\ Attention, je parle ici de l'ensemble de zone lancé de dé, pas d'afficher seulement un dé en particulier Wink

Ce code peut-il totalement empêcher le lancé de dés dans les forums non autorisés ? Non. Dans les catégories où on ne souhaite pas avoir le lancé de dés, la zone est seulement masquée visuellement, les membres peuvent toujours y accéder dans le code source.


Attention, il ne faut pas accepter l'option "Activer le bbcode [ roll ] pour le lancé de dé"
En effet, cette option permet d'éditer un message pour changer le lancé de dé.


Connaissances



Avant de se lancer dans le code, on commence par réfléchir à ce qu'on sait :)

Où se trouvent la zone lancé de dé ? → dans les pages "Répondre" et quand on prévisualise un message de réponse.
On va donc commencer par regarder si on est bien sur une page pour poster un message. Quand on envoie un message, notre URL ressemble à ceci : http://www.never-utopia.com/post

Comment savoir dans quelle catégorie / forum on est ? → le fil d’Ariane
Quand on répond à un sujet, on a le fil d'Ariane en haut.

Ce fil d’Ariane est constitué de liens qui permettent de naviguer sur le forum, et on peut donc regarder si les liens sont dans notre liste des forums "autorisés" ou non.

Fonctionnement



Donc, si on suit la logique, voici ce qu'on peut faire :
(il y a souvent 100 manières de faire la même chose. Ici j'ai fait un choix d'appréhender le problème comme ça, mais on aurait pu s'y prendre autrement Very Happy)


  1. On établit une liste de forums et catégories où le lancé de dés est autorisé.
  2. On va vérifier si le chemin de la page sur laquelle on se trouve est bien /post.
  3. On regarde une zone de lancé de dé sur la page (si la zone n'est pas là, ça ne sert à rien de continuer le reste du code) et si elle est là, on la cache.
    Pourquoi ne pas cacher l'élément par défaut tout simplement (en CSS), puis l'afficher à certains moments ? Par ce que si la personne a le javascript désactivé ou bien qu'il y a une erreur de JS dans la page... Notre JS pour afficher la zone de lancé de dé juste aux bons endroits ne fonctionnera pas.

  4. On récupère les liens du fil d’Ariane.
  5. On regarde si l'un de ces liens est présent dans notre liste "Fora / catégories autorisés".
    → si oui : on affiche la zone lancé de dés



Template posting_body


PA > Affichages > Templates > Poster & Messages privés

On va commencer par entourer toute la zone dans une div, pour pouvoir la sélectionner ensuite en javascript.

On va repérer toute la zone qui correspond au lancé de dé, elle commence ici :
Code:
<!-- BEGIN switch_roll_dice -->


Et se finit ici
Code:
<!-- END switch_roll_dice -->


Tout le code au milieu ne s'affiche que si le lancé de dé est activé :)

On va donc remplacer
Code:
<!-- BEGIN switch_roll_dice -->

Par :
Code:
<!-- BEGIN switch_roll_dice -->
    <div class="js-roll-dice">
    <!-- modification pour le javascript "afficher le lancer de dés seulement sur certaines pages" -->


Et ensuite
Code:
<!-- END switch_roll_dice -->


Par
Code:
 </div> <!-- fermeture de .js-roll-dice -->
<!-- END switch_roll_dice -->


On valide, on publie, et normalement, il n'y a aucun changement visuel.

Javascript


PA > Modules > Html & Javascript
On crée un nouveau javascript activé sur toutes les pages avec un nom clair.

Je vous mets l'ensemble du code :
Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    if (document.location.pathname === "/post") {

        /* url des parties autorisées
         * MODIFIER ICI
         * */
        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        var $dices = $(".js-roll-dice").hide();

        if ($dices.length < 1) return;

        $("a.nav").each(function () {
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                $dices.show();
                return false;
            }
        });
    }
});


La version avec plus de commentaires :
Spoiler:

Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    /* on vérifie si on est dans une page pour poster */
    if (document.location.pathname === "/post") {

        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        /* on sélectionne la zone lancé de dé et on la masque */
        var $dices = $(".js-roll-dice").hide();

        /* on vérifie s'il y a bien le lancé de dés sur la page */
        if ($dices.length < 1) return;

        /* On regarde chaque liens sur le fil d'Arianne */
        $("a.nav").each(function () {
            /*On regarde s'il est présent dans les exceptions  */
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                /* si on est dans un forum autorisé */
                $dices.show(); /* on affiche le lancé de dé */
                return false; /* on sort du each */
            }
        });
    }
});



Rajouter les lien des catégories autoriseés


On modifie cette partie là :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f6-banniere-concours-ga",
    "/f3-presentations",
    "/c5-arene"
];


Prenez l'url de votre catégorie exemple, et gardez juste la partie après le nom de domaine.
Ainsi si vous avez : http://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a http://www.never-utopia.com/c21-communaute
On va mettre : "/c21-communaute".

Attention, il y a des virgules entre chaque lien, mais pas de virgule à la fin Wink

Exemples:
Exemple avec seulement 2 liens :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f3-presentations",
    "/c5-arene"
];


Vous pouvez très bien les mettre sur la même ligne :
Code:
/* url des parties autorisées */
var exceptions = ["/f3-presentations","/c5-arene"];


Exemple avec seulement 1 lien :
Code:
/* url des parties autorisées */
var exceptions = ["/f3-presentations"];



Toutes les sous catégories et sous forums à l'intérieur des liens que vous mettrez seront pris en compte. Ainsi si je mets "Communauté" dans les exceptions, tous les sous forums de cette catégorie auront la zone "Lancé de dés" affichée.


Conclusion



A partir de ce principe là, on pourrait aussi autoriser le lancé de dés partout, sauf sur certains forums (^-^).

Pour tout problème, je vous invite à vous rendre dans la section "Problème en codage".

Scavenger

Le javascript ! (au sens large) - Lun 8 Sep 2014 - 17:37



Hello tout le monde,
Je voulais baptiser ce nouveau sous-forum avec un sujet qui me tient à cœur.

Le javascript

Et oui, le javascript, mais la question est, qu'est ce que le javascript pour vous ? Un langage obscur qui ne sert qu'à faire bouger des onglets ? Un langage formidable pour faire tout un tas d'application web / de LS ?

Venez ici parler de votre expérience avec le javascript, ce qu'il vous inspire, est-ce qu'il vous faire peur ? Est-ce aussi compliqué qu'il n'y parait ?

Le débat est lancée ! Very Happy

Onyx

Barre de navigation ouvrable - Mer 3 Sep 2014 - 7:51




Barre de navigation ouvrable


Salut !

Voici un petit LS d'une barre de navigation ouvrable au clic que j'ai remodelée à partir de la demande de Valou93. À savoir que j'ai utilisé du javascript pour ouvrir/fermer la barre, mais que vous pouvez utiliser ce tuto pour faire la même chose avec des targets qui vous préférez cette méthode.

Pour voir l'aperçu "fermé" : cliquez ici.
Pour voir l'aperçu "ouvert" au clic : cliquez ici.

Ce code est en deux parties.
  • Tout d'abord, nous allons installer la navigation (et le javascript qui la fait fonctionner) dans le template.
  • Puis, nous allons mettre en forme la navigation à l'aide du CSS.

Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > OVERHALL HEADER

Nous allons alors chercher l'ancienne navigation qui devrait être aux alentours des lignes 173 à 177 et ressembler à ceci :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>


Nous allons la remplacer par notre propre navigation, à savoir ceci :
Code:
<table id="navbloc" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <div class="nav_links">
        {GENERATED_NAV_BAR}
      </div>
    </td>
  </tr>
  <tr>
    <td align="left">
      <span id="nav_ouvrir">Ouvrir la navigation</span>       
      <span id="nav_fermer" style="display: none;">Fermer la navigation</span>
    </td>
  </tr>
</table>
<script>document.getElementById("nav_ouvrir").onclick = function() {nav_open()}; /*Fonction pour ouvrir la navigation*/
document.getElementById("nav_fermer").onclick = function() {nav_close()}; /*Fonction pour fermer la navigation*/
function nav_open() {
  document.getElementById("nav_ouvrir").style.display = "none"; /*Fait disparition le bouton ouvrir*/
  document.getElementById("nav_fermer").style.display = "block"; /*Fait apparaître le bouton fermer*/
  document.getElementById("navbloc").style.top = "0px";} /*Fait baisser la navigation*/
function nav_close() {
  document.getElementById("nav_fermer").style.display = "none"; /*Fait disparition le bouton fermer*/
  document.getElementById("nav_ouvrir").style.display = "block"; /*Fait apparaître le bouton ouvrir*/
  document.getElementById("navbloc").style.top = "-32px";} /*Fait monter la navigation*/</script>



Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a un tableau avec l'id "navbloc" qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, dans la première cellule de notre tableau, nous avons la barre de navigation avec la class "nav_links".
  • Puis, dans la deuxième cellule, nous avons les deux boutons qui sont respectivements idenditifés avec les id "nav_ouvrir" et "nav_fermer". Le bouton "fermer" a un "display: none" pour qu'il soit invisible au départ.
  • Enfin, nous avons le javascript qui permet de fermer et d'ouvrir la navigation. Il y a déjà des explications directement dans le code, alors on va en rester là.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre navigation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
   /********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
  position: fixed;
  z-index: 20;
  top: -32px;
  left: 0px;
  width: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/*Barre de la navigation*/
.nav_links {
  background: #1A1815;
  border-bottom: 2px solid #000000;
  color: #88346B;
  height: 20px;
  padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
  font-family: monotype corsiva;
  font-size: 18px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
  color: goldenrod;
  text-shadow: 1px 1px 1px #000000;
}

/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
  display: block;
  width: 190px;
  margin-left: 15px;
  margin-top: -2px;
  background: #1A1815;
  border: 2px solid #000000;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
  padding: 5px;
  font-family: Times New Roman;
  font-size: 20px;
  font-variant: small-caps;
  cursor: pointer;
  text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
  color: goldenrod;
}
   /********************************************* FIN NAVIGATION *********************************************/



Pour ceux qui veulent savoir comme la barre fait pour s'ouvrir et se refermer, je vais juste donner quelques explications qui pourraient être utiles.

  • Dans le CSS du tableau "navbloc", nous avons l'attribut "top". Le "top" indique que le bloc de rechercher à -32px du haut de l'écran.
  • C'est sur cette variable qu'agit le javascript (que nous avons mis dans le template tout à l'heure).
  • Ce javascript reprend le même "top", mais en change la valeur pour "0px" lorsqu'on clique sur le bouton "ouvrir", ce qui redescend la navigation à 0px en haut de l'écran.
  • De façon semblable, lorsqu'on clique sur le bouton "fermer", cela change la valeur pour "-32px" et remet la navigation à -32px en haut de l'écran, ce qui la cache.
  • Du coup, si jamais vous souhaitez modifier les dimensions de la barre de navigation, il faudrait aller le modifier dans le CSS du tableau "navbloc" et aussi dans le javascript pour changer la valeur du "top".


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

NyoTheNeko

Faire des onglets en Javascript - Ven 30 Mai 2014 - 15:00



Faire des onglets en Javascript



Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire des onglets en Javascript! Il est à noter que c'est très utile pour nos PA et nos QEEL qui demandent des onglets, et c'est parfois plus facile à comprendre que l'utilisation du :target en CSS. Cependant le javascript ne marche pas dans les messages forumactif (et ce, pour des questions de sécurité), c'est à dire que vous ne pouvez pas utiliser ce code dans les messages, mais uniquement sur le templates ou la page d'accueil de votre forum! Si vous voulez des onglets dans vos messages, il faudra passer par le CSS!

Ce tutoriel est donc une généralisation du tutoriel de Sui pour faire un QEEL en onglets. Il faut bien comprendre que vous pouvez l'utiliser de plein de façon différentes, autres que pour un QEEL: que ce soit une PA, un profil, une signature dans une iframe, une fiche de pub, etc. C'est donc un tutoriel pour que vous compreniez les mécanismes derrière et puissiez les réutiliser comme bon vous semble!


Le Javascript



Commençons tout de suite par un premier bout de script:
Code:
<script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
</script>


Ca fait beaucoup n'est-ce pas? Et pour la plupart d'entre vous, ce sera probablement du charabia! Mais pas de panique, les explications arrivent, pas à pas, tout de suite!

Tout d'abord un petit mot sur ces balises:
Code:
<script type="text/javascript"></script>


Cela implique que entre ces deux balises, vous retrouverez un code javascript. Facile donc de le repérer au milieu du reste du HTML: il suffit de chercher les balises script!

Commençons maintenant l'analyse du code en lui-même!


Code:
function change_onglet(name)

Ce début est tout simple, nous indiquons que nous créons une fonction (function) du nom de change_onglet et qui prend comme arguments name. Cet argument pourrait très bien s’appeler prout, petit_coeur, machin ou chose, c'est juste que ce sera utilisé ensuite dans la fonction. La fonction en elle-même pourrait aussi avoir le nom que l'on veut: tout ce qui importe, c'est que plus tard, on appelle la fonction par ce nom que l'on a défini!
Le terme important est donc function car cela signifie qu'on déclares une fonction javascript.


Code:
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';

Plus compliqué ici. Là, on prend l'élément passé par son id, (getElementById) et on prend donc son nom, qu'on dit commencer par "onglet_" et le reste de son nom enregistré dans anc_onglet (exemple: si anc_onglet contient un, on cherche l'élément avec l'id onglet_un). Là, on change sa class actuelle (.className) par onglet_0 onglet.

Donc, pour essayer d'expliquer un peu mieux que ce charabia: pour l'onglet qui était actif avant le click, on change la class actuel par la class "onglet_0 onglet".

Notons que la class "onglet_0 onglet" est en réalité deux class: onglet et onglet_0. On pourrait également les nommer autrement! En effet, ces class sont surtout là pour ensuite, par le CSS, mettre en forme les onglets! onglets étant la classe de TOUS les anglets, et onglet_0, la class des onglets inactifs.


Code:
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';

Comme vous voyez, ici, on reprend l'argument "name" passé à la fonction! Ici, c'est donc similaire: on prend l'onglet qu'on vient de cliquer, et on lui donne la classe onglet_1 onglet. Il y a donc ici un changement de classe entre l'actif et l'inactif!
Notons, encore une fois, que la classe pourrait changer! En effet, on pourrait l’appeler comme on veut, cela permet simplement de mettre dans le CSS une certaine mise en forme! On n'est d'ailleurs pas obligé d'avoir deux class!

En effet, avoir deux class (dont une seule qui change) permet de donner à tous les onglets la même mise en forme, mais de donner une différence tout de même à l'onglet actif et aux onlgets inactifs. Par exemple, les class pourraient très ben être inactif onglet et actif onglet respectivement!


D'ailleurs, si on ne souhaite pas que tous les onglets aient la même mise en forme, on pourrait tout simplement supprimer "onglet" et simplement avoir:
Code:
document.getElementById('onglet_'+anc_onglet).className = 'inactif';
                        document.getElementById('onglet_'+name).className = 'actif';

avec inactif la class d'un onglet inactif et actif le code d'un onglet actif. Pr exemple, inactif serait d'une certaine couleur, et actif d'une autre.


Passons à la suite:
Code:
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';

Ici, on dit que l'onglet actif avant le click doit changer de style de display: il doit passer à none. Donc ici, on change directement le CSS, qu'on appelle avec le .style, et on change la balise qu'on appelle avec .display!
En gros, on fait en sorte que l'onglet courant ne s'affiche plus.


Code:
document.getElementById('contenu_onglet_'+name).style.display = 'block';

Ici, on fat pareil, mais l'inverse! C'est à dire que c'est l'onglet qu'on vient de cliquer qui passe à un display: block, donc apparait!

Notez qu'on pourrait également changer ici le CSS, par exemple en mettant opacity, qui passerait de 0 à 1. Dans le CSS, on pourrait alors mettre une transition dans l'endroit concerné! Il faut aussi faire attention, plus loin, dans le CSS, que l'on ne mette pas display:none mais bel et bien opacity: 0 (cf plus tard, la partie CSS).

Et enfin:
Code:
anc_onglet = name;

Ici certainement le truc le plus important: on transfère à anc_onglet la valeur de name, c'est à dire que l'on dit que notre onglet courant est à présent l'onglet que l'on vient de cliquer! Comme ça, au prochain passage dans la fonction, la valeur de anc_onglet ne sera plus la même, et on pourra repasser d'un onglet à un autre de la même façon!


Passons à présent au second bout de code javascript nécessaire:
Code:
<script type="text/javascript">
        //<!--
                var anc_onglet = 'un';
                change_onglet(anc_onglet);
        //-->
</script>

Ça, c'est le code qui permet de déterminer, à l'ouverture de la page, quel est l'onglet qui sera ouvert. Donc en gros on crée une "var" (= variable) du nom anc_onglet (que l'on réutilise dans le code JS plus haut Wink), et on lui donne comme valeur 'un'. On passe alors cette variable créée dans la fonction change_onglet de plus tôt. Ceci étant un code qui ne demande pas d'appel, ça s'exécute au rafraichissement ou démarrage de la page!
Faites bien attention à ce que vous remplaciez "un" par le nom effectif d'un de vos onglets!


Le HTML



Tout d'abord, créons les "boutons" des onglets, c'est à dire, sr quoi on va cliquer pour afficher les onglets!
Code:
<span class="onglet_0 onglet" id="onglet_un" onclick="javascript:change_onglet('un');"> Onglet 1</span><span class="onglet_0 onglet" id="onglet_deux" onclick="javascript:change_onglet('deux');"> Onglet 2</span>



Il suffit de copier ce bout de code:
Code:
<span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');">TITRE_ONGLET</span>

pour créer un nouveau onglet. bien sûr, remplacez NOM par une valeur unique, qui désignera donc cet onglet là!

Ce bout de code:
Code:
onclick="javascript:change_onglet('deux');"

est l'appel à la fonction écrite plus haut. En somme on dit: au click de la souris (onclick) on fait appel à la fonction javascript du nom change_onglet, avec le paramètre "deux". On pourrait aussi changer pour que ce soit au passage de la souris avec "onmouseover" au lieu de onclick. Bien sûr, le paramètre passé correspond au contenu à afficher!


Et maintenant, créons le contenu des onglets:
Code:
<div class="contenu_onglet" id="contenu_onglet_un">Contenu du 1er onglet</div>
<div class="contenu_onglet" id="contenu_onglet_deux">Contenu du 2ième onglet</div>


Bien sûr, comme plus tôt, cette partie est à copier et à nommer pour autant d'onglets que l'on a du même nom que le bouton d'onglet correspondant:
Code:
<div class="contenu_onglet" id="contenu_onglet_NOM">Contenu du NOMième onglet</div>

On a donc l'id, qui identifie quel contenu d'onglet c'est pour que le code JS puisse le modifier comme voulu (et donc qui a le même "nom" que le bouton d'onglet), et la class, qui permet notamment de faire des manipulations CSS (et notamment de l'afficher quand il le faut).

Si vous voulez mettre une image comme "bouton" de votre onglet, il suffit de faire ceci:
Code:
<span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');"><img src="URL_DE_L'IMAGE" /></span>



Le CSS


Le seul code obligatoire à mettre est celui-ci:
Code:
.contenu_onglet {
  display:none;
}

Qui permet, en effet, de mettre un display: none, par défaut, à tous les onglets inactifs! Donc, à remplacer par opacity:0 et une transition si vous avez effectué le changement dont j'ai parlé plus haut!


Le reste du code CSS est optionnel, mais bien sûr, pour mettre en forme correctement, vous en aurez besoin!
Voici donc le squelette, sans rien dedans, pour la mise en forme! Attention cependant, si vous avez changé le nom de certaines classes, il faudra aussi les changer dans le CSS!

Code:
.onglet {
/* Permet de mettre en forme tous les onglets (enfin la partie à clicker). Par exemple, de tous les entourer. */
}

.onglet_0 {
/* Permet de mettre en forme tous les onglets inactifs. PAr exemple, leur donner une couleur ou couleur de fond particulière. */
}

.onglet_1 {
/* Permet de mettre en forme l'onglet actif. Par exemple, lui donner une couleur ou couleur de fond particulière. */
}

#onglet_NOM {
/* Changez NOM par le nom de l'onglet à modifier. Cela permet de mettre en forme un onglet en particulier. */
}

.contenu_onglet {
/* Mise en forme de tous les contenus d'onglets. Utile notamment pour les positionner quelque part */
}

#contenu_onglet_NOM {
/* Changez NOM par le nom du contenu d'onglet à modifier. Cela permet de mettre en forme un contenu d'onglet en particulier. */
}


Et voilà, c'est un peu tout! Si vous avez des questions ou que des passages n'étaient pas clairs, n'hésitez pas à demander!

Onyx

Bloc flottant latéral ouvrant "onclick" (javascript) - Sam 11 Jan 2014 - 5:11



Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



Si le bouton est une image



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
    <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
}


Voilà, votre bloc flottant est installé ^^






Si le bouton est un texte



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <div id="ongleton_ouvrir">
      Ouvrir
    </div>
    <div id="ongleton_fermer" style="display: none;">
      Fermer
    </div>
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
}


Voilà, votre onglet flottant est installé ^^




N'oubliez pas de créditer N-U è_é

Neva

Design changeant selon l'heure (bannière, fond et autres) - Dim 22 Sep 2013 - 16:33


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


RAPPELS :
- Si vous avez un problème avec ce tutoriel, n'hésitez pas à poser vos questions mais faîtes-le ici : http://www.never-utopia.com/f177-probleme-avec-mon-code  (relisez le tutoriel en entier avant de le faire et, lorsque vous ouvrez votre sujet, fournissez l'adresse de ce tutoriel, le lien de votre forum ainsi que les codes CSS/Javascript/template posant problème)


Salut à tous !

Je vous propose un tutoriel permettant de modifier l’apparence de votre forum selon l’heure (que ce soit pour faire un effet jour/nuit, matin/après-midi, un changement pour seulement une heure ou deux dans la journée...). Les deux exemples proposés se concentreront sur la modification du fond du forum et la modification de la bannière mais je vous invite à tenter vos propres personnalisations =)

A SAVOIR :  
- Le code utilise l’heure de votre ordinateur donc, une fois le code installé, vous pouvez changer l’heure sur votre ordinateur et recharger la page pour tester les différentes périodes.  
- Les codes javascript sont à insérer dans panneau d'admin > modules > gestion des codes javascript
- Sur la page "Gestion des codes javascript", pensez à activer les codes en cochant "oui" après "Activer la gestion des codes Javascript" et en enregistrant.




MODIFIER LE FOND DU FORUM ENTRE LE JOUR ET LA NUIT


Tout d’abord, commencez par mettre votre image de fond pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > Image du fond de page : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, nous n’avons besoin que d’un peu de JavaScript.

Voici le code en question :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});


PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).

Juste pour bien résumer, l'image que vous avez mise dans vos images est celle qui apparaît normalement et l'image mise dans le javascript est celle qui apparaît pendant la plage de temps inscrite dans le javascript.

INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages

Et voilà, c’est tout ce qu’il y a à faire ! =)




MODIFIER LA BANNIERE


Tout d’abord, commencez par mettre votre bannière pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > logo : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, il nous faut nos quelques lignes de JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }
});



PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).



Si la taille de la bannière de jour diffère de celle de nuit, il vous faut compléter et utiliser ce code :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("#pun-logo img,#i_logo,#logo img").css("width", "LARGEUR EN PX");
          $("#pun-logo img,#i_logo,#logo img").css("height", "HAUTEUR EN PX");
        }
});


INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages




COMBINER LES DEUX CODES


Si vous souhaitez modifier votre bannière ET votre fond, lisez les deux explications plus haut et suivez la démarche pour le template et le CSS de la bannière mais utilisez ce JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});





RAJOUTER DES TRANCHES HORAIRES


Pour rajouter des tranches horaires, il suffit de reproduire la partie de code qui suit (il s'agit du code pour changer le fond, je vous donne plus bas les parties pour les deux autres codes) en en changeant les infos et en collant  après le } de la précédente et avant le " }); " de fin :

Code:
       if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }


Voilà ce que ça donnerait en ajoutant un 19-23h :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND 7-18h')");
        }
        if(heure >= 19 && heure < 23){
          $("body").css("background-image", "url('ADRESSE FOND 19-23h')");
        }
});


Pour la bannière, c'est cette partie que vous devez copier/coller/remplir avec les nouvelles infos de la même façon :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }


Et cette partie pour le code combinant les deux effets :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }





AUTRES :


Bien que cette astuce ait été fait avec la bannière et le fond en tête, il faut comprendre que cela peut fonctionner pour n'importe quoi.

Petit exemple où je veux qu'un bloc avec l'id "bloc_bleu" devienne rouge de 8 à 19h :
Code:
/*Partie html*/
<div id="bloc_bleu">Je suis un bloc bleu qui devient rouge de 8 à 19h.</div>

/*Partie javascript*/
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#bloc_bleu").css("background-color", "red");
        }
});


Petit exemple où je veux qu'une image avec l'id "image_quelconque" change d'images de 8 à 19h :
Code:
/*Partie html*/
<img id="image_quelconque" src="ADRESSE FOND NUIT" />

/*Partie javascript*/jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#image_quelconque").attr("src", "ADRESSE FOND JOUR");
        }
});


Bref, on sélectionne notre "id" avec le $("#JeSuisUnId") au début en changeant le "JeSuisUnId" par le nom de l'id de notre bloc/image.
Ensuite, on utilise .attr("src", "ADRESSE FOND JOUR"); pour changer l'adresse de l'image (seulement pour les images).
Ou, on utilise .css("propriété", "valeur"); pour changer une valeur dans le css, que cela soit le background-image, la couleur de l'écriture, etc.




CONSEILS SUPPLEMENTAIRES :
- En cas de problème, vérifiez bien tous les signes de ponctuation
- Pour faire apparaître/disparaître un élément, jouez sur la propriété display (je pense notamment à display: none; pour faire disparaître votre bannière)

Palypsyla

[HTML/JS] Changer d'onglet au passage de la souris - Mar 12 Juin 2012 - 15:00


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Changer d'onglet au passage de la souris

Bonjour !

Je viens appliquer un petit complément du tutoriel de Sui qui permet de réaliser une page d'accueil en onglets. Dans son tutoriel, il faut cliquer sur les onglets pour que celui-ci se change et laisse apparaitre le suivant. Ici, je vais vous apprendre à changer une simple valeur pour pouvoir faire en sorte que celui-ci se change juste en passant son curseur dessus (Pour les feignants comme moi qui n'ont pas envie de cliquer à chaque fois pour voir les infos !)

Ce tutoriel s'applique également aux QEEL et tout autre chose utilisant les onglets.

Pour pouvoir voir le tutoriel, il faut poster à la suite.

ForumActif, JavaScript et jQuery : les bases générales - Sam 31 Déc 2011 - 18:32



Bonjour ^^

Je vous propose dans ce recueil d'explications de comprendre comment vous servir du JavaScript dans ForumActif.

Entendons-nous bien, ce recueil ne servira pas à vous apprendre le JS, mais plutôt à savoir comment appliquer le JS sur votre site/forum.

Si votre JS ne fonctionne pas, il se peut que la solution à votre problème se trouve ici. Par contre, ce sont des explications purement générales. Si vous avez besoin de poser des questions générales, vous pouvez ici, mais pour résoudre un cas particulier, il sera préférable d’ouvrir un sujet dans les demandes d’aide (ce sera plus clair ^^). Je mettrai sans doute ce sujet à jour au fur et à mesure des questions que je rencontrerai sur ce forum, d'autant que j'ai dû oublier quelques petites choses que je voulais dire.


1. JavaScript et jQuery : Mini-présentation

JavaScript, c'est un langage qui permet bon nombre de manipulations dans le cadre du navigateur internet. Les nouveautés CSS3/HTML5 lui volent petit à petit la vedette, notamment les transitions CSS3 au passage de la souris. Mais le JS reste encore très utilisé, car certaines manipulations sont encore hors de portée des deux autres ^^

jQuery, quant à lui, est une librairie JS. Autrement dit, jQuery utilise le JS pour créer des fonctions qui vous facilitent la vie. Un exemple est plus parlant :
En JS "pur", on dit : "je prends un bol dans le placard, le lait dans le frigo, je verse la bonne quantité de lait, je mets au micro-onde, je règle et lance le micro-onde et quand ça sonne, j'ouvre et je prends le bol chaud".
Avec jQuery, on dit : "je prépare un bol de lait chaud". Et derrière, sans qu'on ait à préciser quoi que ce soit, jQuery se charge pour nous d'ordonner toutes les petites étapes.
Plus simple, non?
À noter que jQuery EST du JavaScript à 100%. Ce n'est pas différent. Par ailleurs, jQuery n'est pas l'unique librairie JS disponible, même si la plupart des tutoriels l'utilise. Il y a également PrototypeJS par exemple ^^


2. Intégrer du JavaScript/jQuery

Pas mal de personnes sont perdues à ce stade-là. Où faut-il mettre le code?
En fait, la plupart du temps, on peut le mettre où on veut ^^ (pour les exceptions, j’y viens en 2.3). Par contre, la méthode d'intégration change selon l'endroit.

2.1. Dans le HTML
En mettant votre code JavaScript entre les balises script, vous pouvez mettre ça n'importe où dans le HTML. Dans un template, le panneau d'accueil, peu importe.
Code:
<script type="text/javascript"> CODE JAVASCRIPT </script>


Vous pouvez aussi intégrer des feuilles JS hébergées ailleurs, sur un autre site internet, toujours en utilisant la balise script, mais de la façon suivante :
Code:
<script type="text/javascript" src="http://www.monscript.fr/javascript.js"></script>

J'ai mis une adresse bidon, évidemment, à vous de mettre la votre. Sur certains tutoriels, vous risquez de croisez ce type d'exemple, mais avec ce qu'on appelle des liens relatifs (qui commencent par un slash ou un point), comme cela :
Code:
<script type="text/javascript" src="../javascript.js"></script>
<script type="text/javascript" src="/javascript.js"></script>

Ils ne fonctionneront pas sur votre forum (c'est valable avec n'importe quel type de lien relatif, comme une image, car les liens relatifs pointent sur le serveur du forum, or ces documents sont hébergés sur un autre serveur). Les liens doivent obligatoirement commencer par http.
Personnellement, je vous conseille plutôt de copier le contenu de ces pages JS (après les avoir ouvertes dans le bloc note ou tout autre éditeur) pour les intégrer dans les pages mises à disposition par FA. Cela vous permettra de ne pas être dépendant d'un site qui peut fermer, d'un document qui peut disparaître ou devenir indisponible pour une raison x ou y.

2.2 Dans une page JS
C'est la méthode que je préfère et conseille, car elle permet de bien différencier le JS du reste (tout comme je conseille de mettre le CSS dans la feuille de styles plutôt que dans le HTML). Du coup, si on veut modifier le JS on sait exactement où il se trouve, et si on veut changer quelque chose dans le HTML, on ne risque pas, par inadvertance, de toucher au JS.

Allez dans le panneau d'administration avancé, dans modules, puis dans gestion des feuilles JavaScript.
Là, choisissez d'activer la gestion des feuilles JavaScript (n'oubliez pas cette étape! à ne faire que la première fois, bien sûr)
Ensuite, créez-en une, copiez votre code JS et uniquement lui (pas de balise script).
Donnez un petit nom à la page pour la reconnaître, choisissez à quel endroit vous voulez que le code apparaisse/fonctionne, et enregistrez.
Et voilà o/

Par contre, c'est une modification relativement récente de FA. Si vous avez modifié votre template overall_header avant le 5 juillet 2011, il vous faut procéder à un changement. Dans le template, cherchez :
Code:
<!-- BEGIN google_analytics_code -->

Et ajoutez avant :
Code:
{HOSTING_JS}

Les pages JS, comme le template overall_header l’indique, seront donc intégrées au tout début de la page HTML.

2.3. Bug et Debug
Selon comment le code JS est fait, il doit parfois être absolument placé dans le HTML après les éléments HTML qu'il manipule. En effet, si le JS doit être exécuté directement au chargement de la page, il ne pourra pas agir sur les éléments HTML qui apparaissent après lui car ils ne sont pas encore chargés, ce qui cause des dysfonctionnements. Mais si le javascript est compris dans la fonction jQuery suivante, peu importe l'endroit :
Code:
jQuery(document).ready(function(){
  CODE JS
});

Cette fonction permet en effet d'attendre que les éléments HTML (le document) soient tous chargés (donc prêts, donc ready o/) avant de lancer le JavaScript. Vous pouvez éventuellement tenter de mettre votre JS dedans pour éviter d'avoir cette contrainte du positionnement du JS. Normalement, ça fonctionne, sinon il faut voir au cas par cas.

Toute cette affaire d'intégration du JS est importante. Quand vous avez un problème avec votre code, avant de voir quelle partie du code ne fonctionne pas, il faut être sûr et certain que le JS est correctement chargé, et souvent on n'en est pas sûr avec les pages JS. Le plus simple, c'est de décocher tous les emplacements d'apparition des pages JS que vous avez déjà faites, puis d'en créer une nouvelle qui sera la seule à apparaître et d'y mettre simplement le code suivant :
Code:
alert("test");

Si une fenêtre s'ouvre (et je ne parle pas d'une popup que votre navigateur risque de bloquer, aucun risque pour cela) en affichant le texte entre guillemets, c'est que le JS est bien chargé et que ça vient du code. Sinon, vérifiez votre intégration du JS.

Cette petite astuce du alert peut avoir d'autres utilités. Par exemple, si vous le mettez au début d'un JS (dans la balise script ou une page JS) et que ça fonctionne, mais que ça ne marche pas placé à la fin du code, il y a de fortes chances pour qu'un point-virgule, une parenthèse, un guillemet ou autre soit manquant. Mais si au contraire ça fonctionne, il vaudrait peut-être mieux chercher du coté du HTML. Une div mal fermée peut aussi causer des problèmes, de même qu'une classe mal nommée ou un id donné plusieurs fois !

Voilà quelques orientations de debugs pour les plus motivés à apprivoiser le JS (et pour faciliter le travail de ceux qui vous aideront /o/ si vous menez quelques uns de ces tests, précisez-le bien dans votre demande d'aide, la résolution n’en sera que plus rapide).


3. Utiliser jQuery ou un plugin jQuery

ForumActif intègre à l'heure actuelle la version 1.3.2 de jQuery. Vous n'aurez donc pas besoin de vous préoccuper de l'intégration de la librairie au forum. Par contre, la version la plus récente de jQuery est la 1.7.1 donc il se peut que certaines fonctionnalités avancées soient indisponibles. Cependant, l'essentiel est là. On peut supposer que FA préfère garder la version 1.3.2 à cause de sa stabilité et de sa sécurité.

3.1. Le mode "noconflict" de jQuery
Comme je l'ai expliqué plus haut, jQuery est une librairie de fonctions JavaScript. Pour faire appel à ces fonctions, on utilise le signe $. Partout où vous verrez le dollar, cela signifiera qu'on fait appel à une fonction JQuery. Malheureusement, jQuery n'est pas le seul à utiliser ce caractère. PrototypeJS l'utilise également. Et si on installe les deux librairies, le navigateur, en voyant le $, serait incapable de savoir à quelle librairie on fait référence. C'est pourquoi jQuery propose un mode "noconflict" qui utilise le mot-clé jQuery à la place du $. Et ce mode, pour plus de facilité, est directement activé sur ForumActif.
De ce fait, quand vous suivez des tutoriels jQuery pas forcément adaptés pour FA, il faut que vous veilliez à remplacer correctement le caractère $.
Exemple :
Code:
$('#monid').hide();

devient
Code:
jQuery('#monid').hide();


3.2. Intégrer un plugin jQuery
Un plugin, c'est en quelques sortes une mini librairie pour jQuery. Il sert à simplifier encore plus votre code. Vous vous souvenez de l'exemple avec le bol de lait? Eh bien, si on imagine que jQuery simplifie le JavaScript avec une fonction qui prépare le bol de lait, une autre qui fait les tartines de Nutella, et une autre qui prépare le plateau et le transporte, le plugin lui, va utiliser ces fonctions pour vous permettre de demander simplement un petit déjeuner au lit. Par contre, généralement, ce sont de petits programmes très spécifiques à une tâche particulière, donc limité bien que paramétrable. Dans notre exemple, vous pourrez paramétrer de prendre plutôt un thé et de mettre de la confiture à la place du nutella, mais vous ne pourrez pas décider d’ajouter subitement un verre de jus d’orange sur le plateau.

Ceci étant dit, un plugin est donc avant tout un script JS. Vous pourrez éventuellement trouver un lien à intégrer dans le HTML, mais souvent il est en téléchargement, dans un dossier zip ou seul. Vous trouverez un fichier qui porte généralement ce nom:
Code:
nomDuPlugin.min.js

Si vous ne pouvez pas/souhaitez pas l'intégrer dans un lien mais plutôt dans une page JS, c'est ce document qu'il faudra copier dans la page JS que vous créerez sur FA (voire le chapitre précédent).

Une fois cela fait, votre plugin est installé, et il ne reste plus qu'à l'utiliser. En général, des exemples sont mis à votre disposition, dans le dossier téléchargé ou sur le site web du plugin : testez-les en premier lieu avant de partir à l’aventuer =D

Il vous faudra parfois mettre du CSS, que vous pourrez modifier dans une certaine mesure, mais soyez prudents avec les modifications, certaines pouvant être critiques (et mettez le CSS dans panneau d'administration>affichage>couleurs>feuille de style CSS). Bon, en général, la couleur pose pas de souci, hein ^^

En tout cas, vous aurez forcément du JS et du HTML à intégrer. Ce code JavaScript se servira des fonctions du plugin installé pour exécuter ce que vous voudrez. C’est lui que vous pourrez modifier et paramétrer. Pour le JavaScript, créez simplement une nouvelle page JS et copiez votre code comme dit plus haut, en suivant attentivement les explications données avec et en n'oubliant pas de remplacer convenablement les $.

En général, il faut que vous respectiez certaines conventions dans votre HTML (utiliser une certaine structure, certaines classes, etc). Comme il ne s'agit que de HTML, vous pouvez le mettre à peu près n'importe où, dans un template ou un panneau d'accueil. Par contre, si les exemples vous présentent une page complète (avec les balises html, head, et body), ne prenez compte que du HTML présent entre les balises body (dans ce genre de cas, il se peut qu’entre les balises head, il y ait du CSS et/ou du JS… vous savez où les mettre, désormais : le css à sa place dans les feuilles de style, et le JS où vous voulez, le tout sans tenir compte du HTML qui se trouve autour dans la balise head). Il faut par contre bien veiller à respecter le modèle qui vous sera donné et bien sûr, s’assurer que le JS du plugin et le JS à paramétrer apparaissent.


Et voilà, ce sera tout pour l'instant =)
En espérant avoir été suffisamment claire pour vous aider... Et n'hésitez pas à poster pour voir et pour poser davantage de questions ^^ (ou même des précisions/rectifications, je suis loin de tout connaître =D)

Riku Asakura

Effet Smoothscroll (défilement fluide) - Dim 14 Aoû 2011 - 3:01


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello,

Voilà un code qui vous permettra de faire un défilement fluide.
Plus précisément, cela aura comme effet que lorsque vous descendez vers le bas ou le haut du forum à l'aide de flèches, le mouvement sera progressif à la place de saccadé ou instantané.


Et bien aujourd'hui je vous en propose un tout neuf qui utilise jQuery, la bibliothèque javascript chargée automatiquement par vos forums.
Voici le code :

Code:
$(document).ready( function() {

  var speedy = 400;

  function scrollTo(element) {
      $(element).click(function(){
        var goscroll = false;
        var the_hash = $(this).attr("href");
        var regex = new RegExp("(.*)\#(.*)","gi");

        if(the_hash.match("\#")) {

            the_hash = the_hash.replace(regex,"$2");

            if($("#"+the_hash).size()>0) {
              the_element = "#" + the_hash;
              goscroll = true;
            }
            else if($("a[name=" + hash + "]").size()>0) {
              the_element = "a[name=" + the_hash + "]";
            goscroll = true;
            }
             
            if(goscroll) {
              var container = 'html';
              if ($.browser.webkit) container = 'body';
              $(container).animate({
                  scrollTop:$(the_element).offset().top
              }, speedy);
              return false;
            }

        }
      });
  }
 
  scrollTo('a');
});


Ce code est à placer dans PA > Modules > Html & Javascript, sur toutes les pages.

D'après les fonctions utilisées, ce code devrait fonctionner sur tous les navigateurs.
Pour le tester il suffit de cliquer sur les boutons "Top" et "Bottom" disséminés un peu partout dans les topics :)

Pour personnaliser la vitesse d'animation, il suffit de changer la valeur de la première variable nommée speedy.

Si vous avez des questions je suis là.
Amusez-vous bien !

Info complémentaires
- Taille du script : 0,596 ko
- Version 1.5 (dernière màj : optimisation pour les liens absolus)
- Version originale par Riku Asakura
- Creative Commons (pas d'utilisation commerciale, partage à l'identique, citation de l'auteur)
- Compatibilité : Firefox 2+, Opera 9+, Internet Explorer 6+, Chrome 10+, Safari 4+

Undomiel

Le widget des ''derniers sujets'' où vous le désirez ! - Lun 31 Jan 2011 - 21:29


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Édit Onyx : Le LS a été refait de A à Z suite aux modifications du widget par Forumactif. Il fonctionne maintenant pour toutes les versions.

Bonjour à tous !

Comme vous le savez sans doute, Forumactif propose un certain nombre de widgets dont le plus connu est l'affichage des derniers sujets auxquels il y a eut une réponse. Ce tableau est bien pratique mais plusieurs d'entre nous aimeraient sans doute pouvoir l'utiliser ailleurs que sur le portail ou dans les widgets latéraux.

Étape 1 - Activer les widgets


Tout d'abord, vous devez activer les widgets.

Pour cela, rendez-vous sur :
> Panneau d'administration
> > Modules
> > > Portail et Widgets
> > > > Gestion des widgets du forum

Puis, vous vous assurez que le widget des derniers sujets est le premier widget en haut à droite (quitte à supprimer tous les autres).
Vous vous assurez que, dans le widget des derniers sujets, le défilement est activé.




Étape 2 - Mettre les derniers sujets où on veut



Nous allons maintenant allez où on veut placer les derniers sujets.

Puis, vous mettez le code suivant où vous voulez que les derniers sujets s'affichent :
Code:
<div id="derniers_sujets"></div>





Étape 3 - Installer le javascript



Nous allons ensuite mettre un javascript dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des codes Javascript

Vous vous assurez que la gestion des codes javascript est activée.

Vous créez un nouveau javascript.
Vous choisissez le placement "sur l'index" si vous voulez que cela s'affiche seulement sur la page d'accueil
Vous choisissez le placement "sur toutes les pages" pour l'afficher partout.

Vous collez ce javascript et vous enregistrez :
Code:
$(function(){
 
  /*Chemin pour phpBB3, Invision et PunBB*/
  var pour_phpbb3_invision_punbb = '#left .module:first .js-marquee:first';
 
  /*Chemin pour phpBB2*/
  var pour_phpbb2 = '#left .forumline:first .js-marquee:first';
 
  /*Aller chercher le contenu des derniers sujets avec les chemins*/
  var widget_derniers_sujets = $(pour_phpbb2 + ',' + pour_phpbb3_invision_punbb).html();
 
  /*On ajoute le contenu der derniers sujets dans le bloc où on veut qu'ils soient*/
  $('#derniers_sujets').html(widget_derniers_sujets);
 
});





Étape 4 - Allez mettre un peu de CSS



Enfin, on met ceci dans le CSS :
Code:
/*Fait disparaître la colonne des widgets*/
#left {
  display: none;
}
/*Personnaliser le contenu des derniers sujets*/
#derniers_sujets {
width: ;
}


Voilà, c'est tout ^^

Si jamais vous voulez que les derniers sujets défilent, je vous invite sur ce tutoriel.

Naviguation sur le côté sans les widgets - Mer 10 Mar 2010 - 21:11



Voila, si vous voulez une naviguation sur le côté et sans utiliser de widget qui déforme la page :

Vous prenez le code de la naviguation et vous le mettez dans ce code :

Code:

<table style="position: fixed; bottom: 50px; left: 0px;background-color: ;z-index:10000;"><tr><td>ICI METTEZ LES CODE DE VOTRE NAVIGUATION</td><td style="vertical-align: bottom;"><img src="" onClick="document.getElementById('chatboxpop').style.display=(this.src=='')?'block':'none';this.src=(this.src=='')?'':'';"/></td></tr></table>


Ensuite vous copiez le code juste en haut que vous aurez modifier et vous le mettez dans
"Panneau d'administration -> Affichage -> Page d'accueil -> Généralité" et vous mettez ce code

Ensuite vous allez dans "Panneau d'administration -> Affichage -> Templates -> Général"

Et dans tout les templates que je vais citer , vous mettez le code du haut que vous aurez modifier (tout en haut du template)
topics_list_box
viewtopic_body
viewforum_body


Ensuite publier et voila cheers Je vous conseil d'éssayez sur un forum test avant Sleep
Le code du haut est un remix du code "Chat Box Latéral" Donc il y a encore des restes du code en question que j'ai pas tros voulu toucher (je veux pas créez de gros bug :§(zze: )

Voili Voilou

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

Faire un sélecteur de thème - Mer 9 Sep 2009 - 11:48



Salut salut,

À force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le Sélecteur de Thème, en vous expliquant en deux mots comment l'utiliser.

Tout d'abord, vous devez vous rendre dans votre template Overhall_Header et vous trouvez ceci :
Code:
</head>


Juste avant, vous mettez le javascript qui fait fonctionner le code :
Code:
  <script type="text/javascript">
    //<![CDATA[
      var scheme = getCookie('template1');
   
   
      if (scheme == 'NOM THÈME #1') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #1" />');
      }
      else if (scheme == 'NOM THÈME #2') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #2" />');
      }
      else if (scheme == 'NOM THÈME #3') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #3" />');
      }
   
   
      function changeskin(change) {
        var scheme = change;
        var name = 'template1';
        var pathname = location.pathname;
        var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
        var ExpDate = new Date ();
        ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
        setCookie(name,scheme,ExpDate,myDomain);
      }
   
      function getCookie(name) {
        var cname = name + "=";
        var dc = document.cookie;
        if (dc.length > 0) {
          begin = dc.indexOf(cname);
          if (begin != -1) {
            begin += cname.length;
            end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
              return unescape(dc.substring(begin, end));
            }
          }
        return null;
      }
             
      function setCookie(name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
        ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
        ((path == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) +
        ((secure == null) ? "" : "; secure");
      }
    //]]>
  </script>



Ensuite, vous allez où vous voulez que le sélecteur soit et vous mettez le sélecteur lui-même :
Code:
        <div id="skinselector" style="margin: auto; text-align: center;">
            <form style="margin: auto; text-align: center;">
                <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                    <option> Choisir un thème </option>
                    <option value="NOM THÈME #1"> NOM THÈME #1 </option>
                    <option value="NOM THÈME #2"> NOM THÈME #2 </option>
                    <option value="NOM THÈME #3"> NOM THÈME #3 </option>
                </select>
            </form>
        </div>


Par exemple, disons que vous voulez que le sélecteur soit directement après la navigation, vous allez dans le template "Overhall_Header" et placez le code après :
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>



Utilisation :

Vous l'avez donc compris, il faut utiliser UNIQUEMENT les feuilles CSS pour donner au forum son skin, c'est là que réside la difficulté de la tâche, car mettre un code en copier coller c'est facile, mais convertir un design normalement "automatique" en CSS c'est déjà plus difficile.

Pour créer une feuille de CSS, vous pouvez vous ouvrir un bloc-note tout ce qu'il y a de plus normal et y écrire votre CSS. Puis, lorsque vous le sauvegardez, vous écrivez ".css" à la place de ".txt" comme extension.

Une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple Archive-Host.

Enfin, une fois les feuille de CSS hébergées, vous prenez le lien donné et vous pouvez le mettre dans le code du sélecteur de thème.
Les informations à modifier sont en majuscules dans le code (celui du javascript ET celui du sélecteur lui-même), donc vous ne pouvez pas les manquer Wink

C'est tout, bonne journée !


Revenir en haut

La date/heure actuelle est Mar 21 Nov 2017 - 20:22