Javascript = Onglets intérefrences ?!

Question

Bonjour,

Je suis actuellement en train de faire des onglets en javascript pour mon forum de test cependant j'ai un gros problèmes. 
Voilà la forum

Comme vous pouvez le constater quand on passe d'un onglet à l'autre dans la première ligne les onglets du bas disparaisse et pleins d'autres bugs apparaissent aussi...
Pourtant au départ quand je n'avais fait que les onglets du haut tout fonctionnait... Quelqu'un aurait une solution svp ?
Je précise que je ne connais vraiment pas grand chose en Javascript et que ce système d'onglets à été fait en trouvant des parties du code sur le net puis modifier à ma guise.

Voilà mon template :

Onglets du bas :
{JAVASCRIPT}


//


.onglet
{
display:inline-block;
margin-left:30px;
margin-right:3px;
padding:3px;
cursor:pointer;
}
.onglet_0
{
background:#F8F8F8;
margin-bottom:1px;
}
.onglet_1
{
background:#D5E0FF;
background-image:url(http://garena.power-heberg.com/images/v4/fond2.png);
bakground-repeat:repeat-x;
padding:3px;
padding-left:4px;
padding-right:4px;
padding-bottom:4px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
border: none;
}

.onglet_0:first-letter {
color: red;
}

.onglet:first-letter {
color: red;
}

.contenu_onglet
{
background-color:#D5E0FF;
margin-top:-1px;
padding:5px;
display:none;
margin-bottom:0px;
}

.contenu_onglet1
{
background-color:#D5E0FF;
margin-top:-1px;
padding:0px;
display:none;
margin-bottom:0px;
}

ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}

