Problème d'affichage des onglets dans une PA (en iframe avec du javascript)

par Kumquat Ven 27 Mai 2022 - 0:46

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir/Bonjour ! Very Happy

En travaillant sur une PA, je me suis rendue compte que le système d'onglets pour les membres de l'équipe administrative que j'ai installé ne fonctionne pas... Sad

Au passage/click de la souris, les onglets ne bougent pas alors qu'ils sont censés afficher les informations des autres membres... J'utilise un code comprenant du Javascript et un peu de CSS.

J'ai travaillé les codes sur une page HTML de l'un de mes forums test pour l'installer via une balise iframe sur la page d'accueil. C'est peut-être là que pose le problème ? Vu que mon CSS est plein à craquer... Je ne peux pas faire autrement que tout stocker sur une page HTML (code HTML + partie CSS + partie Javascript du changement d'onglets au passage ou click de la souris).

Le code en question concernant la partie d'affichage des onglets est le suivant.

HTML :

Code:: <div class="bloc-staff"> <h2>vos serviteurs</h2> <div class="onglets"> <div class="boutons"> <div class="lab onglet1 visible"> <img class="staff" src="https://64.media.tumblr.com/623ab1bd8794d06a14263097ea8bc54c/6bf11216ff018449-b4/s540x810/1040c27f7463bd0f9b1dd5a536f197d0f63b2a5b.gif" /> </div> <div class="lab onglet2"> <img class="staff" src="https://www.mbtech.fr/13243-large_default/fond-studio-photo-colorama-2m72-x-11m-mineral-grey-51.jpg" /> </div> <div class="lab onglet3"> <img class="staff" src="https://www.mbtech.fr/13243-large_default/fond-studio-photo-colorama-2m72-x-11m-mineral-grey-51.jpg" /> </div> <div class="lab onglet4"> <img class="staff" src="https://www.mbtech.fr/13243-large_default/fond-studio-photo-colorama-2m72-x-11m-mineral-grey-51.jpg" /> </div> <div class="lab onglet5"> <img class="staff" src="https://www.mbtech.fr/13243-large_default/fond-studio-photo-colorama-2m72-x-11m-mineral-grey-51.jpg" /> </div> </div> <div style="border-bottom: 1px solid #4D4D4D; left: 30px; top: 6px; position: relative;margin: 3px; width: 150px;"></div> <div class="interne"> <div class="contenu onglet1 visible"> <h>NOM MEMBRE</h> <div class="staff-infos"> FONDATEUR — <a href="uc">PROFIL</a> • <a href="uc">MP</a> <br/> <strong>MULTI COMPTES :</strong> ?? </div> <div class="titre-staff">DISPONIBLE</div> </div> <div class="contenu onglet2"> <h>???</h> <div class="staff-infos"> STATUT — <a href="uc">PROFIL</a> • <a href="uc">MP</a> <br/> <strong>MULTI COMPTES :</strong> ???, ???, ???, <div class="titre">DISPONIBLE / NON DISPONIBLE</div> </div> </div> <div class="contenu onglet3"> <h>???</h> <div class="staff-infos"> STATUT — <a href="uc">PROFIL</a> • <a href="uc">MP</a> <br/> <strong>MULTI COMPTES :</strong> ???, ???, ???, <div class="titre">DISPONIBLE / NON DISPONIBLE</div> </div> </div> <div class="contenu onglet4"> <h>???</h> <div class="staff-infos"> STATUT — <a href="uc">PROFIL</a> • <a href="uc">MP</a> <br/> <strong>MULTI COMPTES :</strong> ???, ???, ???, <div class="titre">DISPONIBLE / NON DISPONIBLE</div> </div> </div> <div class="contenu onglet5"> <h>???</h> <div class="staff-infos"> STATUT — <a href="uc">PROFIL</a> • <a href="uc">MP</a> <br/> <strong>MULTI COMPTES :</strong> ???, ???, ???, <div class="titre">DISPONIBLE / NON DISPONIBLE</div> </div> </div> </div> </div>

CSS :

