créer un qeel, problème de code js

2 participants

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

Résolu créer un qeel, problème de code js

Message par Chlirr Dim 29 Nov 2015 - 13:49

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testpourbloodthirsty.bb-fr.com/

Description du problème

Bonjour, je ne sais pas si c'est la bonne rubrique ou si le sujet a déjà été demandé (sûrement), mais j'aimerai créer un qeel personnalisé

J'ai trouvé sur le net, un qeel dont la forme me plaisait, j'ai récupéré le code css et html et je l'ai habillé comme je voulais ou presque j'ai un soucis au niveau du qeel.body (un soucis de margin) mais ce n'est pas le sujet ici.

Maintenant, j'ai vu que le qeel utilisait des variables pour appeler notamment le nombre d'utilisateurs, le nombre de messages, j'ai un peu lu les tutos du forum mais j'y comprend rien. Je suis déjà limité en html et css donc vous pensez bien que le javascript. La mise en application pour mon forum me pose problème.

Si c'est possible que quelqu'un me donne un coup de main, je m'explique sur le qeel que je voudrais.
Il y a 3 boutons : derniers connectés, anniversaires et groupes. J'aimerai que lorsque l'on appuie sur le bouton (avec ou sans animation c'est juste une histoire de hover je pense), dans le cadre du milieu cela affiche la partie du qeel correspondante. Mais je ne sais pas comment faire.
J'ai peut être pris le problème à l'envers, jai fait la déco avant de placer les vis pour fixer le reste Mad
J'ai la boite à outils mais quelqu'un pourrait m'aider à mettre tout cela en place, prendre le temps de m'expliquer et que cela fonctionne.
J'aimerai faire le même genre de tableau avec des boutons qui appelle un contenu dans un petit cadre à côté ou en dessous.

Merci de votre aide et je poste les codes :

Html/template index_body :


Code:

<div id="qeel_bloc"><div id="qeel_head"></div>
<div id="qeel_body">
<div id="qeel">
<div class="qeel_onglet1" tabindex="0">Derniers connectés
<div class="qeel_contenu1">
<div class="qeel_contenu">
<table></table></div></div></div>
<div class="qeel_onglet2" tabindex="0">Anniversaires<div class="qeel_contenu2">
<div class="qeel_contenu">
<table>
<tbody>
<tr>
  <td class="row1"><span class="gensmall">Aucun membre ne fête son anniversaire aujourd'hui<br />Aucun membre ne fête son anniversaire dans les 7 prochains jours</span></td></tr></tbody></table></div>
  </div>
  </div>
  <div class="qeel_onglet3" tabindex="0">Groupes<div class="qeel_contenu3">
    <div class="qeel_contenu"> [ <b><a style="color: #000099" class="gensmall" href="/g2-moderateurs">Modérateurs</a></b> ]</div>
    </div>
  </div>
  <div class="qeel_contenu4">
    <div class="qeel_contenu">Nos membres ont posté un total de <strong>17</strong> messages ▬ Nous avons <strong>1</strong> membre enregistré ▬ L'utilisateur enregistré le plus récent est <strong><a href="/u1"><span style="color:#000099"><strong>Fondateur</strong></span></a></strong><br />Le record du nombre d'utilisateurs en ligne est de <strong>19</strong> le Ven 24 Jan - 20:05<br><br>Il y a en tout <strong>8</strong> utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 8 Invités <br>Utilisateurs enregistrés : Aucun<br /></div>
      </div>
      </div>
    </div>
<div id="qeel_foot"></div>
</div>
         
         

Css de qeel
Code:
#qeel_bloc {
    height: 400px;
}

#qeel_head {
    width: 980px;
    margin: auto;
    height: 151px;
    background: transparent url("http://nsa38.casimages.com/img/2015/11/29/151129012848918795.jpg") repeat scroll 0% 0%;
}

