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! |
| [résolu] Profil en onglets : le script ne marche pas ? | |
| Eylika
{ Membre }
Messages : 36
| Bonjour ou bonsoir selon l'heure où vous lirez ce message. Tout d'abord, je tenais à adresser un grand merci à qui lira mon problème et voudra bien m'accorder un peu de son aide. J'ai cherché par tous les moyens à le résoudre avant de venir crier au secours, mais la solution n'a pas voulu pointer le bout de son nez. Trêve de blabla, je m'explique
J'envoie l'adresse du forum si besoin par mp.
Alors je vous ai fait des captures pour plus de clarté J'ai installé un système javascript/html/css d'onglets dans les profils avec "Profil", "En +" & "Contact". Ainsi lorsque l'on clique, leur contenu s'affiche. Profil, bah pour les champs profil de base, En +, pour la partie RPG et Contact pour les petites images qui dirigent vers le site web de l'auteur, envoyer un mp, envoyer un e-mail etc. https://i.servimg.com/u/f34/14/64/94/01/1ereca10.png Jusqu'ici, tout va très bien. Les variables marchent du tonnerre, tout est en place. Hop, je descend un peu plus bas, et paf je vois rien au niveau du profil du membre qui a posté après. Donc en gros, le système d'onglet marche pour le premier membre qui poste un message dans le sujet, mais pas pour les suivants. https://i.servimg.com/u/f34/14/64/94/01/2ecap10.png Et imaginons, je clique sur Contact dans un profil du dessous, et ben c'est relié au 1er profil, ça s'affiche dessus. J'espère avoir été assez claire
J'vous file tout de suite l'html :
- Code:
-
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_AVATAR}<br /><br /> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><div class="pseudo"><center><strong>{postrow.displayed.POSTER_NAME}</strong></center></div></span><br /> <div class="border1"></div> <center><div class="rankprofil">{postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}</div></center><br /> <div class="border1"></div>
<script type="text/javascript"> //<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script>
<div class="systeme_onglets"> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Profil</span> <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">En +</span> <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Contact</span> </div> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_quoi"> <div class="postdetailinfo"><!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --></div> </div> <div class="contenu_onglet" id="contenu_onglet_qui"> <div class="postdetailinfo"> {postrow.displayed.POSTER_RPG}</div> </div> </div> <div class="contenu_onglet" id="contenu_onglet_pourquoi"> <div class="postdetailinfo"> <justify>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}</justify><br /> </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'quoi'; change_onglet(anc_onglet); //--> </script> <br /> <div class="border1"></div> <center>{postrow.displayed.ONLINE_IMG}</center> </span><br /> Et pis l'css sous hide :
D'avance un giga merciiiiiiiiiiiiiiiiiiiiiiiiiiii |
Dernière édition par Eylika le Dim 02 Sep 2012, 06:27, édité 1 fois | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour.
"l'html" et "l'css" ? O.o
Sinon, c'est normal que ça ne marche pas dans les profils, ce système d'onglet utilise des identifiants pour fonctionner, et un identifiant doit être unique (même avec une classe le problème serait le même, tous les profils réagiraient en même temps en cliquant sur l'un d'entre eux). Or ce code est répété pour chaque profil affiché, du coup il ne marche que pour le premier. Je ne vais pas m'étendre là dessus mais si tu souhaites obtenir cet effet, il te faudra trouver un autre système. | | |
| | | Eylika
{ Membre }
Messages : 36
| Bonjour, Alors je viens de modifier le tout en suivant un tutoriel de forumactif. Et mon problème est presque réglé, le système d'onglet marche très bien sur les profils. Sauf le premier cette fois-ci Capture du premier profil : Capture de tous les autres : Alors l'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; 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; } Et la partie du template : - Code:
-
<script type="text/javascript"> //<!-- $(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) }); //--> </script> <div class="systab" s_slide s_float> <div class="selected"> <span>En profil</span> <div class="postdetailinfo"><!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --></div> </div> <div> <span>En +</span> <div class="postdetailinfo"> {postrow.displayed.POSTER_RPG}</div> </div> <div> <span>Contact</span> <div class="postdetailinfo"> <justify>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}</justify><br /> </div> </div> </div> <div style="clear:left"></div> Merci d'avance pour votre aide | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Ca s'écrit le CSS. Je sais pas comment tu fais pour prononcer "L'CSS" à voix haute mais moi j'y arrive pas. On pourrait avoir le lien du tutoriel que tu as utilisé ? Parce que ça m'étonne quand même de tomber sur cette ligne dans ton code : - Code:
-
<div class="systab" s_slide s_float> Normalement ça devrait s'écrire - Code:
-
<div class="systab s_slide s_float"> Reste à savoir si c'est voulu, s'il manque un pan de code, ou si ça vient d'autre chose. A propos, la balise <justify> est obsolète (comme center), il ne faut pas l'utiliser. Il te suffit de mettre un text-align:justify; dans la classe .postdetailinfo pour la remplacer. | | |
| | | Eylika
{ Membre }
Messages : 36
| Tu vas rire, je mets « L'CSS » parce que je ne savais pas si c'est féminin ou masculin ? J'aurais pensé « la fiche css » mais j'avais déjà lu des personnes comme toi qui disait « le ». Alors j'ai mit « l' » bref. Voici le lien du tutoriel que j'ai utilisé. http://forum.forumactif.com/t310879-tableaux-a-onglets Pour la ligne que tu cites, je pense que c'est moi qui me suis trompée. Je vais tout de suite corriger. Edit : ça n'a rien changé.. Merci pour la balise je ne savais pas ! ^^ | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour, pourrais-tu nous donner l'adresse de ton forum s'il te plait ? (sous balise hide, je reçois assez de MP comme ça x_x) Je ne m'y connais pas assez en javascript pour t'aider, je vais transmettre ta demande en haut lieu et un de nos (rares) spécialistes javascript viendra t'aider | | |
| | | Espeon
Administrateur
Messages : 1819
| Bonsoir, Je vais essayer de me pencher sur ton problème. Cependant il serait bien que tu suive justement le tutoriel de FA. A savoir déjà de séparer le Javascript de ton code HTML. Ainsi, place le code javascript indiqué dans les modules > gestion des codes javascript comme indiqué, ça épurera le HTML. Ensuite, j'aimerais bien constater l'effet de visu, ça reste la meilleure méthode pour analyser du javascript. Pourrais-je avoir le lien vers ton forum (par mp si tu le souhaites) pour constater ça ? Merci | | |
| | | Eylika
{ Membre }
Messages : 36
| Bonjour, Merci beaucoup de vous pencher sur mon problème, je commençais à désespérer >< Voici le lien du forum où vous pourrez voir :
J'ai donc séparé le Javascript du code HTML et je l'ai placé dans le gestionnaire de codes comme indiqué, en cochant bien toutes les pages. Mais j'avais déjà essayé justement et du coup l'affichage des onglets disparaît complètement.
viewtopic_body :
Merci beaucoup d'avance ! | | |
| | | Espeon
Administrateur
Messages : 1819
| Hummmm a priori ça disparaît complètement car il y a une erreur de code (qui n'est pas de votre faute). En fait, c'est plutôt une erreur de syntaxe. Elle n'est pas très importante lorsque le code est "développé" car le navigateur peut le corriger seul, mais dans la gestion des codes javascript ceux-ci sont compressés pour des raisons d'optimisation (meilleures performances). Or en compressant le script, tout tient sur une seule ligne. Et là, la moindre erreur de syntaxe fait planter le script.
C'est généralement le cas d'un oubli de ; à la fin d'une dernière instruction...
Bref, au pire pour le moment, contentez-vous de replacer le code dans le HTML, nous verrons ensuite ce point. | | |
| | | Eylika
{ Membre }
Messages : 36
| Merci pour votre aide. Alors j'ai remit le code javascript dans mon template ce qui donne ceci :
Mais comme vous pouvez le voir l'affichage des champs du profil du 1er membre qui a posté bug ...
| | |
| | | Eylika
{ Membre }
Messages : 36
| | | | pamina
{ Membre actif }
Messages : 1170
| Bonjour Eylika, Je cite le règlement de CSSActif : " Remonter un sujet, le fameux «Up», est interdit sur CSSActif. L'équipe fait déjà le maximum pour répondre à votre demande le plus rapidement possible et la remontera elle-même en cas de besoin. Il est par conséquent inutile de signaler votre impatience.". La période est encore un peu aux vacances... tous les codeurs ne sont pas disponibles ! Merci de ta compréhension. | | |
| | | Espeon
Administrateur
Messages : 1819
| Désolé, c'est de ma faute, cela fait quelques jours que je dois répondre à cela en fait. Alors, pour une raison complètement mystérieuse, ça plante effectivement pour le premier post chargé. A vrai dire je ne sais pas vraiment pourquoi car cela se passe lorsque le script s'exécute. Or il n'y a pas de problème avec le script vu que les autres fonctionnent parfaitement. Pas de problème avec le CSS, ni le HTML du template.Quelque chose doit se passer lors du chargement du HTML du premier post de la page, qui fait que le script l'interprète mal, et crée 2 niveaux. Mais je n'ai pas eu le temps d'aller plus en profondeur pour l'instant... Ce que je te propose, c'est de chercher un tutoriel pour faire un effet d'onglet (il y en a des centaines sur internet j'imagine, et certainement des bons, même si je n'en ai aucun en tête pour le moment). Ou bien, si tu patiente quelques jours (car en fait je suis plutôt peu dispo en ce moment), j'essaierais d'approfondir la question pour trouver une solution (quitte à rajouter quelques lignes de script). A toi de choisir Encore désolé de l'attente ! | | |
| | | Espeon
Administrateur
Messages : 1819
| Alors en fait j'ai peut être trouvé la solution car j'ai fait la même erreur (que je viens de corriger). Il se trouve que le script plante de cette façon (simplement sur le premier post) lorsqu'il est exécuté 2 fois. Dans mon cas, j'avais copié-collé votre code HTML (qui contenait le script) ainsi que rajouté le script dans la gestion des codes Javascript ! Bref, en supprimant le script du template HTML et en ne laissant que le script dans les modules, tout est redevenu à la normale (ce qui me rassure, sinon j'avoue que je ne voyais pas d'où ça aurait pu venir). Autrement dit, remplace ton template par le suivant : - Code:
-
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" }; $(function(){ _atc.cwait = 0; $('.addthis_button').mouseup(function(){ if ($('#at15s').css('display') == 'block') { addthis_close(); addthis_close(); } }); }); //]]> </script>
<table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="left" valign="middle" nowrap="nowrap"> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authreply --> </span> </td> <td align="left" valign="middle" nowrap="nowrap"> <!-- BEGIN switch_twitter_btn --> <span id="twitter_btn" style="margin-left: 6px; "> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </span> <!-- END switch_twitter_btn --> <!-- BEGIN switch_fb_likebtn --> <span id="fb_likebtn" style="margin-left: 6px; "> <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> </span> <!-- END switch_fb_likebtn --> </td> <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="bottom" nowrap="nowrap" width="100%"> <span class="gensmall bold"> <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a> <!-- BEGIN switch_plus_menu --> | <script type="text/javascript">//<![CDATA[ var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}'; var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}'; var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}'; var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}'; var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}'; var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}'; insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> <!-- END switch_plus_menu --> </span> </td> </tr> </table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;"> <tr align="right"> <td class="catHead" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr> <!-- BEGIN topicpagination --> <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END topicpagination --> {POLL_DISPLAY} <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr> <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_AVATAR}<br /><br /> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><div class="pseudo"><center><strong>{postrow.displayed.POSTER_NAME}</strong></center></div></span><br /> <div class="border1"></div> <center><div class="rankprofil">{postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}</div></center><br /> <div class="border1"></div> <div class="systab s_slide"> <div> <span>En profil</span> <div class="postdetailinfo"> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --></div> </div> <div> <span>En +</span> <div class="postdetailinfo"> {postrow.displayed.POSTER_RPG}</div> </div> <div> <span>Contact</span> <div class="postdetailinfo"> <br /> <center>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} <br /><br /> {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}<br /><br /></center> </div> </div> </div> <br /> <div style="clear:left"></div> <div class="border1"></div> <center>{postrow.displayed.ONLINE_IMG}</center> </span><br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> <td valign="top" nowrap="nowrap" class="post-options"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </td> </tr> <tr> <td colspan="2" class="hr"> <hr /> </td> </tr> <tr> <td colspan="2"> <!-- BEGIN switch_vote_active --> <div class="vote gensmall"> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div> <!-- END switch_vote -->
<!-- BEGIN switch_bar --> <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <!-- BEGIN switch_vote_plus --> <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div> <!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus --> <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div> <!-- END switch_vote_minus --> </div> <!-- END switch_bar -->
<!-- BEGIN switch_no_bar --> <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div> <!-- END switch_no_bar -->
<!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div> <!-- END switch_vote --> </div> <!-- END switch_vote_active -->
<div class="postbody">
<div>{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments --> <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd> <!-- BEGIN switch_post_attachments --> <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />
<!-- BEGIN switch_dl_att --> <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL} <!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att --> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL} <!-- END switch_no_dl_att --> </dt>
<!-- BEGIN switch_no_comment --> <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd> <!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att --> <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd> <!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl> <!-- END switch_post_attachments --> </dd> </dl> <!-- END switch_attachments -->
<div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div>
</div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> </tr> <tr> <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150"> <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> </td> </tr> <!-- BEGIN first_post_br --> </table> <br /> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr> <!-- END first_post_br --> <!-- END displayed --> <!-- BEGIN hidden --> <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr> <!-- END hidden --> <!-- END postrow --> <!-- BEGIN no_post --> <tr align="center"> <td class="row1" colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr> <!-- END no_post --> <tr align="right"> <td class="catBottom" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td> <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr> </table> <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"> <tr> <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td> <!-- BEGIN topicpagination --> <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td> <!-- END topicpagination --> </tr> <!-- BEGIN switch_user_logged_in --> <!-- BEGIN watchtopic --> <tr> <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr> <!-- END watchtopic --> <!-- END switch_user_logged_in --> </table>
<!-- BEGIN promot_trafic --> <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"> <tr> <td class="catBottom" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td> <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> </table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"> <tr> <td class="catBottom" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td> <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> <tr> <td class="row2 postbody" valign="top"> <!-- BEGIN link --> » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br /> <!-- END link --> </td> </tr> </table> <!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules --> <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px"> <tbody> <tr> <td class="catBottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"> <h1 class="cattitle"> {L_FORUM_RULES}</h1> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="row1 clearfix"> <table> <tr> <!-- BEGIN switch_forum_rule_image --> <td class="logo"> <img src="{RULE_IMG_URL}" /> </td> <!-- END switch_forum_rule_image --> <td class="rules postbody"> {RULE_MSG} </td> </tr> </table> </td> </tr> </tbody> </table> <!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="row2" colspan="2" align="center" style="padding:0px"> <!-- BEGIN switch_user_logged_in --> <a name="quickreply"></a> {QUICK_REPLY_FORM}<br /> <!-- END switch_user_logged_in --> </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"> <tbody> <!-- BEGIN show_permissions --> <tr> <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td> <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td> </tr> <!-- END show_permissions --> <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <!-- BEGIN show_permissions --> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td> <!-- END show_permissions --> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"> <tbody> <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authreply --> </span> </td>
<!-- BEGIN viewtopic_bottom --> <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td> <!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel --> <td align="center"> <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span> </td> <td align="center" width="250"> <span class="gensmall"> </span> </td> <!-- END moderation_panel --> </tr> </table> </form>
<!-- BEGIN viewtopic_bottom --> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br /> <form name="action" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> --> <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span> </form> </td> </tr> </table> <!-- END viewtopic_bottom -->
<!-- BEGIN switch_image_resize --> <script type="text/javascript"> //<![CDATA[ $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} })); //]]> </script> <!-- END switch_image_resize --> <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script> Puis rends-toi dans Modules > Gestion des codes javascript et crée (un seul !) script 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(/^[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) }); Nomme-le "onglets" et applique-le sur les topics (coche "sur les sujets"), ça devrait fonctionner. En tout cas, chez moi cela fonctionne : http://espeon-test.forumgratuit.org/t4-signature | | |
| | | Eylika
{ Membre }
Messages : 36
| WAW Je sais pas comment vous remercier x) Ça fonctionne tout parfaitement, c'est génial ! merci merci merci merci beaucoup pour le temps consacré à ma demande d'aide ! J'édite mon titre en résolu ! | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello (: Puisque le problème est résolu, je déplace (: Merci de l'avoir signalé | | |
| | | Contenu sponsorisé
| | | | | [résolu] Profil en onglets : le script ne marche pas ? | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|