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 avec le profil (à archiver) | |
| GINGERBREAD.
{ Membre }
Messages : 60
| hello ! je viens de nouveau devant vous, ô grands maitres du codage (j'ai l'impression de venir tout le temps), parce que j'ai un sérieux problème. Voyez plutôt ici, dans le premier post le profil s'affiche tout bien comme je veux. Et dans le deuxième BAM! le système d'onglets ne marche plus. Et c'est pareil pour tous les postes qui suivent le premier. J'avoue être totalement à la ramasse là ! J'ai cherché partout pour voir si j'ai une balise d'étrange, mais je vois pas pourquoi ça me fait ça. Après deux heures à chercher, peut-être que vous saurez allumer ma lumière Voilà les codes qui pourraient vous être utile : viewtopic_body - Code:
-
<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(); } }); });
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' }; showHiddenMessage = function(id) { try { var regId = parseInt(id, 10); if( isNaN(regId) ) { regId = 0; } if( regId > 0) { $('.post--' + id).toggle(0, function() { if( $(this).is(":visible") ) { $('#hidden-title--' + id).html(hiddenMsgLabel.visible); } else { $('#hidden-title--' + id).html(hiddenMsgLabel.hidden); } }); } } catch(e) { } return false; };
//]]> </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" > <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 hidden --> <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td> </tr> <!-- END hidden --> <!-- BEGIN displayed --> <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a></span> <span class="postdetails poster-profile"><strong><div class="pseudo">{postrow.displayed.POSTER_NAME}</div></strong><div class="rang">{postrow.displayed.POSTER_RANK}</div>{postrow.displayed.RANK_IMAGE} {postrow.displayed.POSTER_AVATAR} <div class="avatarzone"><br> <center><div class="tabs-onglets"> <a href="#premier_onglet"><span style="background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;padding-right:30px;padding-left:30px;font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;">Premier</span></a> <a href="#deuxieme_onglet"><span style="font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;padding-right:30px;padding-left:30px;background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;width:100px;">Deuxième</span></a> </div></center> <div id="contenu"> <div id="premier_onglet"> <h1> <!-- BEGIN profile_field --> <div class="stepone">{postrow.displayed.profile_field.LABEL}</div><span style="font-weight:lighter;">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}</span> <!-- END profile_field --> </h1> </div> <div id="deuxieme_onglet"> <h1> <span id="rpgone"><div style="margin-top:-30px;font-weight:lighter;">{postrow.displayed.POSTER_RPG}</div></span><script type="text/javascript">jQuery('#rpgone').html(jQuery('#rpgone').html().replace('Feuille de personnage','')).removeAttr('id')</script></h1> </div> <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}" alt="" />
<!-- 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 --> </td> </tr> </table> <div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> <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"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr> <!-- BEGIN first_post_br --> </table> <hr /> <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 --> <!-- 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}" alt="" /> </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>
css - Code:
-
.randomText span{display:none} .randomText{;text-align:justify;font-size:9px;} .avatarzone{background-color:#F6EFE5;margin-top:10px;padding:3px;} .stepone{background-color:#E8F3E1 !important;text-align:center;font-family: 'Marvel', sans-serif !important;font-size:11px;text-transform:uppercase;padding:3px;} javascript onglets - Code:
-
/** * Système d'onglets automatisé * Version : 1.0 * Par Emmanuel "Manumanu" B. **/
$(document).ready(function() { var ongletActuel = null; ongletActuel = $('.tabs-onglets a:first').attr('href');
// Ajout de classe au premier onglet $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut $(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic $('.tabs-onglets a').click(function(e) { idOnglet = $(this).attr('href');
// Si l'élément est déjà sélectionné, ne rien faire if (idOnglet == ongletActuel) e.preventDefault(); else { // Afficher le contenu demandé et masquer le contenu restant $(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné $(this).addClass('selected').siblings().removeClass('selected'); ongletActuel = idOnglet; }
// Empêche le déclenchement du lien e.preventDefault(); }); }); javascript 2 - Code:
-
jQuery(function(){ jQuery(".randomText").each(function(){ jQuery(this).find("span:eq("+Math.floor(Math.random()*jQuery(this).find("span").length)+")").css("display","inline"); }); }); |
Dernière édition par GINGERBREAD. le Mar 26 Aoû 2014, 14:25, édité 1 fois | |
| | | Nihil
{ Modérateur }
Messages : 1216
| J'y jette un rapide coup d'oeil, j'éditerai demain si j'y pense, mais je crois que cela provient des id. Tu as dans ton code ceci : - Code:
-
<a href="#premier_onglet"><span style="background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;padding-right:30px;padding-left:30px;font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;">Premier</span></a> <a href="#deuxieme_onglet"><span style="font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;padding-right:30px;padding-left:30px;background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;width:100px;">Deuxième</span></a> Un id, contrairement à une classe, est un élément unique dans la page normalement ! Là il est répété plusieurs fois. C'est pour ça que cela fonctionne pour le premier et pas pour les suivants Le javascript utilise les id pour fonctionner. Sur le sujet d'exemple que tu m'as donné, si au premier post tu cliques sur "Deuxième onglet" cela fonctionne. Tu descends sur le post en dessous, tu cliques sur "Premier onglet" rien ne change sur ton profil... Mais cela change sur le profil juste au dessus ! Il te faut donc une id unique pour chaque post Par exemple premier post : #premier_onglet et #deuxieme_onglet Deuxième post #premier_onglet2 et #deuxieme_onglet2 et ainsi de suite... Comment faire cela avec les templates ? Tout simplement en utilisant l'id du message Sur ForumActif, chaque message a son propre id, c'est ce qui permet par exemple quand on clique sur "Dernier message" d'aller directement au bon message (on scroll automatiquement en face). Exemple : http://www.css-actif.com/t15887-probleme-avec-le-profil#182639 182639 c'est l'id de mon message On peut le trouver ici : - Code:
-
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> Plus précisément {postrow.displayed.U_POST_ID} Nous allons donc reprendre ton code de tout à l'heure et rajouter cet id unique : - Code:
-
<a href="#premier_onglet_{postrow.displayed.U_POST_ID}"> <span style="background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;padding-right:30px;padding-left:30px;font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;">Premier</span> </a> <a href="#deuxieme_onglet_{postrow.displayed.U_POST_ID}"> <span style="font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;padding-right:30px;padding-left:30px;background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;width:100px;">Deuxième</span> </a> Il ne faut pas oublier de la changer ici aussi : - Code:
-
<div id="premier_onglet"> et - Code:
-
<div id="deuxieme_onglet"> Il faut qu'ils aient le même id que les liens au dessus. Cela donnera donc : - Code:
-
<div id="premier_onglet_{postrow.displayed.U_POST_ID}"> et - Code:
-
<div id="deuxieme_onglet_{postrow.displayed.U_POST_ID}"> Normalement cela devrait marcher maintenant Je n'ai pas vérifié, je fais ça rapidement à l'aveugle, dis moi si cela fonctionne ^^ Simple commentaire, dans ton html tu as beaucoup de css en ligne, et qui parfois se répète. Exemple : - Code:
-
<a href="#premier_onglet_{postrow.displayed.U_POST_ID}"> <span style="background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;padding-right:30px;padding-left:30px;font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;">Premier</span> </a> <a href="#deuxieme_onglet_{postrow.displayed.U_POST_ID}"> <span style="font-family: 'Marvel', sans-serif;font-size:12px;font-weight:lighter;text-transform:uppercase;padding-right:30px;padding-left:30px;background-color:white;padding-top:2px;padding-bottom:2px;letter-spacing:-1px;text-align:center;width:100px;">Deuxième</span> </a>
Tu devrais plutôt rajouter une classe et mettre ton code dans le CSS - Code:
-
<a href="#premier_onglet_{postrow.displayed.U_POST_ID}"> <span class="profil_titre_onglet">Premier</span> </a> <a href="#deuxieme_onglet_{postrow.displayed.U_POST_ID}"> <span class="profil_titre_onglet">Deuxième</span> </a> Et dans le CSS - Code:
-
.profil_titre_onglet { background-color:white; padding-top:2px; font-family: 'Marvel', sans-serif; font-size:12px; font-weight:lighter; text-transform:uppercase; padding-right:30px; padding-left:30px; padding-bottom:2px; letter-spacing:-1px; text-align:center; } C'est quand même plus beau, plus simple à modifier, et quand quelqu'un doit regarder ton code il est moins perdu | | |
| | | GINGERBREAD.
{ Membre }
Messages : 60
| je comprends le principe ! j'avais pris ce code sur un tutoriel et j'avoue que je n'avais pas du tout pensé à prendre en compte l'id du message. et pour l’allègement du code, j'allais le faire mais c'est vrai que quand j'ai rencontré le problème, j'ai totalement zappé cette partie par contre, je pense avoir fait ce que tu m'as dit mais ça ne marche pas. Le résultat est toujours le même malheureusement voici la partie du template modifié - Code:
-
<!-- BEGIN hidden --> <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td> </tr> <!-- END hidden --> <!-- BEGIN displayed --> <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a></span> <span class="postdetails poster-profile"><strong><div class="pseudo">{postrow.displayed.POSTER_NAME}</div></strong><div class="rang">{postrow.displayed.POSTER_RANK}</div>{postrow.displayed.RANK_IMAGE} {postrow.displayed.POSTER_AVATAR} <div class="avatarzone"><br> <center><div class="tabs-onglets"> <a href="#premier_onglet_{postrow.displayed.U_POST_ID}"> <span class="profil_titre_onglet">Premier</span> </a> <a href="#deuxieme_onglet_{postrow.displayed.U_POST_ID}"> <span class="profil_titre_onglet">Deuxième</span> </a> </div></center> <div id="contenu"> <div id="premier_onglet_{postrow.displayed.U_POST_ID}"> <h1> <!-- BEGIN profile_field --> <div class="stepone">{postrow.displayed.profile_field.LABEL}</div><span style="font-weight:lighter;">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}</span> <!-- END profile_field --> </h1> </div> <div id="deuxieme_onglet_{postrow.displayed.U_POST_ID}"> <h1> <span id="rpgone"><div style="margin-top:-30px;font-weight:lighter;">{postrow.displayed.POSTER_RPG}</div></span><script type="text/javascript">jQuery('#rpgone').html(jQuery('#rpgone').html().replace('Feuille de personnage','')).removeAttr('id')</script></h1> </div> <br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td> merci d'avoir répondu aussi vite en tout cas | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| OK, j'avais pas regardé le fonctionnement du JS et je crois qu'il est pas fait pour avoir plusieurs système d'onglets sur une même page. Si tu as le lien du tuto de base, ça m'intéresserait de voir ce que le créateur avait écrit par rapport à l'utilisation plusieurs fois dans une page. J'ai fait un test de javascript, dis moi si avec ceci cela fonctionne mieux : - Code:
-
/** * Système d'onglets automatisé * Version : 1.0 * Par Emmanuel "Manumanu" B. **/
$(document).ready(function() { $tabs_onglets = $('.tabs-onglets'); $tabs_onglets.each(function(){ var ongletActuel = null; ongletActuel = $(this).find('a:first').attr('href');
// Ajout de classe au premier onglet $(this).find('a[href="'+ ongletActuel +'"]').addClass('selected');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut $(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic $(this).find('a').click(function(e) { idOnglet = $(this).attr('href');
// Si l'élément est déjà sélectionné, ne rien faire if (idOnglet == ongletActuel) e.preventDefault(); else { // Afficher le contenu demandé et masquer le contenu restant $(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné $(this).addClass('selected').siblings().removeClass('selected'); ongletActuel = idOnglet; }
// Empêche le déclenchement du lien e.preventDefault(); }); });
}); | | |
| | | GINGERBREAD.
{ Membre }
Messages : 60
| ça marche merci beaucoup ! d'habitude, je garde une trace d'où je trouve mes tutoriels mais là je dois avouer que j'ai chercher mais sincèrement, je ne m'en souviens plus. Si je retrouve le tutoriel, je t'enverrais un mp | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Aucun problème, c'était plutot pour prévenir l'auteur de préciser dans ses messages que son code n'était à la base pas fait pour être utilisé avec plusieurs fois un système d'onglets dans une même page ^^ J'te souhaite bon courage pour ton fofo, j'archive Si tu as une question, hésite pas à re-passer | | |
| | | Contenu sponsorisé
| | | | | Problème avec le profil (à archiver) | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|