.blanc {
background-color:#F8F8F8;
padding:5px;
margin-top:10px;
margin-bottom:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

h4 {
margin-top:-1px;
margin-bottom:4px;
background-image:url(http://garena.power-heberg.com/images/v4/fond3.png);
repeat:repeat-x;
font-size:7px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
border: none;
}

h5 {
margin-top:0px;
margin-bottom:4px;
background-image:url(http://garena.power-heberg.com/images/v4/fond1.png);
repeat:repeat-x;
font-size:7px;
    -moz-border-radius: 10px;
    -webkit-border-radius:1 0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
border: none;
}



----

{message_admin_index.message_admin_titre.MES_TITRE},



----

{message_admin_index.message_admin_txt.MES_TXT},







{L_USERNAME}: 
{L_PASSWORD}: 
{S_HIDDEN_FIELDS}

{L_AUTO_LOGIN} 




{CHATBOX_TOP}
{BOARD_INDEX}




{L_USERNAME}:

{L_PASSWORD}:

{S_HIDDEN_FIELDS}

{L_AUTO_LOGIN}





{CHATBOX_BOTTOM}







Qui est en ligne ?
Statistiques
Staff




 






,

{TOTAL_POSTS}
document.getElementById('blabla').innerHTML=document.getElementById
('blabla').innerHTML.replace(/Nos membres ont posté un total de/,"Nous avons un total de");document.getElementById
('blabla').innerHTML=document.getElementById('blabla').innerHTML.
replace(/messages/,"messages postés sur le forum");document.getElementById

{TOTAL_USERS}
document.getElementById('user').innerHTML=document.getElementById
('user').innerHTML.replace(/Nous avons/,"Notre communauté compte actuellement");document.getElementById
('user').innerHTML=document.getElementById('miaou').innerHTML.
replace(/membres enregistrés/,"membres");document.getElementById

{NEWEST_USER}document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier membre à avoir rejoins G-Arena est");,

----

{LOGGED_IN_USER_LIST}document.getElementById('en ligne').innerHTML=document.getElementById('en ligne').innerHTML.replace(/Utilisateurs enregistrés/,"Les membres en ligne en ce moment sont");
,

{L_CONNECTED_MEMBERS}
document.getElementById('24').innerHTML=document.getElementById('24').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/,\"Les membres qui étaient connectés ces dernières 24 heures sont\");


{L_WHOSBIRTHDAY_TODAY}

{L_WHOSBIRTHDAY_WEEK}

----

{LEGEND} : {GROUP_LEGEND}



,
{L_NEW_POSTS},
,
,
{L_NO_NEW_POSTS},
,
,
{L_FORUM_LOCKED}
















 



//


{AUTO_DST}

Onglets du haut :


//


.onglet
{
display:inline-block;
margin-left:30px;
margin-right:3px;
padding:3px;
cursor:pointer;
}
.onglet_0
{
background:#F8F8F8;
margin-bottom:1px;
}
.onglet_1
{
background:#D5E0FF;
background-image:url(http://garena.power-heberg.com/images/v4/fond2.png);
bakground-repeat:repeat-x;
padding:3px;
padding-left:4px;
padding-right:4px;
padding-bottom:4px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
border: none;
}

.onglet_0:first-letter {
color: red;
}

.onglet:first-letter {
color: red;
}

.contenu_onglet
{
background-color:#D5E0FF;
margin-top:-1px;
padding:5px;
display:none;
margin-bottom:0px;
}

.contenu_onglet1
{
background-color:#D5E0FF;
margin-top:-1px;
padding:0px;
display:none;
margin-bottom:0px;
}

ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}

.blanc {
background-color:#F8F8F8;
padding:5px;
margin-top:10px;
margin-bottom:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

h4 {
margin-top:-1px;
margin-bottom:4px;
background-image:url(http://garena.power-heberg.com/images/v4/fond3.png);
repeat:repeat-x;
font-size:7px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
border: none;
}

h5 {
margin-top:0px;
margin-bottom:4px;
background-image:url(http://garena.power-heberg.com/images/v4/fond1.png);
repeat:repeat-x;
font-size:7px;
    -moz-border-radius: 10px;
    -webkit-border-radius:1 0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
border: none;
}







Forums
Arènes
Règlements




 





{LAST_VISIT_DATE}

{CURRENT_TIME}



http://forum.g-arena.fr/la-g-arena-cup-f11/


   


 





















 



//



Merci d'avance ;)

PetoleTeam · Answer

Bonjour,
de temps à autre on se plaint de ne rien avoir et là on en a trop => pas tout lu le code...juste fait un tour sur le lien.

Le constat est que les onglets ne disparaissent pas mais sont décalés vers le bas.

pourquoi ne pas mettre tout ce qui doit apparaître dans le même conteneur, et sous la deuxième ligne de préférence, de la sorte tes onglets resteraient groupés...

;O)

Jobs68 · Answer

je veux 2 blocs bien distincts c est pour ça que je peux pas tout mettre ensemble... Et le problème c'est que si je met du contenu dans les onglets du bas mis à part le 1er bah ya rien qui apparait...

Merci de ton aide ;)

PetoleTeam · Answer

j'aurais tendance à dire mauvaise conception...
Il te reste une solution c'est d'avoir la possibilité d'étendre ou de contracter l'onglet, mais vue ce que te désires faire pas sur que cela soit un bon choix.

;O)

Jobs68 · Answer

Je me promenait sur différents forums pour chercher si quelqu'un avait quelque chose de semblable et je suis tombé ici :

Forum

Je me demandais comment eux ont fait car c'est exactement ce que je cherchais :S

PetoleTeam · Answer

tu as toujours la possibilité de leur demander mais perso je ne vois pas de différence entre vos deux approche si ce n'est que leur site pour chaque onglet à du texte qui fait que tu ne vois pas la deuxième ligne d'onglet.

;O)

Jobs68 · Answer

Oui ça je l'ai bien vu seulement chez eux si tu prend un onglet du bas et que tu remonte les onglets du haut y sont toujours et tu peux tester n'importe quel ensembles d'onglets (haut et bas) il n'y a pas de bugs alors que chez moi sur certains onglets ya tout qui plante... Et comme je l'ai dit plus haut je n'arrive pas à mettre de contenu dans le 2ème et 3ème onglet de la 2ème ligne alors que pour la 1ère aucun soucis...

Merci encore de ton aide

PetoleTeam · Answer

Bonjour,j'ai pris le temps de regarder un ton code HTML et JS et la alors qu'elle surprise c'est loin d'être clean, coté lisibilité et autres structuration.
Par jeu je l'ai passé à la moulinette des validateurs et tu à même réussi à plater VALIDOME alors que  VALIDATOR annonce pas moins de 68 Errors.

Ceci mise à part
Tu as deux fonctions change_onglet identique, seule la deuxième rencontrée sera prise en compte, tu peux donc en supprimer une...sauf que comme tu gères les deux séries d'onglets à part il te faut au pire deux fonctions différentes pour afficher/cacher les textes des onglets.

Conseils :
met la partie style dans un fichier à part que tu incluras avec
<link type="text/css" rel="STYLESHEET" href="fichier.css">

regroupes tes script parsemés tout au long de ta page en fin de document, éventuellement, la lisibilité et la maintenance n'en sera que meilleure.
Il y aurait encore de quoi dire, mais je pense que la correction de ces erreurs devrait t'aider à te rapprocher de la solution.

Aller je cours prendre une ASPIRINE.
;O)

Jobs68 · Answer

Merci pour ton aide donc si j'ai bien compris il faut simplement que je change le nom de ma 2ème fonction d'onglets ?
Pour le reste je ne peux pas énormément modifié le tout car je suis sous forumactif en phpbb2, modulable mais pas à 100% ;)

