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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message 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 !


Dernière édition par Kumquat le Jeu 2 Juin 2022 - 19:50, édité 1 fois
Kumquat

Kumquat
Nouveau membre

Féminin
Messages : 20
Inscrit(e) le : 24/05/2020

Voir le profil de l'utilisateur https://mighty-odds-rpg.forumactif.com/
Kumquat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage des onglets dans une PA (en iframe avec du javascript)

Message par Chacha Jeu 2 Juin 2022 - 9:17

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

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 66962
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème d'affichage des onglets dans une PA (en iframe avec du javascript)

Message 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 !
Toryudo

Toryudo
****

Masculin
Messages : 375
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème d'affichage des onglets dans une PA (en iframe avec du javascript)

Message par Kumquat Jeu 2 Juin 2022 - 19:49

Bonsoir !

Oh là là, merci BEAUCOUP ! Je m'arrachais les cheveux I love you

Merci énormément pour votre aide ! Tout marche à la perfection maintenant Sourire2

Le problème est donc résolu et le sujet peut être archivé Very Happy

résolu
Kumquat

Kumquat
Nouveau membre

Féminin
Messages : 20
Inscrit(e) le : 24/05/2020

Voir le profil de l'utilisateur https://mighty-odds-rpg.forumactif.com/
Kumquat a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum