AccueilDernières imagesRechercherS'enregistrerConnexion

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


28 résultats trouvés pour javascript

Onyx

Système de Badges - Jeu 2 Sep 2021 - 2:06


Système de Badges



Préambule



Vous avez vu le système de badge "Utopia Adventure" sur votre profil de Never-Utopia? Celui qui ressemble à ceci ?
Tag javascript sur Never Utopia - graphisme, codage et game design WLk1ZKe

Eh bien vous pouvez avoir la même chose.

Ce libre service a été créé suite à plusieurs demandes. Au départ, le système a été créé suite à la demande de Iguolta par Nihil Scar Winspeare qui l'a ensuite adapté aux profils simples suite à la demande de Crépuscule de Lune. Enfin, j'ai bricolé une version avec les badges qui s'affichaient dans les messages à la demande de Capuccino que j'ai beaucoup retouché pour ce LS.


IMPORTANT : Ce LS a été créé avant l'ajout du nouveau système de récompense par ForumActif. Maintenant qu'il existe, il serait peut-être mieux d'aller jeter un coup d’œil à ce système de récompense pour valider si cela correspond à vos besoins avant de vous intéresser à ce LS Wink


Étapes


Étape 1
Dans une page HTML, on met tous les badges qui peuvent être obtenus par les membres et on donne une classe (un nom) unique à chaque badge pour les identifier.

Étape 2
On va créer un champ de profil (comme le champ âge, date de naissance, etc. sur le profil). Dans ce champ, les membres (ou Modos ou Admins) mettront le nom des badges qu'ils ont obtenus.

Étape 3
Dans le profil des joueurs, un javascript ira prendre les badges dans la page HTML et les ajoutera au bas du profil (ou à un autre endroit de votre choix). Ce même javascript regardera le champ des badges pour identifier les badges obtenus et leur donnera la classe "obtenu" afin qu'on puisse les différencier des non-obtenus.
- Exemple de mon forum-test
- Exemple avec profil simple personnalisé par Star City Heroes

Étape 4
Dans le profil des joueurs sur les sujets/messages, un javascript ira comparer le champ des badges aux badges de la page HTML et copiera les badges obtenus pour les ajouter dans le profil (ou ailleurs dans la page, au choix).
- Exemple de mon forum-test
- Exemple (les badges sont appelés "sorts") par L'Île d'Arcane
- Exemple avec les badges dans la signature (badges avec infobulles) par L'Île d'Arcane

Étape 5
Enfin, on va mettre en forme les badges pour leur donner un peu de style et différencier les badges obtenus des non-obtenus.

Je tiens à préciser que les exemples qui ne sont pas de mon forum test sont là uniquement pour que vous ayez une idée de ce que vous pourriez obtenir, vous ne pouvez pas les recopier. Les membres de ces forums ont travailler dur pour adapter les codes à leur design, ils méritent qu'on les respecte et qu'on ne les plagie pas Wink

Vous êtes libre de faire l'étape 3 et/ou l'étape 4 selon ce que vous voulez avoir. Les deux javascripts sont indépendants, donc vous pouvez seulement en prendre un des deux ou les deux selon vos souhaits.


Critères de base pour utiliser le LS


- Le code fonctionne seulement avec la version de forum PhpBB2
- Il faut avoir accès au panneau d'administration (donc être Admin)
- Pour mettre les badges sur les sujets ou personnaliser avec le Profil Simple, il faut avoir accès aux templates (donc avoir accès au compte fondateur)

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 page des badges (Page HTML)



Nous allons maintenant créer une page HTML dans laquelle nous allons mettre tous les badges.

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 comme "Système de Badges".
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 lang="fr">
<head>
  <meta charset="utf-8" />
  <style>
  .badge {
    display: inline-block;
    margin: 5px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
  .obtenu {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
  }
  </style>
</head>
<body>
 
  <div id="badges-profil">
    <img src="https://2img.net/h/www.aht.li/2946903/morpheus.png" title="Badge 1" class="badge badge_1" />
    <img src="https://2img.net/h/www.aht.li/2946904/neo.png" title="Badge 2" class="badge badge_2" />
    <img src="https://2img.net/h/www.aht.li/2946905/architecte.png" title="Badge 3" class="badge badge_3" />
  </div>
 
</body>
</html>


Lorsque vous modifiez votre page, il faut cliquer sur le triple engrenage (Tag javascript sur Never Utopia - graphisme, codage et game design HAHlEmt), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Chaque badge correspond à ceci :
Code:
<img src="url_du_badge" title="Titre du badge" class="badge badge_3" />


Ici, il s'agit d'une image, mais vous pouvez tout autant faire une infobulle ou autre chose.

Ce qui nous intéresse ici est le badge_3. Pour chaque badge j'ai rajouté une classe unique. Ici, j'ai simplement mis un chiffre, mais on aurait pu mettre "halloween2" par exemple :)