Jobs68 · Answer

Pourrais-tu me dire ce que je dois renommer car j'ai un peu de mal là ^^

Jobs68 · Answer

Désolé pour le double post mais j'ai bien renommé mes variables et rien ne change il semblerais que même en mettant ma 2ème ligne d'onglets seuls sans la 1ère il n'y a que le 1er onglet qui fonctionne... Je pense faire comme tu ma dit au départ tout regrouper dans le même template et sous la même fonction seulement je me demandais si tu pense que c'est quand même possible de faire les 2 lignes séparés mais sous la même fonction JS ?
Donc esthétiquement je veux la même chose qu'avant mais pas dans le code ^^

PetoleTeam · Answer

Bonjour,
tu peux tout regrouper dans la même fonction en en changeant les paramètres en entrée.

Il te faut également gérer 2 anc_onglet, un pour le haut et un pour le bas, tu peux dans ce cas utiliser un array.

Dans la fonction il suffit de passer en plus la série concernée, 0 pour la série d'onglets haut et 1 pour la série d'onglets bas, il faut donc dans ta page rajouter ce paramètre à chaque appel de la fonction...

La partie javascript pourrait ressembler en final à ceci

var anc_onglet = new Array();
// anc_onglet[0] -> stockage onglet actif haut
// anc_onglet[1] -> stockage onglet actif bas
//---------------------------------
function change_onglet( nom_, num_){
  //-- Recup Acien onglet suivant le num_
  var szAncien = anc_onglet[num_];
  //-- Desactive l'ancien
  document.getElementById('onglet_' +szAncien).className = 'onglet_0 onglet';
  document.getElementById('contenu_onglet_' ++szAncien).style.display = 'none';
  //-- Active le nouveau
  document.getElementById('onglet_' +nom_).className = 'onglet_1 onglet';
  document.getElementById('contenu_onglet_' +nom_).style.display = 'block';
  //-- sauvegarde du encours
  anc_onglet[ num_] = nom_;
}
Cela devrait fonctionner...
;O)

Javascript => Onglets intérefrences ?!

11 réponses

Votre réponse

Discussions similaires