créer un qeel, problème de code js
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
créer un qeel, problème de code js
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
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
Re: créer un qeel, problème de code js
Bonjour ^^
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à.
- 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à.
Re: créer un qeel, problème de code js
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 ?
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 ?
Re: créer un qeel, problème de code js
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.
Re: créer un qeel, problème de code js
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.
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 ?
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 ?
Re: créer un qeel, problème de code js
Pour les variables, nul besoin de les connaître, il y a un moyen de toutes les trouver quelque part !
Variables de template
Le tuto indique même comment isoler la variable qui vous intéresse.
Variables de template
Le tuto indique même comment isoler la variable qui vous intéresse.
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 un peu lu les tutos du forum mais j'y comprend rien.
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 peut être pris le problème à l'envers, jai fait la déco avant de placer les vis pour fixer le reste
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.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
Re: créer un qeel, problème de code js
je vais regarder celà.
Merci bien
Merci bien
Sujets similaires
» Problème code QEEL
» Problème de code QEEL
» Problème code QEEL
» Problème de code dans QEEL
» Problème avec code Stats QEEL
» Problème de code QEEL
» Problème code QEEL
» Problème de code dans QEEL
» Problème avec code Stats QEEL
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum