CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:  Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| | Problème d'onglets dans la PA (Javascript) |  |
|  Fire-Fly 
{ Membre actif }
 Messages : 429
 | Hello hello  Je vous écrit car j'ai un petit problème avec mes onglets qui comportent du javascript, et étant un gros ZÉRO en javascript, j'ai eu beau essayer de bidouiller un peu je ne suis pas parvenue à mes fins   Comme vous voyez, j'ai mis la PA en onglets et dans le premier onglet, j'ai voulu insérer un autre système d'onglets. Je voulais que les onglets de la PA soit en ''colonne'' si on veut, mais que ceux qui sont dans l'onglet soient alignés horizontalement, et c'est là que ça ne fonctionne plus. Voici les codes: Javascript: - Code:
-
$(function(){ var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")? "tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d) }); PA: - Code:
-
<div class="systab s_bottom s_float s_slide"> <div class="selected"> <span>Mon onglet 1</span> <div class="contenu1"> <div class="title">Welcome, {USERNAME}, on the House of Night Forums</div><br><br> <table width="100%" height="255"> <tbody> <tr> <td valign="middle" align="center" width="250"><div class="welcome"> on the House of Night Forums, a place for all HoN fans to get together and talk about this amazing series by PC and Kristin Cast.<br>Merry meet and have fun! </div> </td> <td valign="middle" align="center" width="230"><div class="news"><div class="systab s_bottom"> <div> <span>Mon onglet 1</span> Mon contenu 1 </div> <div class="selected"> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div> </div> </td> <td valign="middle" align="center" width="260"><div class="links">lien<br>lien<br>lien<br>lien<br>lien<br></div> </td> </tr> </tbody> </table> </div> </div> <div> <span>Mon onglet 2</span> Mon contenu 2 </div> <div> <span>Mon onglet 3</span> Mon contenu 3 </div> </div> CSS: - Code:
-
/* .systab .tab => les onglet */
.systab .tab {
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
background: #b8efa1;
color: #487f31;
border-color: #487f31;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
color: #ccc;
background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
margin-top: 1px;
margin-bottom: 1px;
width: 750px;
height: 373px;
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
display: block;
margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}
.contenu1 {
background-image: url("http://i49.servimg.com/u/f49/17/39/46/71/pa110.jpg");
height: 373px;
}
En gros, ce que j'ai essayé c'est de changé les ''systab'' par un autre mot dans le javascript, le html et le CSS. Je me suis dit qu'ainsi je pourrais personnaliser les onglets qui sont dans le 1er onglet mais hélas, ça n'a pas fonctionner. En fait, quand je faisais des changements mineurs, comme la taille et ainsi de suite, ça fonctionnait, mais quand j'ai enlevé les 2 codes (CSS) pour que mes onglets redeviennent horizontaux, ça ne fonctionnait pas. Bref, je suis à court d'inspiration. C'est un tutoriel que j'ai trouvé sur le forum des forums et je le trouvais vraiment génial. Merci infiniment à quiconque pourra m'aider à trouver une solution! (mon forum test, si nécessaire ) |
Dernière édition par Fire-Fly le Mar 17 Avr 2012, 10:49, édité 1 fois | |
| | | | Orange 
RocketMan
 Messages : 3086
