[AwesomeBB] Profils en onglets

**BADLANDS** · **BADLANDS** Jeu 22 Aoû 2019 - 17:31

Version du forum :
AwesomeBB
Templates modifiés :
oui
Navigateur :
Chrome

Bonjour,
J'aimerais pouvoir coder des profils en onglets pour mon forum, comme sur ces captures: un, deux, trois.

D'une part, je n'ai pas de code d'onglets fonctionnant dans les profils pour effectuer une telle transition, d'autre part, je ne sais pas comment isoler certains champs du profil pour diviser ainsi le profil (deux premiers onglets), bien que je sache qu'au niveau des variables, le profil est dissocié de la feuille de personnage.

J'ai essayé de m'aider de ces liens, sans succès, je vous les laisse au cas où:
https://forum.forumactif.com/t397039-recuperer-les-champs-des-profils-pour-mise-en-forme
https://forum.forumactif.com/t398576-isoler-des-champs-du-profil-dans-un-onglet-script#3328904
https://forum.forumactif.com/t384580-division-separation-champs-profil-postdetails-poster-profile#3235641

Voici le code de mon template 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(){ if(typeof(_atc) == "undefined") { _atc = { }; } }); 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).parent().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> <main id="topic"> <div class="topic-header"> <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>  <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}"> <i class="material-icons">mode_edit</i> <span>{L_POST_NEW_TOPIC}</span> </a>   <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default"> <i class="material-icons">reply</i> <span>{L_POST_REPLY_TOPIC}</span> </a>  <div id="breadcrumbs" class="breadcrumbs-topic"> <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a> {NAV_CAT_DESC} </div>  <div class="pagination"> {PAGINATION} </div>  </div> <div class="topic-actions"> <div class="topic-actions-buttons">  <div class="plus-menu-wrap"> <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}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </div>   <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  <a class="addthis_button">{L_SHARE}</a> </div> </div> {POLL_DISPLAY}   <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden"> <div class="block"> <div class="block-content"> {postrow.hidden.MESSAGE} <div class="block-footer" style="display: none;">   <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"> <div id="{postrow.U_POST_ID}" class="post-header"> <h2> <i class="material-icons">description</i> {postrow.displayed.ICON} <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span> </h2> <div class="mobile-hide post-buttons"> <ul> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> <div class="mobile-show dropdown post-buttons-mobile"> <i class="material-icons">more_horiz</i> <ul class="dropdown-box"> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> </div> <div class="post-body"> <div class="post"> <div class="post-content"> {postrow.displayed.MESSAGE}  <div class="attachbox"> {postrow.displayed.switch_attachments.L_ATTACHMENTS} <dl class="attachments">  <dt>  <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}   {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}  </dt> <dd>  <p> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT} </p>   <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p> </dd>  </dl> </div>   <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="post-footer">  <div class="vote">  <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up"> <i class="material-icons">thumb_up</i> </a>   <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down"> <i class="material-icons">thumb_down</i> </a>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <div class="vote-bar-desc"> {postrow.displayed.switch_vote_active.L_VOTE_TITLE} </div> <div class="vote-bars">  <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div> </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>  </div>  <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span> </div> </div> <aside class="post-aside"><div class="sticky"> <div class="post-author-status"></div> <div class="post-author"> <span class="post-author-name"> {postrow.displayed.POSTER_NAME} </span> <span class="post-author-title"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </span> </div> <div class="post-author-avatar"> <div class="avatar-big"> {postrow.displayed.POSTER_AVATAR} </div> </div> <dl class="post-author-details">  <dt>{postrow.displayed.profile_field.LABEL}</dt> <dd>{postrow.displayed.profile_field.CONTENT}</dd>  </dl> <div class="post-author-rpg"> {postrow.displayed.POSTER_RPG} </div> <div class="post-author-contact dropdown"> <i class="material-icons">keyboard_arrow_down</i> <div class="dropdown-box"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </div> </div> </div> </aside> </div> </div>   </div> </div> </div> </div>    <div class="block" id="forum_rules"> <div class="block-header"> {L_FORUM_RULES} </div> <div class="block-content"> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> </div> </div>  <div class="topic-actions bottom"> <div class="topic-actions-buttons">   {S_WATCH_TOPIC}   </div> </div>  <div class="pagination"> {PAGINATION} </div>  {INLINE_MESSAGE} {QUICK_REPLY_FORM} <span class="quickinstru">Accèdez à l'éditeur complet et la prévisualisation en copiant votre message, puis en cliquant sur le bouton de réponse en bas à droite.</span> <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <label> <span>{L_JUMP_TO}:</span> <div class="jumpbox-wrap"> {S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" /> </div> </label> </form>  <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label> <span>{L_MOD_TOOLS}:</span> <div class="quickmod-wrap"> {S_SELECT_MOD} <input type="submit" value="{L_GO}" /> </div> </label> </form> <div class="topic-admin">{S_TOPIC_ADMIN}</div>   <div class="block"> <div class="block-header"> {L_TABS_PERMISSIONS} </div> <div class="block-content"> {S_AUTH_LIST} </div> </div>   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}"> <i class="material-icons">reply</i> </a>  </main> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('.post-author-contact').each(function () { $(this).find('a:nth-child(5n)').each(function () { $(this).after('<br />'); }); }); }); //]]> </script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script> <script> $(document).ready(function() { $('pre, code').each(function(i, block) { hljs.highlightBlock(block); }); $('.post-author-contact').on('click', function() { if ($(this).parents('.post-body').css('flex-direction') == 'row') { $(this).children('.dropdown-box').css({ 'left': 'auto', 'right': '0' }); } else { $(this).children('.dropdown-box').css({ 'left': '0', 'right': 'auto' }); } }); }); </script>

Je vous remercie!

**Milouze14** · **Milouze14** Jeu 22 Aoû 2019 - 19:01

Hello Laura,

on va commencer par l'essentiel , peux tu donner la css associée avec le template donnée stp.

**BADLANDS** · **BADLANDS** Jeu 22 Aoû 2019 - 22:38

Bonsoir, merci pour la réponse rapide!
Je n'ai qu'à peine commencé à coder, le forum est neuf, donc aucune mise en page pour l'instant, si ce n'est ça apposé juste après la balise aside:

Code:: .sticky{ position: sticky; top: 40px; }

Aucun des codes d'onglets que j'ai testé n'a marché, donc je n'ai rien gardé
Merci :)

**Milouze14** · **Milouze14** Ven 23 Aoû 2019 - 6:38

Coucou Laura,
pour ma pomme ce sera Phil clin oeil

.

Cette class me dérange un peu sur cette version car elle existe déjà pour la barre de navigation.
Dans ton template, on va juste mettre une majuscule afin de ne pas récupérer le même style.
La partie html:

Code:: <div class="Sticky">

La partie css:

Code:: .Sticky{ position: sticky; top: 40px; }

Pour tes onglets et d'après ce que j'ai compris,
tu veux un bouton pour chaque champ car pour mettre un bouton pour en afficher plusieurs ce sera très compliqué chère amie.

**BADLANDS** · **BADLANDS** Ven 23 Aoû 2019 - 8:13

Bonjour Phil,
Je ne l'avais pas vue, je vais remplacer ça, merci

J'aurais aimé pouvoir séparer plusieurs champs du profil dans deux onglets maximum, étant sur un forum rpg, avec un onglet sur le joueur (messages, inscription, points, pseudo, etc...) et un onglet sur le personnage (âge, métier, statut civil, etc...). La feuille de personnage étant isolée dans le template, je sais comment m'y prendre, même si je n'ai toujours pas d'onglets fonctionnels. N'utiliser que le profil et la feuille de personnage ne pourrait malheureusement pas me suffire, car elle est séparée du reste quand on édite son profil et on ne peut pas rendre ses champs obligatoirement remplis. Donc j'aimerais même éviter de l'utiliser.

D'ailleurs quand je parle de feuille de personnage, je parle de ce qui s'active dans: panneau d'administration > modules > jeux de rôles > gestion des champs
Je ne sais pas si c'était clair, désolée

Un bouton par champ ça sera malheureusement trop, puisque j'en aurais un peu moins d'une dizaine, donc si c'est trop compliqué , tant pis. J'imagine que c'est parce que je suis en AwesomeBB ? Les captures proviennent d'un forum probablement en phpBB2 ou phpBB3 mais j'aurais voulu passer à une version plus récente. Si tu as la solution pour une autre version, je serais quand même curieuse d'en savoir plus, s'il te plaît :)

Si ce n'est pas possible, je te remercie quand même de m'avoir éclairée!

EDIT: j'ai essayé de reproduire un de mes essais, pour expliquer mieux ce que je cherche (le code des onglets n'était pas satisfaisant pour moi, je n'aime pas l'effet slideup, j'aurais préféré un effet fade, mais je ne sais pas comment le modifier):

J'ai donc pour mon template une structure d'onglets et également des balises venant isoler des champs du profil (basé sur ceci)

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(){ if(typeof(_atc) == "undefined") { _atc = { }; } }); 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).parent().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> <main id="topic"> <div class="topic-header"> <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>  <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}"> <i class="material-icons">mode_edit</i> <span>{L_POST_NEW_TOPIC}</span> </a>   <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default"> <i class="material-icons">reply</i> <span>{L_POST_REPLY_TOPIC}</span> </a>  <div id="breadcrumbs" class="breadcrumbs-topic"> <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a> {NAV_CAT_DESC} </div>  <div class="pagination"> {PAGINATION} </div>  </div> <div class="topic-actions"> <div class="topic-actions-buttons">  <div class="plus-menu-wrap"> <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}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </div>   <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  <a class="addthis_button">{L_SHARE}</a> </div> </div> {POLL_DISPLAY}   <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden"> <div class="block"> <div class="block-content"> {postrow.hidden.MESSAGE} <div class="block-footer" style="display: none;">   <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"> <div id="{postrow.U_POST_ID}" class="post-header"> <h2> <i class="material-icons">description</i> {postrow.displayed.ICON} <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span> </h2> <div class="mobile-hide post-buttons"> <ul> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> <div class="mobile-show dropdown post-buttons-mobile"> <i class="material-icons">more_horiz</i> <ul class="dropdown-box"> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> </div> <div class="post-body"> <div class="post"> <div class="post-content"> {postrow.displayed.MESSAGE}  <div class="attachbox"> {postrow.displayed.switch_attachments.L_ATTACHMENTS} <dl class="attachments">  <dt>  <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}   {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}  </dt> <dd>  <p> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT} </p>   <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p> </dd>  </dl> </div>   <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="post-footer">  <div class="vote">  <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up"> <i class="material-icons">thumb_up</i> </a>   <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down"> <i class="material-icons">thumb_down</i> </a>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <div class="vote-bar-desc"> {postrow.displayed.switch_vote_active.L_VOTE_TITLE} </div> <div class="vote-bars">  <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div> </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>  </div>  <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span> </div> </div> <aside class="post-aside"><div class="Sticky"> <div class="post-author-status"></div> <div class="post-author"> <span class="post-author-name"> {postrow.displayed.POSTER_NAME} </span> <span class="post-author-title"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </span> </div> <div class="post-author-avatar"> <div class="avatar-big"> {postrow.displayed.POSTER_AVATAR} </div> </div> <div class="systab"> <div class="post-author-details selected"> <span>PROFIL</span>  <div class="M14_ProfilPerso"> <dt>{postrow.displayed.profile_field.LABEL}</dt> <span class="M14_profilContent"><dd>{postrow.displayed.profile_field.CONTENT}</dd></span> </div>  </div> <div class="post-author-rpg"> <span>RPG</span> {postrow.displayed.POSTER_RPG} </div> </div> <div class="post-author-contact dropdown"> <i class="material-icons">keyboard_arrow_down</i> <div class="dropdown-box"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </div> </div> </div> </aside> </div> </div>   </div> </div> </div> </div>    <div class="block" id="forum_rules"> <div class="block-header"> {L_FORUM_RULES} </div> <div class="block-content"> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> </div> </div>  <div class="topic-actions bottom"> <div class="topic-actions-buttons">   {S_WATCH_TOPIC}   </div> </div>  <div class="pagination"> {PAGINATION} </div>  {INLINE_MESSAGE} {QUICK_REPLY_FORM} <span class="quickinstru">Accèdez à l'éditeur complet et la prévisualisation en copiant votre message, puis en cliquant sur le bouton de réponse en bas à droite.</span> <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <label> <span>{L_JUMP_TO}:</span> <div class="jumpbox-wrap"> {S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" /> </div> </label> </form>  <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label> <span>{L_MOD_TOOLS}:</span> <div class="quickmod-wrap"> {S_SELECT_MOD} <input type="submit" value="{L_GO}" /> </div> </label> </form> <div class="topic-admin">{S_TOPIC_ADMIN}</div>   <div class="block"> <div class="block-header"> {L_TABS_PERMISSIONS} </div> <div class="block-content"> {S_AUTH_LIST} </div> </div>   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}"> <i class="material-icons">reply</i> </a>  </main> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('.post-author-contact').each(function () { $(this).find('a:nth-child(5n)').each(function () { $(this).after('<br />'); }); }); }); //]]> </script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script> <script> $(document).ready(function() { $('pre, code').each(function(i, block) { hljs.highlightBlock(block); }); $('.post-author-contact').on('click', function() { if ($(this).parents('.post-body').css('flex-direction') == 'row') { $(this).children('.dropdown-box').css({ 'left': 'auto', 'right': '0' }); } else { $(this).children('.dropdown-box').css({ 'left': '0', 'right': 'auto' }); } }); }); </script>

En css j'ai:

Code:: .Sticky{ position: sticky; top: 40px; } /* les onglet */ .systab .tab { padding: 2px 10px; margin-right: 5px; color: #000; background: #fff; border: 1px solid #000; cursor: pointer; } /* les onglets survolés */ .systab .tab:hover { background: #b8efa1; color: #487f31; border-color: #487f31; } /* les onglets sélectionnés */ .systab .tab.selected{ color: #ccc; background: #333; } /* 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 */ .systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px; } /* flottement des conteneurs */ .systab.s_float .tabs,.systab.s_float .contents { float: left; }

Et enfin pour le JS, j'ai d'une part le code des onglets, d'autre part le code qui rajoute une id à chaque champ et enfin une tentative d'ajouter une fermeture du premier onglet et ouverture du deuxième onglet sur des champs spécifiques:

Code:: /*onglets*/ $(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) }); /*id des champs*/ $(function(){ $(".M14_ProfilPerso").attr( "id", function(div) { return "M14_label_" +div; }) }); /*ajout du deuxième onglet*/ $(function() { $("#M14_label_1").append("</div><div><span>Test</span>"); });

Tout fonctionne, si ce n'est le dernier bout de code js et donc le fait de pouvoir fermer les balises du premier onglet et ouvrir celles du deuxième, en ayant isolé par des id les champs du profil (ceci marche très bien)

J'espère que c'est plus clair!

**Milouze14** · **Milouze14** Ven 23 Aoû 2019 - 19:01

Re coucou,
je vais regarder tout cela demain car ce soir,
c'est un peu tard...(vacances obligent Ha ha ha

) .

J'ai déjà une structure en route sur mon fofo de tests clin oeil

Donc 2 onglets,un pour les champs du profil et un autre pour la feuille de personnage.
On va trouver une solution avec un script bien plus simple clin oeil

que l'actuel.

Edit:
si tu désires une version plus adaptée , tu as la version de ce forum (EDGE) , plus d'informations ici:
https://www.milouze14.com/f1-les-astuces-edge

Cette version est assez surprenante mais tellement simple pour coder, elle est basé sur la version Phpbb3.
Ta version est encore et encore en version bêta et donc pas très simple pour pas mal de trucs.....

**Milouze14** · **Milouze14** Sam 24 Aoû 2019 - 8:23

Coucou Laura,
alors, je viens de terminer tes onglets.
Le petit hic et que j'ai été obligé de mettre une petite croix afin de palier un un léger soucis de class selected lorsque l'on clique sur un des 2 boutons pour afficher soit le profill ou la feuille de personnage.

Alors voici ton template modifié:

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(){ if(typeof(_atc) == "undefined") { _atc = { }; } }); 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).parent().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> <main id="topic"> <div class="topic-header"> <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>  <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}"> <i class="material-icons">mode_edit</i> <span>{L_POST_NEW_TOPIC}</span> </a>   <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default"> <i class="material-icons">reply</i> <span>{L_POST_REPLY_TOPIC}</span> </a>  <div id="breadcrumbs" class="breadcrumbs-topic"> <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a> {NAV_CAT_DESC} </div>  <div class="pagination"> {PAGINATION} </div>  </div> <div class="topic-actions"> <div class="topic-actions-buttons">  <div class="plus-menu-wrap"> <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}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </div>   <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  <a class="addthis_button">{L_SHARE}</a> </div> </div> {POLL_DISPLAY}   <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden"> <div class="block"> <div class="block-content"> {postrow.hidden.MESSAGE} <div class="block-footer" style="display: none;">   <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"> <div id="{postrow.U_POST_ID}" class="post-header"> <h2> <i class="material-icons">description</i> {postrow.displayed.ICON} <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span> </h2> <div class="mobile-hide post-buttons"> <ul> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> <div class="mobile-show dropdown post-buttons-mobile"> <i class="material-icons">more_horiz</i> <ul class="dropdown-box"> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> </div> <div class="post-body"> <div class="post"> <div class="post-content"> {postrow.displayed.MESSAGE}  <div class="attachbox"> {postrow.displayed.switch_attachments.L_ATTACHMENTS} <dl class="attachments">  <dt>  <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}   {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}  </dt> <dd>  <p> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT} </p>   <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p> </dd>  </dl> </div>   <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="post-footer">  <div class="vote">  <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up"> <i class="material-icons">thumb_up</i> </a>   <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down"> <i class="material-icons">thumb_down</i> </a>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <div class="vote-bar-desc"> {postrow.displayed.switch_vote_active.L_VOTE_TITLE} </div> <div class="vote-bars">  <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div> </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>  </div>  <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span> </div> </div> <aside class="post-aside"> <div class="Sticky"> <div class="post-author-status"></div> <div class="post-author"> <span class="post-author-name"> {postrow.displayed.POSTER_NAME} </span> <span class="post-author-title"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </span> </div> <div class="post-author-avatar"> <div class="avatar-big"> {postrow.displayed.POSTER_AVATAR} </div> </div> <dl class="post-author-details"> <div class="M14_Onglets_CONT"> <p class="M14_Onglet_Profil">Profil</p> <p class="M14_Onglet_RPG">RPG</p><p class="M14_Onglet_Close" title="Fermer">X</p> </div> <div class="M14_Profil">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}  </div> <div class="M14_RPG post-author-rpg">{postrow.displayed.POSTER_RPG}</div> </dl> <div class="post-author-contact dropdown"> <i class="material-icons">keyboard_arrow_down</i> <div class="dropdown-box"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </div> </div> </div> </aside> </div> </div>   </div> </div> </div> </div>    <div class="block" id="forum_rules"> <div class="block-header"> {L_FORUM_RULES} </div> <div class="block-content"> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> </div> </div>  <div class="topic-actions bottom"> <div class="topic-actions-buttons">   {S_WATCH_TOPIC}   </div> </div>  <div class="pagination"> {PAGINATION} </div>  {INLINE_MESSAGE} {QUICK_REPLY_FORM} <span class="quickinstru">Accèdez à l'éditeur complet et la prévisualisation en copiant votre message, puis en cliquant sur le bouton de réponse en bas à droite.</span> <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <label> <span>{L_JUMP_TO}:</span> <div class="jumpbox-wrap"> {S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" /> </div> </label> </form>  <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label> <span>{L_MOD_TOOLS}:</span> <div class="quickmod-wrap"> {S_SELECT_MOD} <input type="submit" value="{L_GO}" /> </div> </label> </form> <div class="topic-admin">{S_TOPIC_ADMIN}</div>   <div class="block"> <div class="block-header"> {L_TABS_PERMISSIONS} </div> <div class="block-content"> {S_AUTH_LIST} </div> </div>   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}"> <i class="material-icons">reply</i> </a>  </main> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('.post-author-contact').each(function () { $(this).find('a:nth-child(5n)').each(function () { $(this).after('<br />'); }); }); }); //]]> </script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script> <script> $(document).ready(function() { $('pre, code').each(function(i, block) { hljs.highlightBlock(block); }); $('.post-author-contact').on('click', function() { if ($(this).parents('.post-body').css('flex-direction') == 'row') { $(this).children('.dropdown-box').css({ 'left': 'auto', 'right': '0' }); } else { $(this).children('.dropdown-box').css({ 'left': '0', 'right': 'auto' }); } }); }); </script>

Les lignes ajoutées:

Code:: <div class="M14_Onglets_CONT"> <p class="M14_Onglet_Profil">Profil</p> <p class="M14_Onglet_RPG">RPG</p><p class="M14_Onglet_Close"title="Fermer">X</p> </div> <div class="M14_Profil">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR}  </div> <div class="M14_RPG post-author-rpg">{postrow.displayed.POSTER_RPG}</div>

Penses a enregistrer puis à valider en cliquant respectivement sur puis

Pour le style, il va falloir supprimer ce que tu mentionnes ici(sauf Sticky):
https://www.milouze14.com/t32235-awesomebb-profils-en-onglets#613546

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:

Code:: /*On cache les parties profil et rpg*/ .M14_Profil,.M14_RPG{display:none;} /*On donne une apparence au bloc recevant les textes de champs*/ .M14_Onglets_CONT{text-align:center;} /*On donne une apparence aux onglets*/ p[class^="M14_Onglet"] { cursor:pointer; margin:2px; display:inline-grid; margin: 2px; width:auto; padding:2px 6px 2px 6px; background: white; border:2px solid black; /*les transitions tous navigateurs*/ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*Onglets profil selectionne*/ p.M14_Onglet_Profil.selected { background:#666666; color:orange; border:2px dotted orange; } /*Onglet rpg selectionne*/ p.M14_Onglet_RPG.selected { background:orange; color:#666666; border:2px dotted #6666666; }

Penses a cliquer sur le bouton

Puis pour terminer le script qui va rechercher si le membre a activé sa feuille de personnage,
dans le cas contraire, le bouton ne sera pas disponible.

Attention, le script est basé sur la même structure que le template, si tu modifies quelque chose (à part la CSS) , il ne fonctionnera plus.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches Sur les sujets
Déposes ceci:

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').toggle(); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').toggle(); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); });

Penses a cliquer sur le bouton Valid

On fera des retouches si besoin clin oeil

**BADLANDS** · **BADLANDS** Sam 24 Aoû 2019 - 11:22

Bonjour Phil,
Je vais me renseigner sur EDGE, merci de la suggestion
Et les onglets marchent très bien, merci beaucoup!

Deux questions:
- est-ce qu'il serait possible d'avoir l'onglet profil sélectionné par défaut?
- est-ce qu'il est possible également du coup de diviser le premier onglet en deux, en ajoutant des id sur les champs du profil et en injectant une fermeture et ouverture d'onglet via le js? dans le but de séparer le profil en deux (en laissant la feuille de personnage à part) ou est-ce que ce n'est pas possible sous awesomebb? c'était ce que j'avais essayé de faire dans mon message juste au-dessus et qui ne fonctionnait pas, j'avais réussi à ajouter une id sur chaque champ grâce à cette méthode (dans le haut du sujet) mais pas à ajouter une fermeture de div et une ouverture d'un nouvel onglet

Dernière question, pas essentielle mais on sait jamais: est-ce qu'il est possible d'ajouter un effet fade-in/fade-out à l'ouverture et la fermeture des onglets, pour que le changement soit moins abrupte?

Merci encore une fois en tout cas pour le travail effectué!

**Milouze14** · **Milouze14** Sam 24 Aoû 2019 - 16:01

Re Laura,

- est-ce qu'il serait possible d'avoir l'onglet profil sélectionné par défaut?

C'est à dire sélectionné et le profil affiché?

- est-ce qu'il est possible également du coup de diviser le premier onglet en deux, en ajoutant des id sur les champs du profil et en injectant une fermeture et ouverture d'onglet via le js? dans le but de séparer le profil en deux

Alors, merci de demander cela avant que le script soit terminé car
il va falloir le revoir désormais oups1

.

Bref,

Ce n'est plus des id que l'on mentionne Laura mais bel et bien du code html et ce ne sera pas possible malheureusement à moins que je ne saisisse pas ta demande !!

Dernière question, pas essentielle mais on sait jamais: est-ce qu'il est possible d'ajouter un effet fade-in/fade-out à l'ouverture et la fermeture des onglets, pour que le changement soit moins abrupte?

Hum, si je compte bien cela fait 3 questions lOL

.

Testes avec ce script:

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').fadeToggle(); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').fadeToggle(); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); });

Ou celui-ci:

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').fadeToggle(500); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').fadeToggle(500); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); });

Ou celui-ci:

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').fadeToggle("fast"); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').fadeToggle("fast"); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); });

Mais ne te réjouis pas trop car dans cette partie et en l’occurrence sur cette version, on ne pourra pas obtenir mieux.

Je reviens ce soir impeccable

.

**BADLANDS** · **BADLANDS** Sam 24 Aoû 2019 - 17:47

Bonsoir Phil,
Oui, j'aimerais que l'onglet profil soit sélectionné par défaut et son contenu affiché par défaut également, si possible.

J'ai parlé du fait d'isoler des champs du profil pour le diviser à plusieurs reprises:

BADLANDS a écrit:Bonjour,
J'aimerais pouvoir coder des profils en onglets pour mon forum, comme sur ces captures: un, deux, trois.

[...] je ne sais pas comment isoler certains champs du profil pour diviser ainsi le profil (deux premiers onglets), bien que je sache qu'au niveau des variables, le profil est dissocié de la feuille de personnage.

BADLANDS a écrit:J'aurais aimé pouvoir séparer plusieurs champs du profil dans deux onglets maximum, étant sur un forum rpg, avec un onglet sur le joueur (messages, inscription, points, pseudo, etc...) et un onglet sur le personnage (âge, métier, statut civil, etc...). La feuille de personnage étant isolée dans le template, je sais comment m'y prendre, même si je n'ai toujours pas d'onglets fonctionnels. N'utiliser que le profil et la feuille de personnage ne pourrait malheureusement pas me suffire, car elle est séparée du reste quand on édite son profil et on ne peut pas rendre ses champs obligatoirement remplis. Donc j'aimerais même éviter de l'utiliser.

BADLANDS a écrit:Et enfin pour le JS, j'ai d'une part le code des onglets, d'autre part le code qui rajoute une id à chaque champ et enfin une tentative d'ajouter une fermeture du premier onglet et ouverture du deuxième onglet sur des champs spécifiques:

[...]

Tout fonctionne, si ce n'est le dernier bout de code js et donc le fait de pouvoir fermer les balises du premier onglet et ouvrir celles du deuxième, en ayant isolé par des id les champs du profil (ceci marche très bien)

Je pensais avoir été claire mais peut-être pas. Je parlais d'id dans le sens où elles permettraient d'isoler justement des champs du profil, et de viser un champ spécifique pour injecter via du JS des balises HTML. Ces balises permettraient de fermer le premier onglet et ouvrir le deuxième, entre deux champs spécifiques du profil (visés grâce aux id). Peut-être qu'il existe une autre méthode pour arriver à ce but mais je ne la connais pas.

Merci beaucoup pour les 3 scripts, les deuxième et troisième correspondent exactement à ce que je voulais :) Pour info histoire de faciliter la suite, j'utiliserai le deuxième script à partir de maintenant