Le but c'est d'avoir une classe supplémentaire et unique (^-^)

Il est important que ces noms ne comportent pas d'espace, ni d'apostrophe ( ' ), de guillement ( " ) ou de caractères spéciaux (point d'exclamation, signe de dollar, etc.), sinon cela ne fonctionnera pas.

Exemples de bonnes classes :
Code:
badge1
concours_2
Roi-du-Monde
Champion_de_l_Été
halloween


Exemples de mauvaises classes :
Code:
badge 1
concours!
Roi-du-Monde"
Champion_de_l'Été
hallo;ween


Voilà \o/




2. Créer le champ des badges



Afin d'afficher les badges obtenus par les membres, on va maintenant créer un champ de profil dans lequel on va mettre les classes uniques aux badges obtenus afin de les identifier.

Pour cela, nous allons aller dans :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils

Comme ça : https://i.imgur.com/DneWS4I.png

On va devoir créer un nouveau champ de profil personnalisé.

Il faut s'assurer des éléments suivants :
- Le Type doit être : Zone de texte
- Le Nom doit être : Badges obtenus
- L'affichage doit être sur le profil et/ou sur les messages selon où vous voulez les badges.
- On doit afficher ce champ pour les Invités.

Le reste est libre.

Comme ça : https://i.imgur.com/59dkhEa.png

Chaque fois qu'un membre obtiendra un badge, il (ou le modo) devra aller l'ajouter dans ce champ sur leur profil.
Les différents badges doivent être séparés par des points virgules ( ; ).

Ainsi on peut avoir comme contenu pour un membre qui a les badge_2 et badge_3 :
Code:
badge_2; badge_3


Si j'avais personnalisé le nom de mes badges dans le HTML, je pourrais avoir par exemple :
Code:
badge1; badge2; concoursgagné; dernière-place; FouDuRoi; TCF_est_meilleur_que_LCF; badge5


Je mets simplement des noms qui sont plus parlants (^-^)




3. Javascript pour les badges sur le profil



Le javascript affiche en bas du profil les badges avec ceux qu'on a, ceux qu'on a pas :)
Le champ de profil qui contient le nom des badges est masqué, donc les membres ne voient même pas qu'il existe (^-^)

On va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur toutes les pages".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
 
  var idPage = "2"; /* numéro de la page HTML */
 
  $.get("/h" + idPage + "-", function (data) {
    /* on récupère le bloc des badges */
    var $badges = $(data).filter("#badges-profil");
 
    /* on attend que notre page soit prête */
    $(function () {
      /* on récupère le champ des badges obtenus */
      var $profilBadges = $("span:contains('Badges obtenus')").closest("[id^=field_id]");
   
      if ($profilBadges.length > 0) {
        /* selection des badges obtenus du membre */
        var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");
     
        if (badgesUser.length > 0) {
          /* pour chaque badge, on ajoute la classe si besoin */
          for (var i = 0, l = badgesUser.length; i < l; i++) {
            if (badgesUser[i].length > 0) {
              try {
                $badges.find("." + badgesUser[i].trim()).addClass("obtenu");
              } catch (e){
                console.log("Système de badge erreur => " + e);
              }
            }
          }
     
          /* si la personne ne peut pas éditer le champ,
          * on le retire la zone */
          if ($profilBadges.find(".field_editable").length < 1) {
            $profilBadges.remove();
          }
        }
      }
   
      /* on ajoute le bloc en fin de page */
      $("#page-body").after($badges);
 
    });
  })
}


N'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */


Pour trouver le numéro de votre page HTML, c'est par là :
Tag javascript sur Never Utopia - graphisme, codage et game design J0RCoJi

Petite précision, si le membre peut éditer le champ "Badges obtenus", le champ ne disparaîtra, pour qu'il puisse encore le changer directement en passant par la modification rapide. Par contre si c'est un simple membre qui n'a pas les autorisations pour cela, la ligne sera enlevée :)

Et voilà, vous avez des badges en bas de votre profil !

Le combat contre la publicité:





3.1 Mettre les badges ailleurs



Si vous utilisez un Profil Simple, vous avez l'option de modifier le template "profile_view_body" pour mettre les badges ailleurs dans la page. Cette option est impossible pour le Profil Avancé puisque le template n'y est pas accessible.

