QEEL: volet coulissant

[Louzanes]

Rappel du premier message :

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 : https://bikinoutest.forumactif.com/

Description du problème

Bonjour à tous
à la base, j'avais repris ce QEEL de Never Utopia pour les codes permettant de transformer le texte des parties du QEEL. Ensuite la disposition correspondait également à mon désir. Jusque là pas de souci, Je me décide à le modifier  et là, je bute sur os.
Dans le forum au niveau des descriptions du forum, j'ai un volet coulissant. J'ai voulu refaire le même système dans mon QEEL. Je connais le code pour mettre un volet coulissant mais impossible de le paramétrer. Mon souhait serait de mettre un volet coulissant  au niveau des anniversaires (panneau gauche) et au niveau des groupes (panneau droit).
Si dessous, je vous mets  le QEEL de base. Je n'ai rien modifier encore.

Code:

<div align="center">
<table class="qeel_box" width="100%" border="0" cellpadding="0" cellspacing="10">
  <tr>
    <td colspan="3">
      <span class="qeel_title"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
    </td>
  </tr>
  <tr>
    <td colspan="3" class="qeel_box_td qeel_box2">
      <div id="loggedlist"><table>{LOGGED_IN_USER_LIST}</table></div>
      <div class="qeel_line"></div>
      <div id="totalconn"><table>{L_CONNECTED_MEMBERS}</table></div>
      <script type="text/javascript">
        document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Paysans connectés");
        document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/,"Paysans connectés récemment");
        document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 48 dernières heures/,"Paysans connectés récemment");
        document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés au cours des 99 dernières heures/,"Paysans connectés récemment");
      </script>
    </td>
  </tr>
  <tr>
    <td class="qeel_box_td qeel_box3" width="50%">
      <div id="birthtoday"><table>{L_WHOSBIRTHDAY_TODAY}</table></div>
      <div class="qeel_line"></div>
      <div id="birthweek"><table>{L_WHOSBIRTHDAY_WEEK}</table></div>
      <script type="text/javascript">
        document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membre/,"paysan");
        document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membres/,"paysans");
        document.getElementById('birthweek').innerHTML=document.getElementById('birthweek').innerHTML.replace(/membre/,"paysans");
        document.getElementById('birthweek').innerHTML=document.getElementById('birthtweek').innerHTML.replace(/membres/,"paysan");
      </script>
    </td>
    <td class="qeel_box4">
      <img src="http://jeremysquires.smugmug.com/Aquarium-Journal-2009-Updates/i-32MqCBS/2/S/galaxy_rasbora_v2_666%20x%20800-S.jpg" alt=" " />
    </td>
    <td class="qeel_box_td qeel_box5" valign="top" align="center" width="50%">
      <div id="groupe1" class="groupes">
        <a href="#">Groupe 1</a>
      </div>
      <div id="groupe2" class="groupes">
        <a href="#">Groupe 2</a>
      </div>
      <div id="groupe3" class="groupes">
        <a href="#">Groupe 3</a>
      </div>
      <div id="groupe4" class="groupes">
        <a href="#">Groupe 4</a>
      </div>
        <div class="qeel_infobulles">
          Vous pouvez survoler les groupes afin de voir leur description ~
        </div>
        <div class="qeel_infobulles" id="qeel_infobulle1">
          Description du groupe 1
        </div>
        <div class="qeel_infobulles" id="qeel_infobulle2">
          Description du groupe 2
        </div>
        <div class="qeel_infobulles" id="qeel_infobulle3">
          Description du groupe 3
        </div>
        <div class="qeel_infobulles" id="qeel_infobulle4">
          Description du groupe 4
        </div>
    </td>
  </tr>
  <tr>
    <td colspan="3" class="qeel_box_td">
      <span id="recorduser">{RECORD_USERS}</span>.
      <span id="totaluser">{TOTAL_USERS}</span>
      <span id="totalpost">{TOTAL_POSTS}</span>.
      <span id="newuser">{NEWEST_USER}</span>.
      <span id="totalonline">{TOTAL_USERS_ONLINE}</span>
      <div id="chatters_stats">
        <span id="totalchatter">{TOTAL_CHATTERS_ONLINE}</span>
        <span id="chatterlist">{CHATTERS_LIST}</span>
      </div>
      <script type="text/javascript">
        document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateurs en ligne est/,"de paysans en ligne a été");
        document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nous avons un total de");
        document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"paysan inscrit");
        document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"paysans inscrits");
        document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/," qui ont posté");
        document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier paysan qui nous a rejoint est");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Il y a");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"paysans en ligne, soit");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"paysan en ligne, dont");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"Inscrits");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"Inscrit");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"Invités.");
        document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"Invité.");
        document.getElementById('totalchatter').innerHTML=document.getElementById('totalchatter').innerHTML.replace(/utilisateur/,"paysan");
        document.getElementById('totalchatter').innerHTML=document.getElementById('totalchatter').innerHTML.replace(/ChatBox/,"ChatBox : ");
      </script>
    </td>
  </tr>
</table>
</div>