| Hello, Je garantis rien (sauvegarde ton code original  ), mais tu peux d'ajouter ceci à la fin de ton CSS d'onglet: - Code:
-
.news span.tab {
display: inline!important;
}
Ainsi, tous les éléments span avec la classe .tab (attribuée par ton code JS) qui sont contenus dans la classe parente .news (que tu as attribuée dans ta page d'accueil) devrait se retrouver sur la même ligne (inline)... | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ça a fonctionner!!! Génial  ! Merci infiniment Orange  J'ai une autre petite question en même temps par contre ^^ J'ai remarqué que si je clique par exemple sur onglet 2 de la PA et que je reviens sur le 1, le contenu des onglets qui sont situés dans la page de l'onglet 1 est complètement déformé parce qu'aucun onglet n'est sélectionné :/ Même si j'ai mis dans la class de l'onglet 1 ''selected''... Le problème était là avant que je rajoute ce que tu m'as donné Orange, j'en conclu donc que le problème ne vient pas de là, mais ça m'ennuie un peu de le voir déformé à chaque fois... Merci encore | | |
| | | | Orange
RocketMan
Messages : 3086
| Même principe, tu définis un largeur et une hauteur minimale pour la div .contents de .news, comme ceci: - Code:
-
.news .contents {
width: 200px;
min-height: 200px;
}  EDIT: À adapter évidemment, mais ça permet d'éviter que ta div soit trop petite et qu'elle se place à côté des boutons pour les déformer... | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Yahou Ça marche super bien! Ok, va falloir que je me souvienne de ce petit truc, ça fait des miracles ^^ Ok, dernière question (parce que je sens que je commence à abuser de tes merveilleuses connaissances ) Selon le tuto, en ajoutant s_trans dans la class, je serais supposée obtenir une transition automatique entre les onglets (si j'ai bien compris). - Citation :
s_trans# ( # est un chiffre entier ) pour indiquer le temps de la transition ( en millisecondes ) d'un contenu d'onglet ( par défaut la transition prend 500 millisecondes ).
*c'était le but de la manoeuvre de prendre des onglets avec du javascript... des transitions automatiques....  * ... mais ça ne marche pas. J'ai essayé dans tous les ordres, tous les chiffres, sans chiffre, sur mon autre forum test avec un code de base, rien ne fonctionne. En espérant que tu trouves une solution miracle comme les 2 dernières, merci beaucoup encore | | |
| | | | Orange
RocketMan
Messages : 3086
| Je suis désolé, mais je n'ai pas de solution miracle... le reste concernait le CSS, mais pour le JavaScript, je dois avouer que je ne comprends pas grand chose au code que tu m'as donné. J'ai une petite idée de ce qui devrait provoquer la transition (au fait, par transition, tu veux bien dire le changement de contenu ? Genre après X secondes le contenu A est remplacé par le contenu B ?), mais je ne sais pas pourquoi ça ne marche pas...
Je pense que Espeon sera plus à même de répondre à ta question. ^^ | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| D'accord, merci encore pour tout Orange, tu m'as déjà dépanné un bon bout ^^ Pour ce qui est de transition, oui c'est exactement ça, le changement de contenu. Ya plus qu'à espérer que Espéon passe par ici  | | |
| | | | Murtagh 
{ Modérateur }
Messages : 1492
| Bonjour, Voilà 4 jours que ta demande est en attente. Est-ce que ton problème est toujours d'actualité ? Si dans 5 jours nous n'avons aucune nouvelle, ce sujet sera archivé. Merci. (: > Dans le doute, je vais demander à Espeon de passer par ici.  | | |
| | | | Espeon 
Administrateur
Messages : 1819
| Désolé du retard j'avais pas vu ce topic auparavant ! Bon alors d'après mes investigations : - le s_trans ne permet pas de faire des transitions automatiques, mais simplement de raccourcir ou rallonger le temps d'une transition. Mais je n'ai pas l'impression que quelque chose, dans ce code, permette une transition automatique - malgré tout, j'ai du mal à voir (croire) que ça fonctionne. Après avoir trituré le code, ça ne matche absolument pas les s_trans# pour définir la durée de transition Bref, j'ai donc modifié le code pour que cela matche et que cela fonctionne. Sauf erreur, tu peux donc modifier la durée de transition en remplaçant ton ancien javascript par le suivant : - Code:
-
$(function(){var d=function(){if($(this).is(".selected"))return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)}); Essaye de faire varier les s_trans# et voit ce que ça donne EDIT : Je viens de voir que ce que tu souhaites faire, c'est effectivement des transitions automatiques.
Je vais essayer de voir ce que je peux faire pour ça... | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ahh d'accord, je comprends! Et effectivement ça fonctionne avec ce script ^^
Et merci beaucoup d'essayer, ce serait vraiment génial que le changement de contenu ce fasse automatiquement!
| | |
| | | | Orange
RocketMan
Messages : 3086
| Euh... je suis un peu con fus... Le problème est résolu ou pas ? | | |
| | | | Espeon
Administrateur
Messages : 1819
| Bonsoir, Essaye avec ce script à la place de l'ancien. Normalement ça devrait le faire. Par défaut le temps de transition entre les onglets est de 5s, mais tu peux le changer en modifiant la variable timerDefilement. Lorsque tu sélectionne un onglet, ça arrête le défilement automatique. Dis moi ce que t'en pense, si y'a besoin de faire des modifications (je l'ai un peu fait à l'arrache c'est vrai mais bon ^^). - Code:
-
$(function(){ var timerDefilement=5000; var defilementAuto=true;var d=function(){defilementAuto=false;if($(this).is(".selected"))return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d);(function changeOnglet(){setTimeout(function(){if(defilementAuto){$('div.systab').each(function(){var a=$("> div",this);b=a.find(".selected").next();if(b.html()==null){b=a.find(':first');} a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);b.addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);});changeOnglet();}},timerDefilement)})();}); | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ça ne fonctionne pas  Ça fait bizarre en fait, car quand on entre sur la page, tout s'affiche correctement, puis ça change pour l'onglet 2 mais le contenu de l'onglet n'apparait tout simplement pas :/ Quand je clique sur le 2 et le 3, le contenu apparait mais comme c'est inscrit dans le script que le défilement arrête , eh bien ça arrête  Et aussi, je ne sais pas s'il y aurait moyen [j'en demande vraiment beaucoup, je suis désolée!], mais en fait c'est que si tu regardes dans mon premier onglet, j'ai mis un autre système d'ongles (''news'') qui utilise les mêmes codes que celui de la PA en général, donc le même javascript, mais j'aimerais que ce soit uniquement celui-là (donc les onglets contenus dans le premier onglet de la PA) qui change de contenu automatiquement... Est-ce que c'est faisable selon toi? | | |
| | | | Espeon
Administrateur
Messages : 1819
| Ah oui effectivement j'avais fait ça sur le cadre général du tuto mais ça ne s'adapte pas à ton code particulier.
Bon je vais essayer de voir ce que je peux faire pour te corriger ça =) | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Merci  | | |
| | | | Espeon
Administrateur
Messages : 1819
| J'ai un peu modifié le code =) Si tu remplace ton javascript par le suivant : - Code:
-
$(function(){ var timerDefilement=5000; var defilementAuto=true;var d=function(){defilementAuto=false;if($(this).is(".selected"))return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d);(function changeOnglet(){setTimeout(function(){if(defilementAuto){$('div.defilement').each(function(){var a=$("> div",this);b=a.find(".selected").next();if(b.html()==null){b=a.find(':first');} a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);b.addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);});changeOnglet();}},timerDefilement)})();}); Il te suffit alors de rajouter la class defilement à ce que tu veux faire défiler comme : - Code:
-
<div class="news"> <div class="systab defilement s_bottom"> ... </div> </div> | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ça marche super bien!!!
Merci énormément!!
Dernière petite question (je jure c'est la dernière!).
Quand je vais cliquer sur d'autres onglets et que je reviens, le défilement des nouvelles ne reprend pas. Sais tu s'il y a moyen qu'il reprenne?
| | |
| | | | Espeon
Administrateur
Messages : 1819
| Plop.
Désolé pour la réponse tardive, j'ai eu un week-end chargé.
Hmmm une modification du script et je devrais pouvoir améliorer ça un chouïa.
J'essaie de te faire ça dans la journée.
Bonne nuit ! | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ok merci | | |
| | | | Espeon
Administrateur
Messages : 1819
| Essaie ce code-ci. Normalement ça ne devrait plus stopper le défilement si tu vas sur un autre onglet (je ne sais pas bien si c'est ce que tu voulais, dans le doute essaie)  - Code:
-
$(function(){ var timerDefilement=5000; var defilementAuto=true;var d=function(){if($(this).closest('.systab').is(".defilement")){defilementAuto=false};if($(this).is(".selected"))return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d);(function changeOnglet(){setTimeout(function(){if(defilementAuto){$('div.defilement').each(function(){var a=$("> div",this);b=a.find(".selected").next();if(b.html()==null){b=a.find(':first');} a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);b.addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/s_trans([0-9]+)/)||["",500])[1]);});changeOnglet();}},timerDefilement)})();}); | | |
| | | | Fire-Fly
{ Membre actif }
Messages : 429
| Ça fonctionne !! Merci infiniment Espeon  Le problème est réglé, vous pouvez classer! | | |
| | | | Psycho
Psychopathe
Messages : 3407
| Hello !
Alors dans ce cas, je classe =D
N'hésite à rouvrir un autre sujet si tu as d'autres questions (: | | |
| | | | Contenu sponsorisé
| | | | | | | Problème d'onglets dans la PA (Javascript) | |
|
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