Pour savoir si vous avez le profil simple ou avancé, on va aller voir à cet endroit :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils > Options générales
Tag javascript sur Never Utopia - graphisme, codage et game design N6QrjUy

Si le "Activer le profil avancé" est à "Oui", vous avez un Profil Avancé. S'il est à "Non", vous avez le Profil Simple.

Bref, continuons.

Pour mettre les badges ailleurs dans la page du profil, on va dans :
> Panneau d'affichage > Affichage > Templates > Profil > profile_view_body

Puis on va ajouter ce bout de code là où on veut que nos badges apparaissent dans le template :
Code:
<div class="js-badges-profil"></div>



Enfin, on va retourner dans le javascript, puis on va remplacer ce petit bout de code :
Code:
$("#page-body").after($badges);


Par cela :
Code:
$(".js-badges-profil").html($badges);


Voilà (^-^)




4. Javascript pour les badges dans les sujets



Le javascript se servira du champ des badges pour identifier les badges obtenus et le champ sera remplacé par ces badges. Les badges non-obtenus ne seront pas affichés.

C'est aussi possible de mettre les badges obtenus ailleurs, comme au bas du profil, en haut du message, dans la signature, etc.

Pour cela, on va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur les sujets".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE SUR LES SUJETS
 * LIBRE SERVICE NEVER UTOPIA
 */

var idPage = "2"; /* numéro de la page HTML */

/* on va sur la page html */
$.get("/h" + idPage + "-", function (data) {
  /* on récupère le bloc des badges dans la page html*/
  var $badges = $(data).filter("#badges-profil");

  /* on attend que notre page soit prête */
  $(function() {
 
    /*pour chaque message*/
    $('tr.post').each(function(){
 
      /* on récupère la zone badge du profil */
      var $profilBadges = $(this).find(".profil-label:contains('Badges'):first");
 
      /*on regarde si la personne a des badges*/
      if ($profilBadges.length > 0) {
   
        /* selection des badges du membre */
        var badgesUser = $profilBadges.next().text().split(";");
   
        /* pour chaque badge dans le champ... */
        $profilBadges.next().html('');
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
             
              /* on copie le badge */
              var lebadge = $badges.find("." + badgesUser[i].trim()).clone(true);
              /* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Encore une fois, n'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */



Pour faire fonctionner ce script, on doit modifier un peu le template "viewtopic_body". Pourquoi? Eh bien, pour que le javascript soit en mesure de trouver le bon champ, on doit leur donner une identité qui nous permettre de les retrouver facilement (^-^)

On va aller dans :
> Panneau d'affichage > Affichage > Templates > Général > viewtopic_body

On va trouver ceci :
Code:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}


Qu'on va remplacer par cela :
Code:
<span class="profil-label">{postrow.displayed.profile_field.LABEL}</span> <span class="profil-champ">{postrow.displayed.profile_field.CONTENT}</span>


Voilà, vos badges obtenus s'afficheront dans le profil des messages !

PS : N'oubliez pas de valider le template Wink


4.1 Mettre les badges ailleurs dans la page



Si vous voulez que les badges soient ailleurs dans le profil ou dans la signature ou ailleurs, on va devoir faire quelques modifications.

Tout d'abord, on doit remplacer ceci dans le javascript :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Par cela :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $(this).find('.js-badges-profil').append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
      }
    }); 
  });
})



Puis on va dans le template "viewtopic_body" et vous ajoutez ceci là où vous voulez que les badges apparaissent :
Code:
<div class="js-badges-profil"></div>


Et voilà le travail (^-^)




5. Mise en forme



Les badges ne sont pas nécessairement super jolis pour le moment. Il faut aussi distinguer les badges obtenus des non-obtenus. Alors on va les mettre en forme !

On va dans :
> Panneau d'affichage > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

On va venir y mettre ce CSS :
Code:
/* BADGES DANS LE PROFIL */
/*Badges*/
#badges-profil .badge, .js-badges-profil .badge {
  display: inline-block;
  margin: 5px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
/*Badges obtenus*/
#badges-profil .obtenu, .js-badges-profil .obtenu {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
/* Style bloc badges*/
#badges-profil, .js-badges-profil {
  border: 2px solid #eed02d;
  background: rgba(255,255,117,0.75);
  margin: 2px 2px 25px;
  text-align: center;
}
/*Titre bloc badges*/
#badges-profil:before, .js-badges-profil:before {
  content: "Badges obtenus";
  display: block;
  background: linear-gradient(#ffff75, #FFc400);
  border-bottom: 1px solid goldenrod;
  color: #20305e;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px;
}

/* BADGES DANS LES MESSAGES */
/*Badges*/
.post .badge {
  display: inline-block;
  margin: 2px;
  vertical-align: middle;
}


Je ne l'explique pas, les titres parlent déjà d'eux-mêmes (^-^)






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 !

Un seul compte, plusieurs personnages : Choix déroulant (2 versions) - Dim 21 Avr 2019 - 16:46

Un seul compte, plusieurs personnages : Choix déroulant




Alors, le multicompte !

Okhmakala avait déjà pensé à cela et avait proposé une astuce juste ici.

Puis, j'ai découvert Esquisse où j'ai réalisé qu'il y avait un système très intéressant où les joueurs ajoutaient une toute petite ligne de code (différente pour chaque personnage) sur leurs messages RP. Ensuite, un javascript repérait cette merveilleuse ligne de code et modifiait le pseudo et l'avatar du joueur pour ceux du personnage dans ce message.

Je reprends ces deux idées et je vais un pas plus loin.


De ce que j'ai pu voir, les principales oppositions à l'idée de Okhmhaka étaient les suivantes :
- Il va falloir que je change des choses
- Oui, logique, un changement implique des changements. Si cela complique la vis des gens, cela passe très mal. Si cela leur facilite la vie, cela passe très bien. On va essayer d'être dans la deuxième catégorie ^^

- Le codage est trop compliqué pour certains de mes membres.
Plus maintenant ! La seule chose que votre membre aura besoin de faire, c'est de sélectionner son personnage, rien d'autre. Le membre n'a pas à toucher à une miette de code ^^

- Les gens doivent toujours copier/coller leur fiche rp, c'est frustrant.
Nope ! Les gens n'auront qu'à sélectionner leur personnage dans un choix déroulant et la magie s'opérera. Leur fiche rp personnalisée apparaîtra comme par magie et leur rp se met lui-même au bon endroit. Il ne reste plus qu'à poster ^^

- C'est louche... Ça fonctionne comment exactement?
Oui, oui, ça s'en vient XD Allez, je vous présente les deux versions.


Version 1


1. Choisir dans un menu déroulant le personnage souhaité lorsque vous postez votre RP.


Le javascript vous propose vos personnages dans un choix déroulant.
Voir un exemple de choix de personnages.

Une fois le choix fait, un petite ligne de code magique qui fait tout fonctionner s'ajoute à votre message.
Voir un exemple de ce qui ce passe une fois le choix fait.
Note : Cela ne fonctionne pas sur les réponses rapides. Il faut cliquer sur "Prévisualiser", puis choisir son personnage.
Note 2 : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Avoir les informations du personnage choisi qui remplacent les vôtres


Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang seront remplacés par ceux du personnage.
Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais restera quand même là pour dire qui est le propriétaire de ce personnage.
Voir un exemple de plusieurs personnages.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
Voir un exemple.
Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.

4. Avoir 2 profils distincts si vous préférez cette option


Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
Voir un exemple.
Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil. Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka (qui est 100% compatible, je m'en suis assurée :ange:)

5. Modifier les données des personnages avec une Google Sheet


Vous pouvez utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.

6. Modifier les données des personnages directement dans le javascript


Disons que vous avez une haine profonde de Google Sheet et que vous voulez une autre option pour où mettre les données des personnages, cette option est pour vous.
L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que seuls les Admins pourront le modifier.
Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.


Version 2


Contrairement à la Version 1, il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps.
Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels).

Par conséquent, voilà ce que cette version vous permettra de faire :

1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


Bref, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
Voir un exemple de choix de personnages.
Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

2. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
Voir un exemple de ce qui se passe quand on choisit un personnage.
Voir un exemple du résultat une fois le message posté.

3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés, tel que vu dans l'exemple précédent (l'inventaire était différents des autres champs).

4. Apparence avec 2 profils


Dans vos messages normaux, vous verrez votre profil joueur et votre message.
Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
C'est un tout inclus !
Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

5. Modifier les données des personnages avec une Google Sheet


Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.


Donc en gros


La Version 1 est plutôt pour ceux d'entre vous qui auraient des profils assez stables qui ne changent pas beaucoup. Ou, si les informations changent, il faut qu'elles changent partout sur le forum.
La mise en place se fait assez facilement et cela ne dérange pas du tout le codage de votre forum. Vous pourriez avoir un profil ou un message totalement codé et quand même installer ce système sans difficultés.