Je te remercie encore de tes réponses et ton travail :)

**Milouze14** · **Milouze14** Sam 24 Aoû 2019 - 18:56

Bonsoir Laura,
Oui, j'aimerais que l'onglet profil soit sélectionné par défaut et son contenu affiché par défaut également, si possible.

ah vi, dans ta feuille de style recherches ceci:

Code:: /*On cache les parties profil et rpg*/ .M14_Profil,.M14_RPG{display:none;}

Remplaces par:

Code:: /*On cache la partie rpg*/ .M14_RPG{display:none;}

Le script pour avoir les ids de chaque champ:
tu peux l'ajouter à l'actuel:

Code:: $(function(){ $(".M14_Profil").each(function(){$(this).find(".M14_ProfilPerso").attr( "id", function(div) { return "M14_label_" +div;})});});

Tu auras donc en retour pour chaque champ:
Le premier:

Code:: div#M14_label_0

Le deuxième:

Code:: div#M14_label_1

Etc etc.

Ensuite dans ton template dans sa totalité:

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(){ if(typeof(_atc) == "undefined") { _atc = { }; } }); 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).parent().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> <main id="topic"> <div class="topic-header"> <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>  <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}"> <i class="material-icons">mode_edit</i> <span>{L_POST_NEW_TOPIC}</span> </a>   <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default"> <i class="material-icons">reply</i> <span>{L_POST_REPLY_TOPIC}</span> </a>  <div id="breadcrumbs" class="breadcrumbs-topic"> <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a> {NAV_CAT_DESC} </div>  <div class="pagination"> {PAGINATION} </div>  </div> <div class="topic-actions"> <div class="topic-actions-buttons">  <div class="plus-menu-wrap"> <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}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </div>   <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  <a class="addthis_button">{L_SHARE}</a> </div> </div> {POLL_DISPLAY}   <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden"> <div class="block"> <div class="block-content"> {postrow.hidden.MESSAGE} <div class="block-footer" style="display: none;">   <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"> <div id="{postrow.U_POST_ID}" class="post-header"> <h2> <i class="material-icons">description</i> {postrow.displayed.ICON} <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span> </h2> <div class="mobile-hide post-buttons"> <ul> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> <div class="mobile-show dropdown post-buttons-mobile"> <i class="material-icons">more_horiz</i> <ul class="dropdown-box"> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> </div> <div class="post-body"> <div class="post"> <div class="post-content"> {postrow.displayed.MESSAGE}  <div class="attachbox"> {postrow.displayed.switch_attachments.L_ATTACHMENTS} <dl class="attachments">  <dt>  <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}   {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}  </dt> <dd>  <p> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT} </p>   <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p> </dd>  </dl> </div>   <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="post-footer">  <div class="vote">  <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up"> <i class="material-icons">thumb_up</i> </a>   <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down"> <i class="material-icons">thumb_down</i> </a>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <div class="vote-bar-desc"> {postrow.displayed.switch_vote_active.L_VOTE_TITLE} </div> <div class="vote-bars">  <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div> </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>  </div>  <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span> </div> </div> <aside class="post-aside"> <div class="Sticky"> <div class="post-author-status"></div> <div class="post-author"> <span class="post-author-name"> {postrow.displayed.POSTER_NAME} </span> <span class="post-author-title"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </span> </div> <div class="post-author-avatar"> <div class="avatar-big"> {postrow.displayed.POSTER_AVATAR} </div> </div> <dl class="post-author-details"> <div class="M14_Onglets_CONT"> <p class="M14_Onglet_Profil selected">Profil</p> <p class="M14_Onglet_RPG">RPG</p><p class="M14_Onglet_Close" title="Fermer">X</p> </div> <div class="M14_Profil">  <div class="M14_ProfilPerso"> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>  </div> <div class="M14_RPG post-author-rpg">{postrow.displayed.POSTER_RPG}</div> </dl> <div class="post-author-contact dropdown"> <i class="material-icons">keyboard_arrow_down</i> <div class="dropdown-box"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </div> </div> </div> </aside> </div> </div>   </div> </div> </div> </div>    <div class="block" id="forum_rules"> <div class="block-header"> {L_FORUM_RULES} </div> <div class="block-content"> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> </div> </div>  <div class="topic-actions bottom"> <div class="topic-actions-buttons">   {S_WATCH_TOPIC}   </div> </div>  <div class="pagination"> {PAGINATION} </div>  {INLINE_MESSAGE} {QUICK_REPLY_FORM} <span class="quickinstru">Accèdez à l'éditeur complet et la prévisualisation en copiant votre message, puis en cliquant sur le bouton de réponse en bas à droite.</span> <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <label> <span>{L_JUMP_TO}:</span> <div class="jumpbox-wrap"> {S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" /> </div> </label> </form>  <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label> <span>{L_MOD_TOOLS}:</span> <div class="quickmod-wrap"> {S_SELECT_MOD} <input type="submit" value="{L_GO}" /> </div> </label> </form> <div class="topic-admin">{S_TOPIC_ADMIN}</div>   <div class="block"> <div class="block-header"> {L_TABS_PERMISSIONS} </div> <div class="block-content"> {S_AUTH_LIST} </div> </div>   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}"> <i class="material-icons">reply</i> </a>  </main> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('.post-author-contact').each(function () { $(this).find('a:nth-child(5n)').each(function () { $(this).after('<br />'); }); }); }); //]]> </script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script> <script> $(document).ready(function() { $('pre, code').each(function(i, block) { hljs.highlightBlock(block); }); $('.post-author-contact').on('click', function() { if ($(this).parents('.post-body').css('flex-direction') == 'row') { $(this).children('.dropdown-box').css({ 'left': 'auto', 'right': '0' }); } else { $(this).children('.dropdown-box').css({ 'left': '0', 'right': 'auto' }); } }); }); </script>

J'ai ajouté la class selected et la div englobant les champs pour rendre le script compatible.

Code:: <p class="M14_Onglet_Profil selected">

Code:: <div class="M14_ProfilPerso"> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} </div>

On avance doucement clin oeil

**BADLANDS** · **BADLANDS** Sam 24 Aoû 2019 - 19:08

Rebonsoir,

Tout fonctionne, l'onglet profil est bien affiché par défaut et en utilisant l'inspecteur, j'ai bien des id associées à chaque champ. Merci beaucoup!

J'attends la suite patiemment :)

**Milouze14** · **Milouze14** Sam 24 Aoû 2019 - 19:17

Re bonsoir,

je voudrais avoir plus de renseignements concernant ceci:

J'attends la suite patiemment

Ces balises permettraient de fermer le premier onglet et ouvrir le deuxième, entre deux champs spécifiques du profil (visés grâce aux id)

Sois explicite s'il te plait, je ferais tout cela demain matin clin oeil

Quel onglet stp, je ne sais pas ce que tu souhaites de mon côté.
Peux tu imager ton souhait ?

**BADLANDS** · **BADLANDS** Sam 24 Aoû 2019 - 20:56

Rebonsoir,
Pas de soucis. Pour reprendre mes captures (un, deux, trois), les deux premiers onglets sont visiblement deux groupes de champs du profil, qui ont été divisé à partir d'un champ spécifique et le troisième onglet est la feuille de personnage. En inspectant le code de ce forum, je retrouve notamment des id sur les champs, qui me laissent penser qu'ils ont utilisé ces dernières pour placer des balises html au bon endroit via du javascript.

L'idée serait donc de créer un deuxième onglet à partir d'un champ spécifique, avec des méthodes comme .append(), .appendTo() qui viendrait injecter des balises de fermeture pour le premier onglet et des balises d'ouverture pour le deuxième. A la fin, ça donnerait donc quelque chose comme:

Code:: <div class="M14_Profil"> {première partie des champs du profil}</div> <div class="M14_Profil2"> {deuxième partie des champs du profil}</div> <div class="M14_RPG post-author-rpg">{feuille de personnage}</div>

sachant que seuls les premiers et troisième onglet seraient créé via le template et le deuxième créé via du js (puisque nous avons accès qu'à la variable englobant tous les champs du profil via le template), en injectant ceci à la suite d'une champ spécifique:

Code:: </div><div class="M14_Profil2">

J'ai donc essayé avec quelque chose comme

Code:: $("#M14_label_1").append("</div><div class="M14_Profil2">")

Mais le code est injecté entre les balises du champ visé et non pas à la suite, et puisque je n'ai que des connaissances limitées en JS, je suis bloquée à cet endroit pour diviser les champs du profil en deux onglets distincts

J'espère que c'est plus clair! Je te remercie :)

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 6:06

Coucou Laura,

pour être certain d'ouvrir les bon éléments il vaut mieux avoir un script mieux adapté à ta demande car le membre peut avoir 4 champs de renseigné et admettons le troisième champ qui aura pour toi une valeur équivalente parce qu’il a l'id #M14_label_2 , ce ne sera pas toujours le cas donc utilise plutôt ce script:

Code:: $(function() { for (var field = $('.M14_ProfilPerso'), i = 0, j = field.length; i < j; i++) { field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) { var c = s.charCodeAt(0); if (c == 32) return '-'; return '__' + ('000' + c.toString(16)).slice(-4); }); } });

Tu verras dans le code source du navigateur la différence.

Je regarde sur mon fofo de test pour faire une autre apparence,
que dirais tu mettre une div qui recevrait les champs avec un fondu au click sur les boutons?

Pour cela, il serait judicieux de ne pas avoir d'image mais juste du texte clin oeil

.

**BADLANDS** · **BADLANDS** Dim 25 Aoû 2019 - 7:47

Bonjour Phil,
En effet, je vois bien la différence ! Et je comprends que si le nom du champ n'est pas affiché, le champ ne reçoit pas de class propre. Est-ce que du coup changer le type d'affichage d'un champ image en "Texte" ou "Texte + Icône" plutôt que "Icône" dans le panneau d'administration permettrait quand même d'avoir des images?

Je regarde sur mon fofo de test pour faire une autre apparence,
que dirais tu mettre une div qui recevrait les champs avec un fondu au click sur les boutons?

Ca me semble bien! Si c'est possible de garder le même genre de fondu qu'actuellement, ça serait parfait. Merci beaucoup :)

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 8:54

Est-ce que du coup changer le type d'affichage d'un champ image en "Texte" ou "Texte + Icône" plutôt que "Icône" dans le panneau d'administration permettrait quand même d'avoir des images?

Avec le script que je vais te donner, il n'y aura plus de soucis Laura, par contre car il y aura toujours un ou plusieurs mais.....
Tous les champs dans ton P.A devront avoir un "Retour à la ligne" fin d'avoir un rendu identique lors de l'importation dans cette fameuse div mentionnait plus haut.

Et le soucis qui fâche, lorsque l'on importe du html,
la div ne peut pas recevoir d'animation dans ce cas.

On teste tout de même:

Alors j'ai supprimé le bouton de fermeture.
Le template modifié:

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(){ if(typeof(_atc) == "undefined") { _atc = { }; } }); 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).parent().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> <main id="topic"> <div class="topic-header"> <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>  <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}"> <i class="material-icons">mode_edit</i> <span>{L_POST_NEW_TOPIC}</span> </a>   <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default"> <i class="material-icons">reply</i> <span>{L_POST_REPLY_TOPIC}</span> </a>  <div id="breadcrumbs" class="breadcrumbs-topic"> <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a> {NAV_CAT_DESC} </div>  <div class="pagination"> {PAGINATION} </div>  </div> <div class="topic-actions"> <div class="topic-actions-buttons">  <div class="plus-menu-wrap"> <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}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </div>   <span> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span>   <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  <a class="addthis_button">{L_SHARE}</a> </div> </div> {POLL_DISPLAY}   <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden"> <div class="block"> <div class="block-content"> {postrow.hidden.MESSAGE} <div class="block-footer" style="display: none;">   <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"> <div id="{postrow.U_POST_ID}" class="post-header"> <h2> <i class="material-icons">description</i> {postrow.displayed.ICON} <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span> </h2> <div class="mobile-hide post-buttons"> <ul> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> <div class="mobile-show dropdown post-buttons-mobile"> <i class="material-icons">more_horiz</i> <ul class="dropdown-box"> <li class="btn-thank"> {postrow.displayed.THANK_IMG} </li> <li class="btn-quote-multi"> {postrow.displayed.MULTIQUOTE_IMG} </li> <li class="btn-quote"> {postrow.displayed.QUOTE_IMG} </li> <li class="btn-edit"> {postrow.displayed.EDIT_IMG} </li> <li class="btn-delete"> {postrow.displayed.DELETE_IMG} </li> <li class="btn-ip"> {postrow.displayed.IP_IMG} </li> <li class="btn-report"> {postrow.displayed.REPORT_IMG_NEW} </li> </ul> </div> </div> <div class="post-body"> <div class="post"> <div class="post-content"> {postrow.displayed.MESSAGE}  <div class="attachbox"> {postrow.displayed.switch_attachments.L_ATTACHMENTS} <dl class="attachments">  <dt>  <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}   {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}  </dt> <dd>  <p> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT} </p>   <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p> </dd>  </dl> </div>   <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="post-footer">  <div class="vote">  <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up"> <i class="material-icons">thumb_up</i> </a>   <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down"> <i class="material-icons">thumb_down</i> </a>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <div class="vote-bar-desc"> {postrow.displayed.switch_vote_active.L_VOTE_TITLE} </div> <div class="vote-bars">  <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div> </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>  </div>  <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span> </div> </div> <aside class="post-aside"> <div class="Sticky"> <div class="post-author-status"></div> <div class="post-author"> <span class="post-author-name"> {postrow.displayed.POSTER_NAME} </span> <span class="post-author-title"> {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE} </span> </div> <div class="post-author-avatar"> <div class="avatar-big"> {postrow.displayed.POSTER_AVATAR} </div> </div> <dl class="post-author-details"> <div class="M14_Onglets_CONT"> <p class="M14_Onglet_Profil selected">Profil</p><p class="M14_Onglet_ProfilLast">Suite</p> <p class="M14_Onglet_RPG">RPG</p> </div> <div class="M14_Profil">  <div class="M14_ProfilPerso"> {postrow.displayed.profile_field.LABEL} <span class="M14_content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>  </div> <div class="M14_RPG post-author-rpg">{postrow.displayed.POSTER_RPG}</div> <div class="M14_html"></div> </dl> <div class="post-author-contact dropdown"> <i class="material-icons">keyboard_arrow_down</i> <div class="dropdown-box"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}  {postrow.displayed.contact_field.CONTENT}  </div> </div> </div> </aside> </div> </div>   </div> </div> </div> </div>    <div class="block" id="forum_rules"> <div class="block-header"> {L_FORUM_RULES} </div> <div class="block-content"> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> </div> </div>  <div class="topic-actions bottom"> <div class="topic-actions-buttons">   {S_WATCH_TOPIC}   </div> </div>  <div class="pagination"> {PAGINATION} </div>  {INLINE_MESSAGE} {QUICK_REPLY_FORM} <span class="quickinstru">Accèdez à l'éditeur complet et la prévisualisation en copiant votre message, puis en cliquant sur le bouton de réponse en bas à droite.</span> <form class="jumpbox" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <label> <span>{L_JUMP_TO}:</span> <div class="jumpbox-wrap"> {S_JUMPBOX_SELECT} <input type="submit" value="{L_GO}" /> </div> </label> </form>  <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label> <span>{L_MOD_TOOLS}:</span> <div class="quickmod-wrap"> {S_SELECT_MOD} <input type="submit" value="{L_GO}" /> </div> </label> </form> <div class="topic-admin">{S_TOPIC_ADMIN}</div>   <div class="block"> <div class="block-header"> {L_TABS_PERMISSIONS} </div> <div class="block-content"> {S_AUTH_LIST} </div> </div>   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}"> <i class="material-icons">reply</i> </a>  </main> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('.post-author-contact').each(function () { $(this).find('a:nth-child(5n)').each(function () { $(this).after('<br />'); }); }); }); //]]> </script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script> <script> $(document).ready(function() { $('pre, code').each(function(i, block) { hljs.highlightBlock(block); }); $('.post-author-contact').on('click', function() { if ($(this).parents('.post-body').css('flex-direction') == 'row') { $(this).children('.dropdown-box').css({ 'left': 'auto', 'right': '0' }); } else { $(this).children('.dropdown-box').css({ 'left': '0', 'right': 'auto' }); } }); }); </script>

