Tableau à onglets qui fonctionne pas dans la page html

par Hitoki Mar 1 Aoû 2023 - 11:03

Détails techniques

Version du forum : PunBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://deliquescencetest.forumactif.com/

Description du problème

Bonjour à vous !

C'est encore moi !

Cette fois, mon problème concerne un tableau à onglets qui ne fonctionne pas dans ma page html.

J'ai bien mis le code javascript entre les balises script. J'ai mis le html lié aux onglets et le css.

Cependant, le tableau ne veut pas fonctionner.

Je vous donne le lien de la page html où apparait le problème.

https://deliquescencetest.forumactif.com/h2-archanges

Et le codage de la page html !

Code:: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <meta charset="utf-8" /> <title>Archanges</title> <link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Dancing+Script|Vollkorn+SC" rel="stylesheet" /> <script>$(function() { // clic sur un onglet var d = function() { // si l'onglet est déjà actif, ne rien faire if ($(this).is(".selected")) return; // affiche le contenu correspondant et on met l'onglet en sélectionné var a = $(this).closest(".systab"); a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]); $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]) }; // pour chacun des systèmes d'onglets $("div.systab").each(function() { var a = $("> div", this).detach(), c = this, b; // on ajoute le conteneur d'onglet avant ou après ( si s_bottom ) $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>'); $(a).each(function() { b = $(this).children(":first"); b.is("span") ? ( $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove() }); $("> div.contents", this).append(a); b = $(".content:first,.content.selected", this).last(); $(b).addClass("selected").siblings().hide(); $(b).data("tab").addClass("selected") }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d) });</script> <style type="text/css"> body { background: url('https://i.imgur.com/rpuGuXr.jpg') top center no-repeat #6b4841; height: 1391px; width: 2000px; } main { margin-top: 250px; margin-left: -80px; } /* Onglets */ /* .systab .tab => les onglet */ .systab .tab { color: #fff; padding: 2px 10px; margin-right: 2px; cursor: pointer; text-align: center; } /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { text-align: center; } /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ color: #9cb6e7; text-align: center; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { height: 365px; margin-bottom: 15px; } * { margin: 0; padding: 0; } #page-body { color: #fff; text-align: justify; padding: 50px 10px 10px 10px; margin: auto;; position: relative; width: 850px; } a { color: #eeb777 !important; font-variant: small-caps; text-decoration: none !important; } td { text-align: center; width: 180px; } .fond_menu { background: #613839; border-bottom: 1px solid #c3a199; font-variant: small-caps; position: fixed; left: 0; margin-right: 0; top: 0; width: 100%; text-align: center; padding: 20px; z-index: 999; } li {display: inline; margin: 0 10px 0 10px; } .fond margin: auto; width: 800px;} .clear { clear: both; } h1 { color: #eeb777; font-family: 'Dancing Script', cursive !important; font-size: 40px; padding-top: 20px; text-align: center; } } article { margin-bottom: 70px; } a:hover { color: #fff !important; } </style> </head> <body> <main><div id="page-body"><div class="systab"> <div class="selected"> <span class="titre_acc"> Accueil </span> blalalal </div> <div> <span class="titre_acc">Prédéfinis </span> blalblalbla </div> <div> <span class="titre_acc"> Membres à l'honneur et Équipe</span> <span class="titre_acc"> Accueil </span> bllal</div> </div> <article> <h1>Origine</h1> <div class="fond"> <p>Les Archanges ne sont nuls autres que les premières des créatures engendrées par Dieu, bien avant toute autre espèce, sentiente ou non. Façonnés de ses propres mains à l’Aube de la Création, ils forment une caste dirigeante impossible à rejoindre pour tout autre Céleste, figée dès ses premiers instants et légitimée par l’autorité du Père. Aucun autre Archange n’existe en dehors des originels, selon Sa Volonté.</p></div> <br/> <h1>Description</h1> <div class="fond"> <p>Harmonieux, magnifiques et souverains, les Archanges sont au premier rang des plus splendides créations de Dieu. Fidèles à l’apparence de leur premier jour, ces êtres se démarquent dès le premier abord de par leur stature imposante, surpassant les mortels avec aisance. Leurs traits finement ciselés, les couleurs épurées ou éclatantes qu’ils arborent fièrement sur leur peau et leur chevelure, leurs yeux chargés d’une expérience millénaires, conspirent à leur conférer une resplendissance écrasante, surhumaine. Qu’ils se parent d’autorité ou se drapent d’humilité, nul ne saurait être insensible à leur présence tant physique que mystique. Rarement employée depuis la fin de la Guerre Sanglante, leur forme astrale sublime encore leurs atouts, terrifiante d’immensité et de majesté, irradiante de pouvoir. Aucun humain encore vivant ne peut se targuer d’avoir contemplé l’une ou l’autre de leurs apparences, la paix les ayant contraint à s’incarner dans un éphémère consentant lors de leurs séjours ici-bas.</p></div> <br/> <h1>Psychologie</h1><div class="fond"> <p>Ordonnés et intransigeants : voilà bien deux traits communs de caractère retrouvés chez la majorité des éons de Dieu. Modelés par le Créateur pour gouverner, leur esperite se tend principalement sur les devoirs qui leurs incombent : la prospérité du Paradis, la sûreté des entités célestes, le respect dû aux commandements de leur père, l'anéantissement des perfidies de l'Enfer. La troisième option s'avère parfois difficile tant est le nombre de brebis égarées qui existent dans les terres angéliques. Les mener à la résipiscence se révèle de temps à autre, difficile. Voir impossible selon les cas les plus graves. De là, la nécessité du juge divin de trancher et punir le fautif pour préserver les autres, malgré l'opposition des plus sensibles et farouches archanges.</p></div> <br/> <h1 id="hi">Hiérarchie</h1> <div class="fond"> <p>Si les mineurs sont sous la dominance des majeurs tous, sans différenciation, sont sous le commandement de leur Régent : Michael. </p></div> <br/> <h1>Lieu de Vie</h1> <div class="fond"> <p>Créatures d'austérité, les archanges, au contraire de leurs Némésis ne disposent pas d'opulent palais. Chacun possède un appartement spartiate, dans la cité de l’Éternel. </p></div> <br/> <h1>Nourriture</h1><div class="fond"> <p> Les mets de la Terre ne nourrissent pas les éons de Dieu. Tout au plus, ils provoquent en eux, un certain pragmatisme lorsqu'ils doivent imiter les hommes, durant leur séjour dans le monde mortel. Ils trouvent subsistance dans les particules du Paradis et dans leur vertu associée, qu'elle soit pensée ou pratiquée. </p></div> </article> </div></main> </body> </html>

Merci d'avance pour le temps que vous consacriez à ma demande !

par **Lixyr** Mar 1 Aoû 2023 - 11:27

Bonjour cher partenaire,

Il y a une erreur JS. Voici le message :

Uncaught ReferenceError: $ is not defined

Ça signifie que le JavaScript n'est pas interprété, car comme vous n'utilisez pas le haut et le bas de votre forum (toute la partie du header est manquante et surtout l'appel à JQuery), la librairie JQuery n'est pas appelée et ne peut être utilisée. Il faut le faire manuellement.

1) Je vous conseille de mettre tout votre JavaScript dans une page JavaScript (elles sont faites pour ça), comme suit :

Like a Star @ heaven

Panneau d'administration > Modules > Gestion des codes Javascript
Like a Star @ heaven

CREER UN NOUVEAU JAVASCRIPT
Like a Star @ heaven

En titre, vous mettez ce que vous voulez (par exemple page HTML n°...)
Like a Star @ heaven

Vous mettez le contenu du JavaScript :

Code:: $(function() { // clic sur un onglet var d = function() { // si l'onglet est déjà actif, ne rien faire if ($(this).is(".selected")) return; // affiche le contenu correspondant et on met l'onglet en sélectionné var a = $(this).closest(".systab"); a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]); $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]) }; // pour chacun des systèmes d'onglets $("div.systab").each(function() { var a = $("> div", this).detach(), c = this, b; // on ajoute le conteneur d'onglet avant ou après ( si s_bottom ) $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>'); $(a).each(function() { b = $(this).children(":first"); b.is("span") ? ( $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove() }); $("> div.contents", this).append(a); b = $(".content:first,.content.selected", this).last(); $(b).addClass("selected").siblings().hide(); $(b).data("tab").addClass("selected") }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d) });

Vous enregistrez. :enreg:

Vous récupérez l'URL de la page JavaScript, qui se trouve dans la page d'accueil de vos codes JavaScript, dans la colonne URL.

2) Et cette URL, vous l'indiquez dans votre page HTML :

Like a Star @ heaven

Vous remplacez toute cette partie :

<script>$(function() {
// clic sur un onglet
var d = function() {
// si l'onglet est déjà actif, ne rien faire
if ($(this).is(".selected")) return;
// affiche le contenu correspondant et on met l'onglet en sélectionné
var a = $(this).closest(".systab");
a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
$(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
};
// pour chacun des systèmes d'onglets
$("div.systab").each(function() {
var a = $("> div", this).detach(),
c = this,
b;
// on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
$(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
"tabs" : "contents") + '"></div>');
$(a).each(function() {
b = $(this).children(":first");
b.is("span") ? (
$("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
});
$("> div.contents", this).append(a);
b = $(".content:first,.content.selected", this).last();
$(b).addClass("selected").siblings().hide();
$(b).data("tab").addClass("selected")
}).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});</script>

par :

Code:: <script src="ICI_URL_JAVASCRIPT_QUE_VOUS_AVEZ_RECUPEREE"></script>

Vous modifiez bien ICI_URL_JAVASCRIPT_QUE_VOUS_AVEZ_RECUPEREE par votre propre URL JavaScript.

3) Et enfin, on déclare la librairie JQuery :
Like a Star @ heaven

Juste avant cette balise script, ajoutez ceci :

Code:: <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Ce qui vous donne au final :

Code:: <br /><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <meta charset="utf-8" /> <title>Archanges</title> <link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Dancing+Script|Vollkorn+SC" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="ICI_URL_JAVASCRIPT_QUE_VOUS_AVEZ_RECUPEREE"></script> <style type="text/css"> body { background: url('https://i.imgur.com/rpuGuXr.jpg') top center no-repeat #6b4841; height: 1391px; width: 2000px; } main { margin-top: 250px; margin-left: -80px; } /* Onglets */ /* .systab .tab => les onglet */ .systab .tab { color: #fff; padding: 2px 10px; margin-right: 2px; cursor: pointer; text-align: center; } /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { text-align: center; } /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ color: #9cb6e7; text-align: center; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { height: 365px; margin-bottom: 15px; } * { margin: 0; padding: 0; } #page-body { color: #fff; text-align: justify; padding: 50px 10px 10px 10px; margin: auto;; position: relative; width: 850px; } a { color: #eeb777 !important; font-variant: small-caps; text-decoration: none !important; } td { text-align: center; width: 180px; } .fond_menu { background: #613839; border-bottom: 1px solid #c3a199; font-variant: small-caps; position: fixed; left: 0; margin-right: 0; top: 0; width: 100%; text-align: center; padding: 20px; z-index: 999; } li {display: inline; margin: 0 10px 0 10px; } .fond margin: auto; width: 800px;} .clear { clear: both; } h1 { color: #eeb777; font-family: 'Dancing Script', cursive !important; font-size: 40px; padding-top: 20px; text-align: center; } } article { margin-bottom: 70px; } a:hover { color: #fff !important; } </style> </head> <body> <main><div id="page-body"><div class="systab"> <div class="selected"> <span class="titre_acc"> Accueil </span> blalalal </div> <div> <span class="titre_acc">Prédéfinis </span> blalblalbla </div> <div> <span class="titre_acc"> Membres à l'honneur et Équipe</span> <span class="titre_acc"> Accueil </span> bllal</div> </div> <article> <h1>Origine</h1> <div class="fond"> <p>Les Archanges ne sont nuls autres que les premières des créatures engendrées par Dieu, bien avant toute autre espèce, sentiente ou non. Façonnés de ses propres mains à l’Aube de la Création, ils forment une caste dirigeante impossible à rejoindre pour tout autre Céleste, figée dès ses premiers instants et légitimée par l’autorité du Père. Aucun autre Archange n’existe en dehors des originels, selon Sa Volonté.</p></div> <br/> <h1>Description</h1> <div class="fond"> <p>Harmonieux, magnifiques et souverains, les Archanges sont au premier rang des plus splendides créations de Dieu. Fidèles à l’apparence de leur premier jour, ces êtres se démarquent dès le premier abord de par leur stature imposante, surpassant les mortels avec aisance. Leurs traits finement ciselés, les couleurs épurées ou éclatantes qu’ils arborent fièrement sur leur peau et leur chevelure, leurs yeux chargés d’une expérience millénaires, conspirent à leur conférer une resplendissance écrasante, surhumaine. Qu’ils se parent d’autorité ou se drapent d’humilité, nul ne saurait être insensible à leur présence tant physique que mystique. Rarement employée depuis la fin de la Guerre Sanglante, leur forme astrale sublime encore leurs atouts, terrifiante d’immensité et de majesté, irradiante de pouvoir. Aucun humain encore vivant ne peut se targuer d’avoir contemplé l’une ou l’autre de leurs apparences, la paix les ayant contraint à s’incarner dans un éphémère consentant lors de leurs séjours ici-bas.</p></div> <br/> <h1>Psychologie</h1><div class="fond"> <p>Ordonnés et intransigeants : voilà bien deux traits communs de caractère retrouvés chez la majorité des éons de Dieu. Modelés par le Créateur pour gouverner, leur esperite se tend principalement sur les devoirs qui leurs incombent : la prospérité du Paradis, la sûreté des entités célestes, le respect dû aux commandements de leur père, l'anéantissement des perfidies de l'Enfer. La troisième option s'avère parfois difficile tant est le nombre de brebis égarées qui existent dans les terres angéliques. Les mener à la résipiscence se révèle de temps à autre, difficile. Voir impossible selon les cas les plus graves. De là, la nécessité du juge divin de trancher et punir le fautif pour préserver les autres, malgré l'opposition des plus sensibles et farouches archanges.</p></div> <br/> <h1 id="hi">Hiérarchie</h1> <div class="fond"> <p>Si les mineurs sont sous la dominance des majeurs tous, sans différenciation, sont sous le commandement de leur Régent : Michael. </p></div> <br/> <h1>Lieu de Vie</h1> <div class="fond"> <p>Créatures d'austérité, les archanges, au contraire de leurs Némésis ne disposent pas d'opulent palais. Chacun possède un appartement spartiate, dans la cité de l’Éternel. </p></div> <br/> <h1>Nourriture</h1><div class="fond"> <p> Les mets de la Terre ne nourrissent pas les éons de Dieu. Tout au plus, ils provoquent en eux, un certain pragmatisme lorsqu'ils doivent imiter les hommes, durant leur séjour dans le monde mortel. Ils trouvent subsistance dans les particules du Paradis et dans leur vertu associée, qu'elle soit pensée ou pratiquée. </p></div> </article> </div></main> </body> </html>

Attention à bien modifier ICI_URL_JAVASCRIPT_QUE_VOUS_AVEZ_RECUPEREE par l'URL de votre propre JavaScript.

par Hitoki Mar 1 Aoû 2023 - 11:38

Bonjour à vous !

Oh, mais ça fonctionne ! Vraiment vraiment merci !

J'aimerais faire autre chose concernant ces onglets.

Est il possible de mettre les onglets actifs et non actifs, (non le contenu de l'onglet), dans une barre, en top et fixée ?

Ou n'est ce pas possible ?

J'espère que je n'abuse pas de votre précieux temps é_è

Je vous rajouterais dans mes crédits !

par **Lixyr** Mar 1 Aoû 2023 - 22:00

Ce n'est pas nécessaire pour les crédits, je suis là pour aider. ^^

Oui, c'est possible. Qu'est-ce que vous voulez exactement ? Que les onglets soient tout en haut de la page et ne bougent pas, comme une barre de navigation fixe ?

par Hitoki Mer 2 Aoû 2023 - 9:01

Bonjour !

Votre aide à un temps et je préfère créditer ceux qui ont participé au thème de déli Wink

Vi, tout à fait !

Pour le codage du contenu, je m'en sortirais mais le dessus, (les onglets qui permettent d'afficher le contenu) je ne sais pas comment m'y prendre :$

D'avance merci

par **Lixyr** Mer 2 Aoû 2023 - 20:28

Alors, rajoutez ceci dans le CSS de la page HTML, ça devrait fonctionner :

Code:: .systab .tabs { position: fixed; top: 0px; }

Si vous ne voulez pas que la navigation suive l'écran, mettez ceci plutôt :

Code:: .systab .tabs { position: absolute; top: 0px; }

par Hitoki Mer 2 Aoû 2023 - 21:33

J'ai mis votre codage, mais, je rencontre un souci. Les onglets inactif et actifs se rentrent dedans.

J'ai tenté de mettre une margin afin d'éviter que ça soit bloc par dessus bloc.

J'ai mis ça

Code:: /* Onglets */ /* .systab .tab => les onglet */ .systab .tab { color: #fff; padding: 2px 10px; margin: 10px; cursor: pointer; text-align: center; position: fixed; top: 0px; width: 140px; }

Comment dois je m'y prendre pour ça ne le fasse plus ? Et comment puis je faire pour avoir un fond sur toute la largeur ? Wink

Je vous remets le lien !

https://deliquescencetest.forumactif.com/h2-archanges

Encore merci !

Oh, et pour le staff, désolée de m'être trompée de sous fo Wink

edit :

Pour le fond, sur toute la largeur, est ce que si je crée une barre de fond et je positionne les onglets dessus, ça peut fonctionner ?

par **Lixyr** Jeu 3 Aoû 2023 - 18:40

Alors, il y a un soucis car vous avez mis tab au lieu de tabs. Du coup ça prend effet sur les onglets, et non sur le conteneur des onglets.

Vous voulez mettre un fond sur toute la largeur de quoi ? Des onglets ?

par Hitoki Jeu 3 Aoû 2023 - 19:37

Bonsoir !

Ca fonctionne !

Je viens de réussir à mettre un fond, sur le haut de mes onglets !

Ma demande est résolue, grâce à vous !

Encore merci !

par MlleAlys Jeu 3 Aoû 2023 - 19:42

(Bonjour, un petit message un peu hors du sujet pour vous prévenir de vous méfier du rendu de votre page sur des écrans plus grands ou plus petits ^^")

Tableau à onglets qui fonctionne pas dans la page html