#qeel_body {
    width: 980px;
    height: 190px;
    margin: auto;
    background: transparent url("http://nsa38.casimages.com/img/2015/11/29/151129012848611889.jpg") repeat-y scroll 0% 0%;
}

#qeel {
    padding-top: 20px;
    padding-bottom: 20px;
}

.qeel_onglet1 {
    width: 150px;
    height: 20px;
    padding: 4px;
    margin-left: 0px;
    margin-bottom: 10px;
    background: #b2b2b2 none repeat scroll 0% 0%;
    border-top: 3px solid #4c4842;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
    font-weight: bold;
    color: #473D36;
    text-shadow: 1px 1px 0px #F0B27E;
    text-align: center;
    transition: all 1s ease 0s;
}

.qeel_contenu1 {
    position: absolute;
    z-index: 1;
    width: 700px;
    height: 150px;
    overflow: auto;
    margin-left: 200px;
    margin-top: -40px;
    background: #E6E6E6 none repeat scroll 0% 0%;
    border: 1px solid #F5F4EE;
    box-shadow: 0px 0px 4px #38342D;
    transition: all 1s ease 0s;
    opacity: 0;
}

.qeel_contenu {
    padding: 4px;
    color: #74685D;
    font-size: 11px;
    text-shadow: 1px 1px 0px #F7F6F0;
    text-align: justify;
    font-weight: normal;
}

.qeel_onglet2 {
    width: 150px;
    height: 20px;
    padding: 4px;
    margin-left: 0px;
    margin-bottom: 10px;
    background: #b2b2b2 none repeat scroll 0% 0%;
    border-top: 3px solid #4c4842;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
    font-weight: bold;
    color: #BA7B42;
    text-shadow: 1px 1px 0px #D4D3CF;
    text-align: center;
    transition: all 1s ease 0s;
}

.qeel_contenu2 {
    position: absolute;
    z-index: 2;
    width: 700px;
    height: 150px;
    overflow: auto;
    margin-left: 200px;
    margin-top: -80px;
    background: #E6E6E6 none repeat scroll 0% 0%;
    border: 1px solid #F5F4EE;
    box-shadow: 0px 0px 4px #38342D;
    transition: all 1s ease 0s;
    opacity: 0;
}

.qeel_onglet3 {
    width: 150px;
    height: 20px;
    padding: 4px;
    margin-left: 0px;
    background: #b2b2b2 none repeat scroll 0% 0%;
    border-top: 3px solid #4c4842;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
    font-weight: bold;
    color: #D1D1CC;
    text-shadow: 1px 1px 0px #736F68;
    text-align: center;
    transition: all 1s ease 0s;
}

.qeel_contenu3 {
    position: absolute;
    z-index: 3;
    width: 700px;
    height: 150px;
    overflow: auto;
    margin-left: 200px;
    margin-top: -120px;
    background: #E6E6E6 none repeat scroll 0% 0%;
    border: 1px solid #F5F4EE;
    box-shadow: 0px 0px 4px #38342D;
    transition: all 1s ease 0s;
    opacity: 0;
}

.qeel_contenu4 {
    position: absolute;
    z-index: 4;
    width: 700px;
    height: 150px;
    overflow: auto;
    margin-left: 204px;
    margin-top: -129px;
    background: #E6E6E6 none repeat scroll 0% 0%;
    border: 1px solid #F5F4EE;
    box-shadow: 0px 0px 4px #38342D;
}

#qeel_foot {
    width: 980px;
    margin: auto;
    height: 118px;
    background: transparent url("http://nsa38.casimages.com/img/2015/11/29/151129012848526623.jpg") repeat scroll 0% 0%;
}


js pour le qeel
(cetait un test avant de placer le décor, mais si faut le refaire ou renommer des choses je vous écoute)