La c.s.s revue:

Code:: /*La div receveuse*/ .M14_html { padding:3px; min-height:60px; height:auto; max-height:150px; overflow-y:auto; background:#fafafa; border:2px solid #000000; } /*On cache les parties*/ .M14_Profil,.M14_RPG,.field_points,.field_reputations,.field_date-d__0027inscription{display:none;} /*On donne une apparence au bloc recevant les textes de champs*/ .M14_Onglets_CONT{text-align:center;width: 180px;} /*On donne une apparence aux onglets*/ p[class^="M14_Onglet"] { cursor:pointer; margin:2px; display:inline-grid; margin: 2px; width:auto; padding:2px 6px 2px 6px; background: white; border:2px solid black; /*les transitions tous navigateurs*/ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*Onglets selectionne*/ p[class^="M14_Onglet"].selected { background:black; color:white; }

Puis le script:

Code:: $(function(){ $('.Sticky').each(function(){ //LA DIV RECEVEUSE var $this=$(this).find('.M14_html'); var un=$(this).find('.field_sexe').html(); var deux=$(this).find('.field_messages').html(); var trois=$(this).find('.field_points').html(); var quatre=$(this).find('.field_reputations').html(); var cinq=$(this).find('.field_date-d__0027inscription').html(); var rpg=$(this).find('.M14_RPG.post-author-rpg').html(); //ON IMPORTE LES DEUX PREMIERS CHAMPS $this.html(''+un+''+deux+''); $(this).find('.M14_Onglet_Profil').click(function(){ $(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_ProfilLast,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+un+''+deux+''); }); //ON IMPORTE LES TROIS AUTRES CHAMPS $(this).find('.M14_Onglet_ProfilLast').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+trois+''+quatre+''+cinq+''); }); //ON IMPORTE LA FEUILLE DE PERSONNAGE $(this).find('.M14_Onglet_RPG').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_ProfilLast').removeClass('selected'); $this.html(rpg);}); });});

Ce qui t'interesse dans le script est ceci:

Code:: var un=$(this).find('.field_sexe').html(); var deux=$(this).find('.field_messages').html(); var trois=$(this).find('.field_points').html(); var quatre=$(this).find('.field_reputations').html(); var cinq=$(this).find('.field_date-d__0027inscription').html();

Donc sur ton fofo:
http://kindauseless.forumactif.com/t1-votre-1er-sujet#1

Tu as ces class:
field_messages
field_sexe
field_date-d__0027inscription
field_age
field_humeur

Ce sera donc comme ceci:

Code:: var un=$(this).find('.field_messages').html(); var deux=$(this).find('.field_sexe').html(); var trois=$(this).find('.field_date-d__0027inscription').html(); var quatre=$(this).find('.field_age').html(); var cinq=$(this).find('.field_humeur').html();

A toi ensuite de mettre les variables ou tu le souhaites, exemple avec le premier onglet on affiche seulement les deux premieres :

Code:: $(this).find('.M14_Onglet_Profil').click(function(){ $(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_ProfilLast,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+un+''+deux+''); });

Edit:penses a mentionner les bonnes class dans la feuille de style Lauraa clin oeil

**BADLANDS** · **BADLANDS** Dim 25 Aoû 2019 - 9:52

Rebonjour Phil,

J'ai dû mal installer car ça ne fonctionne pas tout à fait... Les champs ne vont pas dans la div et le deuxième onglet n'est pas cliquable. La date d'inscription semble avoir été bougée cependant

J'ai copié collé l'intégralité du template que tu m'as donné.

Ensuite pour le CSS j'ai:

Code:: .Sticky{ position:sticky; top:0; } /*La div receveuse*/ .M14_html { padding:3px; min-height:60px; height:auto; max-height:150px; overflow-y:auto; background:#fafafa; border:2px solid #000000; } /*On cache les parties*/ .M14_RPG,.field_points,.field_reputations,.field_date-d__0027inscription{display:none;} /*On donne une apparence au bloc recevant les textes de champs*/ .M14_Onglets_CONT{text-align:center;width: 180px;} /*On donne une apparence aux onglets*/ p[class^="M14_Onglet"] { cursor:pointer; margin:2px; display:inline-grid; margin: 2px; width:auto; padding:2px 6px 2px 6px; background: white; border:2px solid black; /*les transitions tous navigateurs*/ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*Onglets selectionne*/ p[class^="M14_Onglet"].selected { background:black; color:white; }

Pour le Javascript j'ai:

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').fadeToggle(500); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').fadeToggle(500); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); }); $(function() { for (var field = $('.M14_ProfilPerso'), i = 0, j = field.length; i < j; i++) { field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) { var c = s.charCodeAt(0); if (c == 32) return '-'; return '__' + ('000' + c.toString(16)).slice(-4); }); }}); $(function(){ $('.Sticky').each(function(){ //LA DIV RECEVEUSE var un=$(this).find('.field_sexe').html(); var deux=$(this).find('.field_messages').html(); var trois=$(this).find('.field_points').html(); var quatre=$(this).find('.field_reputations').html(); var cinq=$(this).find('.field_date-d__0027inscription').html(); //ON IMPORTE LES DEUX PREMIERS CHAMPS $this.html(''+un+''+deux+''); $(this).find('.M14_Onglet_Profil').click(function(){ $(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_ProfilLast,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+un+''+deux+''); }); //ON IMPORTE LES TROIS AUTRES CHAMPS $(this).find('.M14_Onglet_ProfilLast').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+trois+''+quatre+''+cinq+''); }); //ON IMPORTE LA FEUILLE DE PERSONNAGE $(this).find('.M14_Onglet_RPG').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_ProfilLast').removeClass('selected'); $this.html(rpg);}); });});

On y est presque ! Je te remercie encore une fois :)

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 10:07

Re coucou Laura,

J'avais édité mon message précédent concernant les class a masquer dans la feuille de style:
J'avais déposé les miennes.

Les tiennes sont les suivantes:
field_messages
field_sexe
field_date-d__0027inscription
field_age
field_humeur

Ceci est en trop dans le Javascript(donc a supprimer ):

Code:: $(function(){ $('.Sticky').each(function(){ var $this=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){$this.hide();}});}); }); $(function(){ $('.M14_Onglet_Profil').each(function(){ var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE PROFIL var textPROFIL="Voir le profil de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){ var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible"); $this.addClass('selected'); $this.next().removeClass('selected'); $this.closest('dl').find('.M14_Profil').fadeToggle(500); if(openrpg) {$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});}); $('.M14_Onglet_RPG').each(function(){ var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden"); var $this=$(this); //LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE var textPERSO="Voir la feuille de personnage de"; var auteur=$this.closest('.Sticky').find('.post-author-name').text(); $this.attr('title',''+textPERSO+' '+auteur+'').click(function(){ var openprof=$this.closest('dl').find('.M14_Profil').is(":visible"); $this.addClass('selected'); $this.prev().removeClass('selected'); $this.closest('dl').find('.M14_RPG.post-author-rpg').fadeToggle(500); if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});}); $('.M14_Onglet_Close').each(function(){ $(this).click(function(){ $(this).closest('div').find('p').removeClass('selected'); $(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide(); });}); });

De plus la variable recevant les champs a était supprimé!!

Remplaces la totalité du script par celui-ci:

Code:: $(function() { for (var field = $('.M14_ProfilPerso'), i = 0, j = field.length; i < j; i++) { field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) { var c = s.charCodeAt(0); if (c == 32) return '-'; return '__' + ('000' + c.toString(16)).slice(-4); }); }}); $(function(){ $('.Sticky').each(function(){ //LA DIV RECEVEUSE var $this=$(this).find('.M14_html'); var un=$(this).find('.field_messages').html(); var deux=$(this).find('.field_sexe').html(); var trois=$(this).find('.field_date-d__0027inscription').html(); var quatre=$(this).find('.field_age').html(); var cinq=$(this).find('.field_humeur').html(); //ON IMPORTE LES DEUX PREMIERS CHAMPS $this.html(''+un+''+deux+''); $(this).find('.M14_Onglet_Profil').click(function(){ $(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_ProfilLast,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+un+''+deux+''); }); //ON IMPORTE LES TROIS AUTRES CHAMPS $(this).find('.M14_Onglet_ProfilLast').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_RPG').removeClass('selected'); $this.html(''+trois+''+quatre+''+cinq+''); }); //ON IMPORTE LA FEUILLE DE PERSONNAGE $(this).find('.M14_Onglet_RPG').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_ProfilLast').removeClass('selected'); $this.html(rpg);}); });});

Pour la css:

Code:: /*On cache les parties*/ .M14_Profil,.M14_RPG,.field_points,.field_reputations,.field_date-d__0027inscription{display:none;}

remplaces par:

Code:: /*On cache les parties*/ .M14_Profil,.M14_RPG,.field_date-d__0027inscription,.field_age,.field_humeur{display:none;}

**BADLANDS** · **BADLANDS** Dim 25 Aoû 2019 - 10:15

Ah en effet je n'ai pas pensé à relire le CSS, j'avais mal compris !
Ca marche parfaitement :) Je redemande au cas où mais du coup aucune possibilité d'effet fondu avec ce script? Ca serait mon seul regret haha
Sinon ce n'est pas grave, merci encore énormément pour ta patience et le travail fourni :)

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 10:22

Il n'y avait pas que la css,le script avait été modifié.
Comme mentionné plus haut, on ne peut pas donner d'effet
sur cette fameuse div receveuse ,désolé.

Juste pour supprimer l'onglet lorsque le membre n'a pas activé sa feuille de personnage.
Dans le script recherches ceci:

Code:: $('.Sticky').each(function(){

juste après dépose ceci:

Code:: var RpG=$(this).find('.M14_Onglet_RPG'); var action=$(this).find('.post-author-name a[href^="/u"]').attr('href'); var u="rpg"; $.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length; if(h){RpG.hide();} });

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 10:30

Est-ce normal que l'onglet rpg ne fonctionne pas chez toi moi en tant qu'invité il ne m'affiche rien !!

Je reviens ce soir pour peaufiner tout cela

**BADLANDS** · **BADLANDS** Dim 25 Aoû 2019 - 11:17

Oui, j'avais bien remplacé le code javascript également. Dommage pour l'animation, ce n'est pas grave
Le code js est bien rajouté! Par contre oui, l'onglet lui même n'affichait pas le contenu de la feuille de personnage... J'ai réussi à réparer, en créant une nouvelle variable:

Code:: var six=$(this).find('.post-author-rpg').html();

Ce qui donne plus bas:

Code:: //ON IMPORTE LA FEUILLE DE PERSONNAGE $(this).find('.M14_Onglet_RPG').click(function(){$(this).addClass('selected'); $(this).closest('div').find('.M14_Onglet_Profil,.M14_Onglet_ProfilLast').removeClass('selected'); $this.html(''+six+'');});

Ca a l'air de fonctionner!
Encore merci beaucoup de ton aide, je marque le sujet comme résolu :)

**Milouze14** · **Milouze14** Dim 25 Aoû 2019 - 12:04

De rien Laura,

Hello

Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

[AwesomeBB] Profils en onglets

[AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Re: [AwesomeBB] Profils en onglets

Créer un compte ou se connecter pour répondre

S'enregistrer

Connexion