Switcheroo et avatar du dernier inscrit en conflit ?

[long way home]

Bonjour à tous.tes,

Voilà, j'ai voulu installer dans le QEEL l'avatar du dernier inscrit, et si sur la pratique, il apparaît bien, il fait, par contre, disparaître le Switcheroo sur le forum (tutoriel de Monomer). J'avais déjà eu le souci auparavant et avait choisi de ne pas afficher l'avatar dans le QEEL, mais j'aimerais surtout régler ce "conflit" de manière à ce que l'on puisse tout avoir.

Je ne trouve pas du tout d'où vient le souci, j'imagine d'un conflit dans le JS mais peut-être que c'est moi qui ai fait une boulette dans les codes et les templates. Je vous mets ce que j'ai, n'hésitez pas à me dire s'il vous manque des éléments. Les codes et css sont brouillons, je tâtonne la majeure partie du temps.

Je précise que pour les deux JS, les coches sont appliquées sur "page d'accueil".

JAVASCRIPT DU SWITCHEROO :

Code:

(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
        exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();

JAVASCRIPT DE L'AVATAR DANS LE QEEL

Code:

$(function(){
$.get($("#yosh a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_yosh").html(a);})
});

PARTIE QEEL DU TEMPLATE INDEX_BODY

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="3" height="45">
                  <!-- BEGIN switch_viewonline_link -->
                  <div class="secondarytitle"><center><img src="https://i.imgur.com/SMF9iLU.png" style="float:center;"/></center></div>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
                  <div class="secondarytitle" align="center"><img src="https://i.imgur.com/SMF9iLU.png" style="float:center;"/></div>
      <!-- END switch_viewonline_nolink -->
      </td>
                  </tr></table>
<div><table><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g4-karen";><skills>• Skills •</skills></a></div></td><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g5-jake";><victoria>• Victoria •</victoria></a></div></td><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g3-jimmy";><quentin>• Quentin •</quentin></a></div></td><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g6-rachel";><taylor>• Taylor •</taylor></a></div></td><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g7-dan";><keith>• Keith •</keith></a></div></td><td><div class="blocgr"><a href="https://peoplealwaysleave.forumactif.com/g8-pnj";><sam>• Samantha •</sam></a></div></td></table></div>

  <div><table>
    <td class="qeel2"><table><tr><td><div class="blocgr2" align="center"><span id="matt">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"habitants");</script><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"habitant");</script><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"");</script></div></td>
                    <td><div class="blocgr2" align="center"><span id="kumao">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Nos membres ont posté un total de/,"");</script></div>
      </td></tr></table>
      <center><a1>les membres</a1> <a2>en ligne</a2></center>
      <div class="bloccop"><span id="ilso">{LOGGED_IN_USER_LIST}</span><script type="text/javascript">document.getElementById('ilso').innerHTML=document.getElementById('ilso').innerHTML.replace(/Utilisateurs enregistrés : /,"");</script>
      </div>
      <table class="qeelst">
        <tr><span id="delf"><div class="bloc6">{TOTAL_USERS_ONLINE}</div></span>
                      <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Il y a en tout/," En ce moment, et malgré les températures hivernales, quelques courageux bravent le froid et sont de sortie à Tree Hill. Si t'es chanceux, tu pourras croiser ");</script>
          <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne :/," rêveur qui se promène encore.<br/>");</script>
          <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne :/," rêveurs qui se promènent encore.<br/>");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"habitant");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"habitants");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"touriste et");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"touristes et");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"voyageur");</script>
        <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"voyageurs.");</script></tr>
      </table>
      </td>
<td><table class="qeel1"><center><a1>ils sont passés</a1> <a2>sur le forum</a2></center</div>
        <td><div class="quarantehuit"><table id="bloc48h" valign="top"><span id="coin">{L_CONNECTED_MEMBERS}</span><script type="text/javascript">document.getElementById('coin').innerHTML=document.getElementById('coin').innerHTML.replace(/Membres connectés au cours des 24 dernières heures : /,"");</script></table></div></td>
        <br/><center><div class="bloc7"><table><td><span id="avatar_yosh"></span></td><td class="lastus"><span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"<a1>On souhaite la</a1> <a2>bienvenue à</a2><br/>");</script></td></table></div></center>
      </table></td>
  </table></div>
  
  <!-- END disable_viewonline -->

SCRIPT SWITCHEROO AJOUTÉE A OVERALL_FOOTER_END :

Code:

<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>

<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>

<script>
(function() {
      new Switcheroo('#switcheroo');
})();
</script>

CSS concerné :  

Code:

/*QEEL*/
.qeel1 {width:390px;margin-left:10px; margin-top:-15px;}
.qeel2 {width:390px; margin-left:10px;}
.blocgr {width: 130px; height: 20px; background-color:#fff; border-radius:10px; text-align : center;font-family: 'Poppins'; font-style:italic; font-size:12px; line-height:20px;text-shadow: 1px 1px 0px #ccc;}
.blocgr2 {width: 195px; height: 20px; background-image:url('https://i.imgur.com/nOGzveR.png'); border-radius:10px; text-align : center;font-family: 'Poppins'; font-style:italic; font-size:12px; line-height:20px;text-shadow: 1px 1px 0px #ccc;margin-bottom:10px;}

.bloccop {width: 390px; height: 90px; background-color:#fff; overflow:hidden;border-radius:10px; margin-left:5px; text-align : justify;font-family: 'Poppins'; font-size:11px; line-height:14px; color:#666563;padding:3px; margin-bottom:10px;}
.bloc6 {width: 390px; height: 66px; background-color:#fff; overflow:hidden;border-radius:10px; margin-left:5px; text-align : justify;font-family: 'Poppins'; font-size:11px; line-height:14px; color:#666563;padding:3px;margin-top:10px;}
.lastus{text-align:center;height:80px; width:310px;margin-left:40px;}
a1 {font-family: 'Poppins'; font-style:bold; font-size:16px; text-transform:uppercase;color:#CC562C; line-height:30px;text-shadow: 2px 2px 0px #fff;}
a2 {margin-left:0px;font-family: 'Poppins'; font-style:italic; text-transform:uppercase;font-size:16px; color:#8da889; line-height:30px;text-shadow: 2px 2px 0px #fff;}

#avatar_yosh img{margin-left:15px;width:51px;height:51px;object-fit:cover; border:4px solid #fff;border-radius: 50px;}
#yosh a {font-family: 'Poppins'; font-style:bold; font-size:12px; color:#756d66;text-align:center; margin-top:0px;text-shadow: 1px 0 0 #fff;}
.cadrelast{text-align:center;height:80px; width:240px; padding:4px;line-height:11px;}
.cadreEL {font-family: 'Poppins'; font-size:11px; text-align:justify;height:40px; background-color:#eae6e5;width:250px; overflow:auto; padding:4px;line-height:14px; font-size:11px; }
.enligne {font-family: 'Poppins'; font-size:11px;text-align:justify!important!;}
.cadre48h {margin-top:3px;text-align:justify;height:160px; width:250px; overflow:auto; padding:4px;line-height:11px; font-family: 'Poppins'; font-size:11px; align:top;}
#totalconn {font-size: 11px; text-align:justify; margin-top: 4px;height:150px; width:240px; overflow:auto}
#totalconn a {font-family: 'Poppins'; font-size:11px; text-align:justify!important!;}
#logged_list a {font-family: 'Poppins'; font-size:11px;text-align:justify!important!;line-height:12px;}
#lastconn a{font-family: 'Poppins'; font-size:11px;text-align:justify!important!;line-height:12px;}
#lastconn {font-family: 'Poppins'; font-size:11px; text-align:justify!important!;line-height:12px;}

.qeelst {width: 265px; height: 25px; margin-top:0px;}
.insc{margin-top:0px;width: 130px; height: 20px; padding: 3px; font-family: 'Poppins';letter-spacing:1px; color:#fff;font-size:11px; padding:2px; text-transform: lowercase;text-shadow: 0 0 0px #f8f8f8; background-image:linear-gradient(55deg,#e1d6d6, #c8dede, #c8dede, #e1d6d6);text-align:center;line-height:20px; box-shadow: 0px 1px 1px #f8f8f8;}
.loggedin {margin-top:15px;text-align:justify;overflow:auto;width: 274px; height:60px; padding: 3px; font-weight:100;background-color:#fff;letter-spacing:0px; font-size: 11px;font-family: 'Poppins'; line-height:14px; color:#666563; text-shadow: 0 0 1px #85859d inset;box-shadow: 0px 3px 3px ##18161A;}
onli{text-align:center;margin-left:100px;text-transform:lowercase;margin-top:-3px; border-radius:3px; font-family: 'Poppins';color:#fff;letter-spacing:1px; font-size:11px; background-image:linear-gradient(55deg,#e1d6d6, #c8dede, #c8dede, #e1d6d6); padding:1px;}
groups{font-family: 'Poppins';text-align:center;font-size: 12px; text-shadow: 0 0 1px #85859d;}
skills{font-family: 'Poppins';font-style:italic; color:#899b74;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
victoria{font-family: 'Poppins'; font-style:italic; color:#896355;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
quentin{font-family: 'Poppins'; font-style:italic; color:#883b55;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
taylor{font-family: 'Poppins'; font-style:italic; color:#ec875e;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
keith{font-family: 'Poppins'; font-style:italic; color:#a53828;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
sam{font-family: 'Poppins'; font-style:italic; color:#aeb96f;font-size:12px; line-height:20px;padding:2px; text-transform: lowercase;text-shadow: 1px 1px 1px ##18161A;}
.blocgroups{width: 210px; height: 65px; margin-top:5px;}
.bienv{margin-left:30px;width: 130px; height: 70px; padding: 3px; font-weight:100;background-color:#fff; letter-spacing:-1px; font-size: 20px;font-family: 'Poppins'; text-align:center;line-height:20px;box-shadow: 0px 3px 3px #767676;}
welc{margin-bottom:10px; text-align:center; font-family: 'Poppins';letter-spacing:1px; color:#e07335;font-size:12px; line-height:20px;font-weight:400; padding:2px; text-transform: lowercase;text-shadow: 0 0 2px #ccc;}
#bloc48h{width: 370px; height: 120px; background-color:#fff; overflow:hidden;border-radius:10px; margin-left:10px; text-align : justify;font-family: 'Poppins'; font-size:11px !important!; line-height:14px; color:#000000;padding:3px;}
#bloc48h td.row1 {
  background-color: transparent; height:110px;font-size:11px !important!;}
.quarantehuit {font-family: 'Poppins'; font-size:11px !important!;margin-top:0px;height:120px; overflow:auto; margin-left:-10px;}
.bloc7 {margin-top:-10px;margin-left:40px;}

+

Code:

.switcheroo {
  /* switcheroo barre et position */position: fixed;z-index: 999;margin-left:-300px; top: 17;bottom: 0;color: var(--color-text);background-color: transparent;font-size: 11px;font-family:'Poppins';}
.switcheroo, .switcheroo *, .switcheroo *:before, .switcheroo *:after {box-sizing: border-box;}
.switcheroo__squircles {
  /* liste flex des comptes et boutons */display: flex;flex-direction: column;min-height: 100vh;margin: 0;margin-top:23px;padding: 0;list-style: none;background-color: var(--color-body);padding: var(--gap-size);gap: var(--gap-size);}
.switcheroo__squircle {
  /* compte ou bouton */
  display: flex;align-items: center;justify-content: center;background-color: var(--color-body);width: 48px;height: 48px;padding:3px;border-radius: 50%;cursor: pointer;position: relative;transition: border-radius 128ms var(--ease);}
.switcheroo__squircle--button {transition: border-radius 128ms var(--ease);color: #ccc; background-color:#8d8d8d;}
.switcheroo__squircle--button:hover {color: #000000;background-color: #e5e5e5;}
.switcheroo__squircle:hover {border-radius: 50%;}
.switcheroo__squircle:hover .switcheroo__popper {
  /* tooltip hover */
  opacity: 1;transform: translateY(-50%) scale(1);}
.switcheroo__squircle:hover:before {
  /* puce hover */
  opacity: 1;transform: translate(-100%, -50%) scale(0.5);}
.switcheroo__squircle:hover .switcheroo__delete {
  /* delete button */
  opacity: 1;transform: scale(1);}
.switcheroo__squircle:before {
  /* puce */
  content: "";width: 100%;height: 100%;display: block;background-color: var(--color-pill);position: absolute;border-radius: 4px;top: 50%;transform: translate(-100%, -50%) scale(0);transition: transform 128ms, opacity 64ms;pointer-events: none;opacity: 0;}
.switcheroo__squircle.active {
  /* puce active */
  border-radius: 50%;cursor: default;}
.switcheroo__squircle.active:before {opacity: 1;transform: translate(-85%, -50%) scale(0.2);border-radius: 50%;}
.switcheroo__link {display: block;width: 100%;height: 100%;border-radius: inherit;display: flex;align-items: center;justify-content: center;}
.switcheroo__link:hover {text-decoration: none;}
.switcheroo__popper {
  /* tooltip */background-color: transparent;padding: 0.68rem 1rem;position: absolute;left: 155%;top: 50%;transform-origin: left;transform: translateY(-50%) scale(0.98);width: -webkit-max-content;width: max-content;border-radius: 4px;z-index: 0;opacity: 0;transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);pointer-events: none;color: #fff;display:none;}
.switcheroo__popper:before {
  /* tooltip arrow */
  content: "";position: absolute;width: 24px;height: 24px;background-color: var(--color-tooltip);left: -2px;top: 50%;transform: translateY(-50%) rotate(-45deg);z-index: -1;}
.switcheroo__avatar {
  /* avatars */
  position: relative;width: 100%;height: 100%;border-radius: inherit;overflow: hidden;}
.switcheroo__avatar img {width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.switcheroo__logo {
  /* button logo */}
.switcheroo__logo img {
  /* logo image taille */
  width: 32px;}
.switcheroo__logo:hover {
  /* logo hover */
  background-color: var(--color-accent);}
.switcheroo__delete {
  /* button delete */
  display: flex;align-items: center;justify-content: center;position: absolute;width: 16px;height: 16px;top: -2px;right: -2px;border-radius: 50%;background-color: var(--color-delete);transform: scale(0);opacity: 1;transition: transform 128ms var(--ease), opacity 64ms var(--ease);cursor: pointer;}
.switcheroo__delete i {transform: scale(0.5);pointer-events: none;}
.switcheroo__divider {
  /* petit divider apres logo */
  width: 100%;height: 2px;background-color: var(--color-pill);border-radius: 1px;opacity: 0.06;transform: scale(0.8);}
.switcheroo__form {
  /* formulaire de connexion */
  padding: 48px;}
.switcheroo__form-row {display: flex;flex-flow: column;align-items: flex-start;margin-bottom: 16px;}
.switcheroo__form-label {
  /* titre du champs */margin-bottom: 8px;font-size: 11px;font-family: 'Quicksand', sans-serif;text-transform: uppercase;color: #f79455 !important;}
.switcheroo__form-input {
  /* champs du formulaire */padding: 6px !important;font-size: 10px !important;font-family: 'Quicksand', sans-serif;border-radius: 4px !important;width: 100% !important;border-bottom: 2px solid var(--color-accent) !important;background-color: #fff !important;color: #000000 !important;cursor: text !important;}
.switcheroo__form-button {
  /* bouton pour envoyer */border-radius: 8px;padding: 8px;border: none;outline: none;box-shadow: none;text-transform: uppercase;font-size: 11px;align-self: flex-end;color: #fff;background-color: #815744;}
.monomer-overlay {position: fixed;z-index: 999;top: 0;left: 0;opacity: 0;width: 100%;height: 100%;transition: 0.2s opacity ease;background: rgba(0, 0, 0, 0.6);}
.monomer-modal {position: fixed;z-index: 999;top: 50%;left: 50%;opacity: 0;width: 94%;padding: 24px 20px;transition: 0.2s opacity ease;transform: translate(-50%, -50%);border-radius: 2px;background: var(--color-squircle);color: var(--color-text);}
.monomer-modal.monomer-open.monomer-anchored {top: 20px;transform: translate(-50%, 0);}
.monomer-modal.monomer-open {opacity: 1;}
.monomer-overlay.monomer-open { opacity: 1;}
/* Close Button */
.monomer-close {font-family: Helvetica, Arial, sans-serif;font-size: 20px;font-weight: 700;line-height: 24px;text-align: center;width: 24px;height: 24px;position: absolute;top: -5px; right: -5px;padding: 5px;cursor: pointer;color: #fff;border: 0;outline: none; background: var(--color-delete);border-radius: 50%; padding: 0;}
.monomer-close:hover {opacity: 0.8;}

J'espère vous avoir donné tous les éléments nécessaires pour essayer de solutionner mon problème, et vous remercie par avance.

Bonne soirée et ma reconnaissance à ceux qui passeront du temps sur mon souci.

[Toryudo]

Bonjour !

Alors, en tant qu'invité, je vois bien les deux, le Switcheroo et l'avatar du dernier inscrit.
Seulement, le Switcheroo est placé très loin en dehors de l'écran à cause du CSS margin-left que vous avez placé sur l'élément .switcheroo :

Code:

.switcheroo {
  position: fixed;
  z-index: 999;
  margin-left: -300px;
  top: 17px;
  bottom: 0;
  color: var(--color-text);
  background-color: transparent;
  font-size: 11px;
  font-family: 'Poppins';
}

Si vous enlevez le margin-left: -300px;, le Switcheroo sera à nouveau visible, de retour sur l'écran.

PS : vous avez deux fois le code suivant, à la fois dans un Template et dans un JavaScript :

Code:

new Switcheroo('#switcheroo');

Techniquement, il ne faut en garder qu'un (et j'ai déjà vu ça plusieurs fois, je ne sais pas si le tuto Switcheroo est clair à ce propos).
Je pense que vous devriez récupérer le code du Javascript :

Code:

(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        explore: false, /* permet d'afficher un lien vers la liste des membres "à la discord" style */
        exploreIcon: '<i class="material-icons">group</i>', /* accepte html, icone du lien vers la liste des membres */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();

Et vous devriez le mettre dans le Template, à la place du code :

Code:

(function() {
      new Switcheroo('#switcheroo');
})();

Comme ça, un JavaScript de moins et une erreur de moins également, d'une pierre deux coups !

[long way home]

Ohlala merci beaucoup pour cette réponse si rapide (bien plus que la mienne, grosse semaine au boulot...)

Tout est donc réparé, et je vais regarder pour les templates, en effet !

Les explications sont parfaites, merci à nouveau d'avoir pris le temps de regarder mes lignes et mes lignes de codes, pour un margin oublié que j'avais forcé après un premier bug.

C'est donc résolu, mille mercis !