Code:: /***** PARTIE DU STAFF ET DES ONGLETS *****/ .bloc-staff { width: 215px; height: 138px; border: 1px solid #333333; box-shadow: 0px 1px 1px #000000; background-color: #282B28; margin: 4px; border-radius: 5px; padding: 4px; text-align: center; } .staff { background-color: #000000; border-radius: 50px; width: 28px; height: 28px; padding: 2px; border: 1px solid #454343; object-fit: cover;} .staff:hover { transition-duration: 1s; border: 1px solid #F8D61A; } .staff { padding-bottom: 2px; padding-top: 2px; margin: -3px; margin-top: -2px; } .staff img { left: 10px; display: inline-block; position: relative; text-align:center; border-radius: 50px; width: 28px; height: 28px; padding: 2px; border: 1px solid #383737; background-color: #000000; object-fit: cover; } .staff img:hover { transition-duration: 1s; } .onglets { display: flex; flex-direction: column; height: 75px; position: relative; text-align: justify; width: 220px; } .onglets .boutons { align-items: center; display: flex; justify-content: center; margin-left: -8px; } .lab { cursor: pointer; margin-left: 8px; } .lab:hover { opacity:0.8; } .contenu { padding: 5px; background-color: #333333; border-radius: 5px; box-sizing: border-box; margin-top: 7px; opacity: 0; color: #C4C4C4; padding: 4px 4px; position: absolute; scrollbar-width: none; text-align: center; visibility: hidden; width: 215px; height: 62px; font-family: 'DM Serif Display'; } .contenu.visible { opacity: 1; visibility: visible; } h { border-bottom: 1px solid #454343; color: #FFC908; text-shadow: 1px 1px 1px #D90000;font-weight: 600; letter-spacing: 2px; margin: 5px; padding: 1px; word-spacing: 3px; font-size: 10px; font-style: italic; } .staff-infos { padding-bottom: 10px; margin: 3px; overflow: auto; height: 17px; font-size: 7px; letter-spacing: 1px; font-weight: lighter; font-family: 'Nunito Sans'; } .staff-infos a { font-size: 7px; color: #F8D61A; letter-spacing: 2px; word-spacing: 4px; text-shadow: 1px 1px 1px #D90000; text-decoration: none;} .staff-infos a:hover { color: #FFFFFF; text-shadow: 1px 1px 1px #D90000; } .staff-infos strong { color: #D90000; }

Javascript :

Code:: $(document).ready(function() { $(".onglets").each(function() { $(".lab").click(function() { $(this) .addClass("visible") .siblings() .removeClass("visible"); if ($(this).hasClass("onglet1")) { $(this) .parent() .next() .find(".onglet1") .addClass("visible") .siblings() .removeClass("visible"); } else if ($(this).hasClass("onglet2")) { $(this) .parent() .next() .find(".onglet2") .addClass("visible") .siblings() .removeClass("visible"); } else if ($(this).hasClass("onglet3")) { $(this) .parent() .next() .find(".onglet3") .addClass("visible") .siblings() .removeClass("visible"); } else if ($(this).hasClass("onglet4")) { $(this) .parent() .next() .find(".onglet4") .addClass("visible") .siblings() .removeClass("visible"); } else { $(this) .parent() .next() .find(".onglet5") .addClass("visible") .siblings() .removeClass("visible"); } }); }); });

Je vous remercie d'avance pour l'aide que vous m'apporterez I love you

Bonne soirée/journée !

par **Chacha** Jeu 2 Juin 2022 - 9:17

Problème d'affichage des onglets dans une PA (en iframe avec du javascript) UmaslZ4

Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

par **Toryudo** Jeu 2 Juin 2022 - 13:50

Bonjour !
Effectivement, c'est là que se trouve une partie du problème. Si vous passez par une page HTML et que vous utilisez du jQuery à l'intérieur (à partir du moment où vous voyez des $ dans votre script donc), vous devez rajouter la ligne suivante pour importer la librairie jQuery :

Code:: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Vous l'ajoutez soit à l'intérieur du <head> (préférable pour votre cas, disons juste avant le CSS), soit juste avant votre script.
Et du coup, il n'y aura plus l'erreur "Uncaught ReferenceError: $ is not defined" dans votre console.

Ensuite, il y aura aussi un problème dans le script lui-même, dont voici une proposition de correction :

Code:: $(document).ready(function() { $(".lab").click(function() { $(".contenu").removeClass("visible"); if ($(this).hasClass("onglet1")) { $(this) .parents('.onglets') .find(".interne .onglet1") .addClass("visible") } else if ($(this).hasClass("onglet2")) { $(this) .parents('.onglets') .find(".interne .onglet2") .addClass("visible") } else if ($(this).hasClass("onglet3")) { $(this) .parents('.onglets') .find(".interne .onglet3") .addClass("visible") } else if ($(this).hasClass("onglet4")) { $(this) .parents('.onglets') .find(".interne .onglet4") .addClass("visible") } else { $(this) .parents('.onglets') .find(".interne .onglet5") .addClass("visible") } }); });

C'est le next() qui ne pointe pas vers la bonne <div>, on passe donc par .parents('.onglets') pour remonter plus haut dans l'arbre, puis on redescend dans .internet.
Ca devrait marcher comme ça !