La Version 2 est plutôt pour ceux d'entre vous qui auraient des profils personnages dont les informations changeraient beaucoup et/ou qui préféreraient suivre la progression du personnage à travers le RP. Par exemple, s'il y a une barre d'expérience, une barre de vie, un inventaire, etc., cette version est plus pour vous.
La mise en place se met relativement facilement, mais je suggère que vous ayez quelques connaissances en codage pour mieux personnaliser la fiche de RP.

Dans les 2 cas, l'action à poser par le membre est extrêmement simple, il suffit de sélectionner son personnage et de mettre à jour la Google Sheet si c'est nécessaire.


Je peux mettre quoi comme champ personnalisé exactement?

N'importe quoi. Littéralement.

Vous voulez mettre des badges?
On mettrait ceci dans la Google Sheet dans le champ "Badges" :
Code:
<img src="lien Badge1" /><img src="lien Badge2" /><img src="lien Badge3" />


Vous voulez mettre des pokéballs avec des infobulles? Pourquoi pas !
On mettrait ceci dans la Google Sheet dans le champ "Pokéballs" :
Code:
<span class="infobulle_poke"><img src="image pokéball 1" /><span class="poke">Pikachu</span></span> <span class="infobulle_poke"><img src="image pokéball 2" /><span class="poke">Rattata</span></span>

Et un petit CSS pour faire fonctionner l'infobulle.

Vous voulez une barre de vie?
On mettrait ceci dans la Google Sheet dans le champ "PV" :
Code:
<span class="barrepv"><span class="width: 43%;"></span></span> 43/100

Et on mettrait ceci dans le CSS :
Code:
/*La barre de vie*/
.barrepv {
  display: inline-block;
  width: 100px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 2px;
}
/*La partie remplie de la barre de vie*/
.barrepv > span {
  display: inline-block;
  background-color: red;
}


Tant que vous avez de l'imagination, vous devriez vous débrouiller Razz

Sur ce, je vous présente les Version 1 et Version 2 dans les deux prochains messages Wink

Enjoy \o/

Modifier les textes et nombres des variables du QEEL - Lun 18 Déc 2017 - 6:50

Modifier les textes et nombres des variables du QEEL




Bonjour,

Le code suivant fait suite à une demande d'un membre qui pourra sans doute servir à d'autres. :)
Aperçu:

HTML & Javascript
Modification de la template index_body : Affichage > Templates > General
Modification du Javascript : Modules > HTML & Javascript > Gestion des codes Javascript
Pour vérifier que le Javascript est bien activé sur votre forum, rendez-vous ici.

La première étape sera de checker que le Javascript soit activé sur votre forum.
Ensuite dans la gestion des codes Javascript, ajoutez un code avec le titre de votre choix et collez ce code :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  nb -= 5;
  $('#member_nb strong').text(nb);
});

Ce code prévoit actuellement d'enlever 5 membres au total, si vous souhaitez en ajouter 3 par exemple, il vous remplacer "nb -= 5;" par "nb += 3;".

Ensuite, dans le template index_body, remplace {TOTAL_USERS} par :
Code:
<span id="member_nb">{TOTAL_USERS}</span>


Explication :
Dans le template index_body, on sépare la variable des autres en lui donnant un id pour la retrouver après. Cette variable est composée de : "Nous avons " + X + " membres enregistrés".
Ainsi dans le JQuery, on va récupérer le nombre en stockant le contenu de la balise strong (en séléctionnant l'id "member_nb" ainsi que la balise strong qui encadre le nombre en question) qu'on transforme en chiffre (puisqu'il est actuellement reconnu comme du texte et non comme un chiffre) sur lequel on soustraira ou additionnera ce qu'on veut.

Si vous souhaitez modifier tout le contenu de la variable (incluant donc "Nous avons x membres enregistrés"), il faudra utiliser le code suivant :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  $('#member_nb').text("Nous avons " + nb + " inscrits au registre");
});


