Sujets similaires

Bonjour,

J'ai voulu utiliser le code donné pour créer des onglets avec les groupes du qeel. Seulement j'aimerais créer un agencement en tableau avec :
- 1ere colonne : la moitié des groupes
- 2ème colonne : le contenu des onglets
- 3ème colonne : l'autre moitié des groupes.

Seulement, le code des onglets ne fonctionne que sur la 1ère colonne. Normal me direz-vous, on utilise des "id" non des "class", je ne peux donc les répéter sur deux colonnes différentes. J'ai essayé de voir si ce n'était pas une simple question de changement d'id en class sur le code js mais je n'y connais tellement rien en js que ca n'a rien donné.

Je fais donc appel à vous pour m'aider à trouver une solution =)

Voici le forum sur lequel j'ai testé le code (c'est juste en dessous du header) : http://cavenecadas.forums-actifs.net/

Le tuto en question : http://www.css-actif.com/t11932-qui-est-en-ligne-onglets-groupes

Et mon code HTML :

Code:: <table>
<tr>
<td id="mes_onglets" width="150px">
<div id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe1">Maison Mère</a>
</div>
<br/>
<div id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2">Maison Atréides</a>
</div>
<div id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> Maison Harkonnen </a>
<br/><div id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> Maison Norn </a>
</div>
</div>
</td>
<td class="descgroupes">
<div id="mes_contenus">
<div id="texte_qeel">Texte par défaut</div>
<div id="co_1" class="mon_contenu">
description groupe 1
</div>
<div id="co_2" class="mon_contenu">
description groupe 2
</div>
<div id="co_3" class="mon_contenu">
description groupe 3
</div>
<div id="co_4" class="mon_contenu">
description groupe 4
</div>
<div id="co_5" class="mon_contenu">
description groupe 5
</div>
<div id="co_6" class="mon_contenu">
description groupe 6
</div>
<div id="co_7" class="mon_contenu">
description groupe 7
</div>
<div id="co_8" class="mon_contenu">
description groupe 8
</div>
</div>
</td>
<td id="mes_onglets" width="150px">
<div id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> La Poursuite </a>
</div>
<br/>
<div id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> Ordre des Lames </a>
</div>
<br/>
<div id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> Bene Gesserit </a>
</div>
<br/><div id="o_8" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe2"> Désincarnés </a>
</div>
</td>
</tr>
</table>

Je ne met pas le code js puisque c'est le même que celui du tuto (avec la variante d'un texte par défaut, c'est tout) et je n'ai pas jugé utile de mettre le css puisque je n'y ai pas encore touché et qu'il n'intervient pas sur mon problème. Bien sûr, si il y en a besoin, je le donnerai.

Je vous remercie par avance !

Effectivement, le problème vient des id ^^
Dans ton JS, tu as cette ligne là

Code:: var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('div');

En gros, il prends toutes les "div" à l'intérieur de l'élément avec l'id "mes_onglets".

Ce que tu pourrais faire éventuellement :
1. Mettre l'idée "mes_onglets" à toute la table. Comme ça la recherche aura lieu partout dedans.

2. Remplacer chaque div d'onglet par des span, ou encore une liste.

Code:: <span id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">
<a href="LIEN" class="groupe1">Maison Mère</a>
</span>

3. Dans le js, remplacer la recherche de "div", par une recherche de "span" (ou de liste)

Code:: var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');

Je suis pas sûre que ça va marche, mais à essayer ^^

Waouw, tout d'abord je dois dire que je suis impressionnée par la rapidité de la réponse. Merci beaucoup Nihil !

Hum j'ai appliqué ce que tu m'avais recommandé et tout fonctionne. C'est génial, encore merci.

J'ai quelques questions également. Est-il possible de créer un effet de transition dans le passage d'un onglet à un autre ? Il me semble dans ce cas qu'il faut que je touche au js mais je ne m'y connais pas des masses.

Enfin, je voudrais savoir s'il est possible de faire en sorte qu'une fois qu'on a passé le curseur sur un groupe et qu'on l'a enlevé, le contenu redevienne celui par défaut (et non l'onglet qu'on a survolé)? Je ne sais pas si cela serait vraiment très ergonomique mais j'aimerais bien voir un rendu.

Voici mon js, au cas où :

Code:: function changeOnglet(_this){
document.getElementById('texte_qeel').style.display = 'none';
var getOnglets = document.getElementById('mes_onglets').getElementsByTagName('span');
for(var i = 0; i < getOnglets.length; i++){
if(getOnglets[i].id){
if(getOnglets[i].id == _this.id){
getOnglets[i].className = 'mon_onglet_selected';
document.getElementById('c' + _this.id).style.display = 'block';
}
else {
getOnglets[i].className = 'mon_onglet';
document.getElementById('c' + getOnglets[i].id).style.display = 'none';
}
}
}
}

En fait, si je comprends bien ce que tu veux dire, tu ne souhaiteras plus vraiment en onglet. Cela serait plutôt comme des infobulles (on en voit souvent, sauf que là, l'infobulle serait située à un endroit fixe pour chaque chose qu'on survol, non ?

Si c'est bien ça, ça peut se réaliser en html / css, sans avoir besoin de JS Razz

Oui, c'est vrai que ca pourrait marcher ainsi.

En fait je souhaite vraiment définir une section nette dans laquelle apparaître par défaut les actualités et lorsqu'on survole un groupe la description du groupe.

Lorsque j'utilise une infobulle (pour ma part, pauvre ignare que je suis), cette dernière apparaît à un endroit fixe par rapport à son ancre (genre en haut à droite). Ce qui fait qu'avec mon tableau à trois colonnes, les informations des infobulles n'apparaîtraient pas dans la colonne du milieu.

Ce serait possible de faire ça avec des infobulles ?

En fait, toute l'astuce réside dans le fait que normalement (comme tu l'as dit ^^), l'infobulle apparaît dans une endroit fixe par rapport à son ancre. Il faut la faire apparaitre dans un endroit fixe par rapport à un autre bloc (en gros, utilisation de la propriété css position : relative et position: absolute).

Bon, par contre il faut se creuser la tête un peu, mais moins que pour du JS si on connait rien au JS x)

Voilà, comme on est dans le section Aide, je t'aide juste Razz

, je ne fourni pas le code en question ^^

D'accord, merci beaucoup. Tes réponses étaient claires et très rapides. C'est vraiment super sympa ! J'ai finalement trouvé une autre alternative pour la présentation, sans doute plus pratique x)

Onglets du qeel

Onglets du qeel

Sujets similaires

Sujets similaires

Partenaires Or