Code:
function toggle_div(id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
  var div1 = document.getElementById('div1'); // On récupère le div ciblé grâce à l'id
  var div2 = document.getElementById('div2');
  var div3 = document.getElementById('div3');
switch (id) {
    case 'biv1':
      div1.style.display = "block";
      div2.style.display ="none";
      div3.style.display ="none";
        break;
    case 'biv2':
      div1.style.display ="none";
      div2.style.display ="block";
      div3.style.display ="none";
        break;
    case 'biv3':
      div1.style.display ="none";
      div2.style.display ="none";
      div3.style.display ="block";
        break;
}

}


Dernière édition par Chlirr le Lun 30 Nov 2015 - 19:27, édité 1 fois
Chlirr

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

http://btmg.forumactif.com/
Chlirr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Neptunia Dim 29 Nov 2015 - 14:34

Bonjour ^^


Code:
  var div1 = document.getElementById('div1'); // On récupère le div ciblé grâce à l'id
  var div2 = document.getElementById('div2');
  var div3 = document.getElementById('div3');

Votre javascript récupère le contenu de trois div ayant pour identifiants div1, div2 et div3. Autrement dit, votre javascript ne récupère rien, puisque le code html ne contient aucune div sous ces noms là.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Chlirr Dim 29 Nov 2015 - 14:38

Oui je sais mais je ne sais pas quoi mettre pour remplacer

je remplace div1 par qeel_onglet1 puisque c'est censé être le bouton?
Et les variables du qeel je les place ou dans le java ou dans le html ?
Chlirr

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

http://btmg.forumactif.com/
Chlirr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Neptunia Dim 29 Nov 2015 - 15:22

Chlirr a écrit:Oui je sais mais je ne sais pas quoi mettre pour remplacer

je remplace div1 par qeel_onglet1 puisque c'est censé être le bouton?
Et les variables du qeel je les place ou dans le java ou dans le html ?

Pour le remplacement des id, le mieux serait de demander là où vous vous êtes procuré le code.

Quant aux variables de template, leur place est dans un template et pas ailleurs.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Chlirr Dim 29 Nov 2015 - 18:29

Tu parles du javascript c'est un ami qui me l'a fait mais il a pas voulu me faire la liaison entre le code html et le js. Sad

Faut les connaitre les variables... . Lesquelles sont les bonnes ? C'est un casse tête pour moi.
Ou alors est ce que je peux faire les boutons en hmtl et ne pas utiliser de java pour afficher dans le cadre ?
Chlirr

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

http://btmg.forumactif.com/
Chlirr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Neptunia Dim 29 Nov 2015 - 19:56

Pour les variables, nul besoin de les connaître, il y a un moyen de toutes les trouver quelque part !

Tuto Variables de template
Le tuto indique même comment isoler la variable qui vous intéresse.

Chlirr a écrit: j'ai un peu lu les tutos du forum mais j'y comprend rien.
Là, va falloir être plus précise dans ce que vous ne comprenez pas parce que ce forumest là pour vous aider, mais pas pour vous assister et faire tout à votre place.

Chlirr a écrit:J'ai peut être pris le problème à l'envers, jai fait la déco avant de placer les vis pour fixer le reste
Oui c'est clair, avoir le code html c'est bien, mais savoir ce qu'on va mettre dedans c'est mieux non ? Surtout avec un ami qui vous fournit le HTML et le javascript mais en prenant soin que son aide ne vous serve à rien.

Chlirr a écrit:J'ai trouvé sur le net, un qeel dont la forme me plaisait, j'ai récupéré le code css et html et je l'ai habillé comme je voulais
Le QEEL dont vous voulez vous inspirer provient de Never Utopia. Là bas vous trouverez soit un tutoriel (ou un libre-service) soit mieux encore un auteur qui sera capable de vous fournir HTML et javascript qui fonctionnent ensemble.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: créer un qeel, problème de code js

Message par Chlirr Lun 30 Nov 2015 - 19:27

je vais regarder celà.

Merci bien Very Happy
Chlirr

Chlirr
***

Messages : 106
Inscrit(e) le : 03/06/2015

http://btmg.forumactif.com/
Chlirr 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