Ces codes peuvent être facilement réutilisés pour les autres variables du forum en utilisant toujours le même principe : Donner un id à la variable que l'on souhaite modifier en l'encadrant d'une balise span, regarder de quoi ce compose cette variable et remplacer les éléments dans le Javascript en indiquant l'identifiant de l'élément que l'on souhaite modifier, ici "#member_nb" pour la variable en entière et "#member_nb strong" pour isoler uniquement le chiffre.

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 : 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
Tag javascript sur Never Utopia - graphisme, codage et game design EsiE7c4
(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://2img.net/i/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 "https://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 !

Invité

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

{#}html{/#} {#}css{/#} {#}onglets{/#} {#}javascript{/#} {#}jquery{/#} {#}auteur_Sacha73{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Les Amis de la pub


Sacha.

Onyx

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




Système de Boutique avec filtrage 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 articles" et d'une partie "panier".

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

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

Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option d'effacer le contenu du panier ainsi que d'ajouter/retirer un article.

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

PS : Quand je parle d'articles, je parle des trucs à vendre dans la boutique Wink

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 lang="fr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
  <style type="text/css">
    :root {
   
    /*Couleur background principal*/
    --bg-main: #efefef;
   
    /*Couleur background du titre*/
    --bg-top: #808080;
   
    /*Couleur background des articles*/
    --bg-article: #d3d3d3;
   
    /*Couleur background du panier*/
    --bg-panier: #e3e3e3;
   
    /*Couleur du texte*/
    --color-text: #707070;
   
    /*Couleur du texte pale*/
    --color-text-light: #efefef;
    }
   
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    margin: auto;
    max-width: 850px;
    background: var(--bg-main);
    font-size: 1em;
    font-family: 'Times New Roman';
    color: var(--color-text);
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    .boutique_top {
    width: 100%;
    background: var(--bg-top);
    padding: 10px;
    font-size: 2em;
    text-align: center;
    color: var(--color-text-light);
    font-family: 'Dancing Script';
    box-sizing: border-box;
    }
    .boutique_reste {
    display: flex;
    flex-wrap: wrap;
    }
    /*Menu de gauche*/
    #menu {
    text-align: left;
    padding: 5px;
    width: 150px;
    border-right: 1px solid #808080;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
    }
    /*Les boutons de tri*/
    .mbutton button, .mbutton {
    display: block;
      margin: 10px auto 0px auto;
    }
    .mlist {
    margin: 15px 0px 0px 10px;
    }
    /*Titres des catégories*/
    .mlist > span {
    display: inline-block;
    margin-bottom: 5px;
    border-bottom: 1px solid #707070;
    font-size: 1.1em;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
    }
    /*Option des catégories*/
    #menu ul li {
    }
    /*Partie de droite*/
    .middle {
    width: 700px;
    margin: 10px auto;
    text-align: center;
    }
    #contenu_shoponglet_Autre {display: none;}
    .contenu_shoponglet {
    min-height: 450px;
    max-height: 650px;
    overflow: auto;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    }
    .contenu_shoponglet > div {
    margin: 10px;
    }
    /*Bloc qui contient l'article*/
    .article_bloc {
    text-align: center;
    background: var(--bg-article);
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'article*/
    .article_bloc > img:first-child {
    width: 100px;
    height: 100px;
    }
    /*Nom de l'article*/
    .article_name {
    padding: 5px 0px;
    font-size: 1.02em;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'article à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    .bottom {
    margin: auto;
    background: var(--bg-panier);
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    .bottom_top {
    font-size: 1.8em;
    font-family: 'Dancing Script', script;
    text-align: center;
    padding: 10px;
    background: var(--bg-top);
    color: var(--color-text-light);
    }
    /*Panier visible*/
    #vuepanier {
    margin: 10px auto;
    height: 120px;
    padding: 0px 5px;
    overflow: auto;
    }
    /*Bloc objet dans le panier*/
    .article_input {
    margin-bottom: 5px;
    background: var(--bg-article);
    padding: 2px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .articleinsidepanier {
    padding-left: 5px;
    }
    /*Les boutons dans le panier*/
    .article_input button, .input_nb_object {
    display: inline-block;
    margin-right: 2px;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    width: 40px;
    text-align: center;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: 10px auto 5px auto;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    display: inline-block;
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 5px;
    text-align: left;
    text-decoration: none;
    color: #454545;
    }
    .credits:hover {
    color: #000000;
    }
    /* Sur les écrans de moins de 700px (cellulaires) */
    @media (max-width: 700px) {
      #menu {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #808080;
      }
      .middle {
        width: 100%;
      }
      .contenu_shoponglet {
        max-height: none;
      }
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="boutique_top">Boutique Alibaba</div>
    <div class="boutique_reste">

      <!-- DÉBUT DU MENU POUR FILTRER -->
      <div id="menu">
        <div class="mbutton">
          <button id="trier2" type="button" onclick="notriage()">Réinitialiser les filtres</button>
          <button id="trier" type="button" onclick="triage()">Filtrer les Articles</button>
        </div>

        <!-- DÉBUT CATÉGORIE TYPE -->
        <div class="mlist">
          <span>Type</span>
          <ul>
            <!-- 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>
        </div>
        <!-- FIN CATÉGORIE TYPE -->

        <!-- DÉBUT CATÉGORIE PRIX -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- 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_5000" />
              [1000 et 5000]
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Min5000" />
              Plus de 5000
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE PRIX -->
       
        <!-- DÉBUT CATÉGORIE RARETÉ -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- OPTION #1 -->
            <li>
              <input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li>
              <input type="checkbox" name="Peucommun" />
              Peu commun
            </li>
            <!-- OPTION #3 -->
            <li>
              <input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #4 -->
            <li>
              <input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE RARETÉ -->

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

      <div class="middle">
        <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
         
          <!-- DÉBUT ARTICLE -->
          <div class="Arme Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>

          <div class="Arme Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>
          <!-- FIN ARTICLE -->

        </div>
        <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
        </div>
     
        <div class="bottom">
          <div class="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
          <div id="vuepanier">Mon panier est vide.</div>
        </div>
        <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" />
        <a class="credits" href="https://www.never-utopia.com/forum" target="_blank">Never-Utopia</a>
      </div>
    </div>
  </form>
<script type="text/javascript">
  //<!--
  let totalbase = 0;
  $('#total2').html(totalbase);
  let totaltotal = 0;
 
  // Quand on ajoute un article au panier
  $('.ajoutprix').click(function() {
    let prix = parseInt($(this).parent().find('.nbprix:first').html());
    let qt = parseInt($(this).parent().find('input:first').val());
    let nomarticle = $(this).parent().find('.article_name:first').html();
    if ($('#vuepanier').find('.thename:contains("'+nomarticle+'")').length > 0) {
      $('#vuepanier').find('.thename:contains("'+nomarticle+'"):first').closest('.article_input').remove();
    }
    let phrase = "<div class='article_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtarticle(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtarticle(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtarticle(this)'>+</button>" +
      "<span class='articleinsidepanier'><span class='thename'>"+nomarticle+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$</div>";
    if ($('#vuepanier').html() != "Mon panier est vide.") {
      phrase = $('#vuepanier').html() + phrase;
    }
    $('#vuepanier').html(phrase);
    calcultotal();
  });
 
  // Ajouter un article déjà dans le panier
  function addqtarticle(learticle) {
    let articleval = parseInt($(learticle).prev().val());
    $(learticle).prev().val((articleval + 1));
    calcultotal();
  }
 
  // Enlever un article déjà dans le panier
  function removeqtarticle(learticle) {
    let articleval = parseInt($(learticle).next().val());
    $(learticle).next().val((articleval - 1));
    if (articleval == 1) {
      $(learticle).parent().remove();
    }
    calcultotal();
  }
 
  // Supprimer un article déjà dans le panier
  function deleteqtarticle(learticle) {
    $(learticle).parent().remove();
    calcultotal();
  }
 
  // Fonction pour calculer
  function calcultotal() {
    totaltotal = 0;
    $('.article_input').each(function(){
      let leprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      let lenb = parseInt($(this).find('.input_nb_object:first').val());
      totaltotal = totaltotal + (leprix*lenb);
    });
    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() {
    let thetotalprice = totaltotal;
    let lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.article_input').each(function(){
      let theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      let thesupername = $(this).find('.thename:first').html();
      let thequant = parseInt($(this).find('.input_nb_object:first').val());
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  // Nombre de catégories
  let nbtype = $('#menu').find('ul').length;
 
  // Fonction pour effacer le tri
  function notriage() {
    $('#menu').find('input:checked').prop('checked', false);
    $('#contenu_shoponglet_Tout').css('display', 'flex');
    $('#contenu_shoponglet_Autre').css('display', 'none');
  }
 
  // Fonction du tri
  function triage() {
    // On se débarrasse des articles déjà triés
    $('#contenu_shoponglet_Autre').html('');
    // Si aucune case est cochée, on a l'affichage de base
    if ($('#menu').find('input:checked').length < 1) {
      notriage();
    }
    else {
      // Tableau qui va contenir toutes les cases cochées
      let validation = [];
      /// Pour chaque catégorie on regarde s'il y a les cases cochée et on les met dans le tableau par catégorie
      for (i=0; i < nbtype; i++) {
        validation[i] = [];
        let lescases = $('#menu ul').eq(i).find('input:checked');
        for (y=0; y < lescases.length; y++) {
          validation[i][y] = lescases.eq(y).attr('name');
        }
      }
      // Pour chaque objet, on va faire la validation pour voir si on la prend
      let lesarticles = $('#contenu_shoponglet_Tout > div');
      // Pour chaque article
      for (i=0; i < lesarticles.length; i++) {
        let leok = 'No';
        let learticle = lesarticles.eq(i);
        // On regarde chaque catégorie
        for (y=0; y < nbtype; y++) {
          // Si la catégorie a des cases cochées, on autorise si l'article a la  d'une des class
          if (validation[y].length > 0) {
            let leok1 = 'No';
            for (x=0; x < validation[y].length; x++) {
              if (learticle.hasClass(validation[y][x])) {
                leok1 = "Oui";
                x = validation[y].length;
              }
            }
            if (leok1 == 'No') {
              y = nbtype;
              leok = 'No';
            }
            else {
              leok = 'Oui';
            }
          }
        }
        // L'objet fait partie des options, on l'ajoute dans la liste d'objets triés
        if (leok == 'Oui') {
          $('#contenu_shoponglet_Autre').append(learticle.clone(true));
        }
      }
      // On fait disparaître la liste des objets pour apparaître celle des objets triés
      $('#contenu_shoponglet_Tout').css('display', 'none');
      $('#contenu_shoponglet_Autre').css('display', 'flex');
      //S'il y a 0 article à droite après le tri, on dit qu'il y a 0 résultat
      let pasarticle = $('#contenu_shoponglet_Autre').children().length;
      if (pasarticle < 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 (Tag javascript sur Never Utopia - graphisme, codage et game design HAHlEmt), 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é, vous 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.




2. Personnaliser la boutique



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

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'articles qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'articles est la liste des articles disponibles où vous pouvez indiquer le nombre d'articles à acheter et cliquer sur acheter pour que les articles s'ajoutent à votre panier. Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de réinitialiser 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 5 options :
Code:
        <!-- DÉBUT CATÉGORIE RARETÉ -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- OPTION #1 -->
            <li>
              <input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li>
              <input type="checkbox" name="Peucommun" />
              Peu commun
            </li>
            <!-- OPTION #3 -->
            <li>
              <input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #4 -->
            <li>
              <input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE RARETÉ -->


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

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'article 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.

Le "name" ne peut pas contenir d'espace, de guillemet, d'apostrophe, de ponctuation ou de caractères spéciaux.


Donc si je résume rapidement, 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 articles (contenu d'onlglet "Tout"). Vous y trouverez des articles sous cette forme :
Code:
          <div class="Arme Armure Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>


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


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

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

Ici, j'ai 3 classes parce que l'article appartient à 4 options, soit "Arme", "Armure", "Max99" et "Commun". Cela veut dire que l'article sera sélectionné si on coche une ou plusieurs des options : "Arme", "Armure", "Moins de 100$" et "Commun".

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




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 articles 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: 850px; 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://i.imgur.com/SqXjFPo.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://i.imgur.com/lGDeQnZ.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://i.imgur.com/7o3NfUu.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://i.imgur.com/ftCwlW2.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 (Tag javascript sur Never Utopia - graphisme, codage et game design 276545engrenages), 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 (Tag javascript sur Never Utopia - graphisme, codage et game design 276545engrenages), 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://libertia.forumsrpg.com/h25-formulaire-de-bouffe

Et un autre exemple d'un formulaire de présentation :
https://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 :
https://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:






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):
Tag javascript sur Never Utopia - graphisme, codage et game design 1452862271-1
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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452862886-2

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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452863970-3


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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452864228-4Tag javascript sur Never Utopia - graphisme, codage et game design 1452864226-5

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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452866498-6

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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452867524-7

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:
Tag javascript sur Never Utopia - graphisme, codage et game design 1452869267-8Tag javascript sur Never Utopia - graphisme, codage et game design 1452869267-9

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 → https://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 :
Tag javascript sur Never Utopia - graphisme, codage et game design 7LLjg1y

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) / admin (1) / droit de modération quelque part (2)
  • 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)
Tag javascript sur Never Utopia - graphisme, codage et game design 3gbDDqK

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"
Tag javascript sur Never Utopia - graphisme, codage et game design 72sCy0S

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 est celui ci → https://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 : - https://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:


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 :
Tag javascript sur Never Utopia - graphisme, codage et game design FY6TFIP
Je précise que c'est Neva qui a fait mon avatar :ange:


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://2img.net/i/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:


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 : https://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.
Tag javascript sur Never Utopia - graphisme, codage et game design 66RzZUX
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:


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 : https://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a https://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:


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 : https://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



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+


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 12:08