Code:

 /*Fond du qeel*/
    .qeel_box {
      margin-top: 20px;
      background: #ac8b60;
      border: 1px solid #3f2600;
      box-shadow: 0px 0px 10px #3f2600;
      border-radius: 25px;
      text-align: left;
    }
    /*Cellules du qeel*/
    .qeel_box_td {
      background: #83871f;
      border: solid 1px #3f4511;
      border-radius: 15px;
      padding: 10px;
      font-size: 13px;
      font-family: Open Sans;
      color: #0b1906;
      text-align: left;
    }
    /*Ligne pointillée dans les membres connectés et les anniversaires*/
    .qeel_line {
      border-top: 1px #3f4511 dashed;
      height: 0px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    /*Titre du qeel*/
    .qeel_title a {
      display: inline-block;
      margin-left: 10px;
      font-size: 32px;
      font-family: Pacifico;
      color: #291900;
      letter-spacing: 0px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre du qeel au survol*/
    .qeel_title a:hover {
      text-decoration: none!important;
      letter-spacing: 5px;
    }

    /*Bloc des membres connectés*/
    .qeel_box2 {
      padding: 5px;
    }
    /*Bloc des membres connectés actuellement*/
    #loggedlist {
      padding-right: 5px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }
    /*Les membres connectés récemment*/
    #totalconn {
      padding-right: 5px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }

    /*Les anniversaires aujourdhui*/
    #birthtoday {
      height: 133px;
      padding-right: 5px;
      overflow: auto;
      text-align: center;
    }
    /*Les anniversaires au cours des 7 prochains jours*/
    #birthweek {
      height: 134px;
      padding-right: 5px;
      overflow: auto;
      text-align: center;
    }

    /*Image du milieu*/
    .qeel_box4 img {
      width: 250px;
      height: 300px;
      border: solid 1px #3f4511;
      border-radius: 15px;
    }

    /*Bloc des groupes*/
    .qeel_box5 {
      text-align: center;
    }
    /*Groupes*/
    .groupes {
      height: 35px;
      text-align: center;
      text-shadow: 1px 1px 1px #3f4511;
    }
    /*Couleur du groupe 1*/
    #groupe1 a, #groupe1 a:hover {
      color: #6c0000;
    }
    /*Couleur du groupe 2*/
    #groupe2 a, #groupe2 a:hover {
      color: #0ba7b5;
    }
    /*Couleur du groupe 3*/
    #groupe3 a, #groupe3 a:hover {
      color: #fc79f3;
    }
    /*Couleur du groupe 4*/
    #groupe4 a, #groupe4 a:hover {
      color: #c7c0a3;
    }
    /*Description des groupes*/
    .qeel_infobulles {
      height: 130px;
      overflow: auto;
      background: #9a9e33;
      border-radius: 10px;
      text-shadow: none;
      color: #0b1906;
      padding: 5px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Description des groupes sans survol*/
    #qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4 {
      position: relative;
      z-index: 1;
      margin-top: -140px;
      opacity: 0;
      filter: alpha(opacity=0);
      transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
    }
    /*Apparition de la description des groupes*/
    #groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4 {
      opacity: 1;
      filter: alpha(opacity=100);
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
    }

    /*Liste des membres sur la CB*/
    #chatters_stats {
      padding-right: 3px;
      max-height: 5em;
      overflow: auto;
      text-align: justify;
    }

    /*Écriture des aniversaires et des membres connectés récemment*/
    #totalconn td.row1, #birthtoday td.row1 {
      background: transparent;
      padding: 0px;
      display: inline;
    }
    #totalconn td.row1 span.gensmall, #birthtoday td.row1 span.gensmall {
      font-size: 13px;
      padding: 0px;
      font-family: Open Sans;
      color: #0b1906;
    }

    /************************************************** FIN DU QEEL **************************************************/


Code pour volet coulissant dans le  template Index_body

Code:

<div class="voletg">
  <img src="https://i.servimg.com/u/f44/17/06/92/55/porte110.png" /></div>

J'avais commencé à faire ceci

Code:

<div class="voletg">
    <td class="qeel_box_td qeel_box3" width="50%">
      <div id="birthtoday"><table>{L_WHOSBIRTHDAY_TODAY}</table></div>
      <div class="qeel_line"></div>
      <div id="birthweek"><table>{L_WHOSBIRTHDAY_WEEK}</table></div>
      <script type="text/javascript">
        document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membre/,"paysan");
        document.getElementById('birthtoday').innerHTML=document.getElementById('birthtoday').innerHTML.replace(/membres/,"paysans");
        document.getElementById('birthweek').innerHTML=document.getElementById('birthweek').innerHTML.replace(/membre/,"paysans");
        document.getElementById('birthweek').innerHTML=document.getElementById('birthtweek').innerHTML.replace(/membres/,"paysan");
      </script>
    </td></div>

Code:

.voletg{
overflow: hidden;
position: absolute;
z-index: 10;
width: 450px;
height: 550px;
margin-left: -150px;
margin-top: 120px;
}
.voletg img{
  position: absolute;
  transition: 1s;
}
.voletg:hover img{
  margin-left: 450px;
}

Merci pour votre aide

['Christa]

Hello!

Tout est possible, tant que tu as compris mes explications sur le fonctionnement ^^ Je te conseille fortement de les enregistrer quelque part pour servir de référence, puis de faire tes propres expériences. C'est généralement le meilleur moyen d'apprendre, et la raison pour laquelle je prends le temps d'expliquer, pour que tu puisses refaire ça par toi même à l'avenir.

Si tu veux rajouter des éléments à l'intérieur de la zone cachée par les volets existants, comme j'ai dit plus haut, le code est conçu de manière à ce que ça marche quel que soit la taille de la cellule (par contre idéalement c'est bien d'avoir une image d'une taille adaptée ^^).

Si tu veux créer une nouvelle rangée de cellules avec le même effet de volet, et un autre contenu, il te suffira d'adapter mes explications à cette nouvelle situation. Cependant, je confirme que ça risque de compliquer les choses à cause du rond central et de comment on l'a positionné, et je n'ai pas le courage d'expliquer comment faire. Donc à toi de voir, mais pour le coup, tu devras te débrouiller sans moi

Voilà voilà, bon courage!

[Chacha]

Bonjour, Attention, cela fait 7 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]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.