Connexion

Récupérer mon mot de passe

Derniers sujets
» [TOUTES VERSIONS] Faire clignoter les images des nouveaux messages
par chrisnvidia Hier à 19:53

» histoire du Jour sans fin
par chrisnvidia Hier à 19:34

» [PhpBB2] Première lettre des titres en majuscule
par Milouze14 Hier à 19:17

» [PhpBB2] Notification membre premium
par Milouze14 Hier à 16:41

» [EDGE] Afficher les images côte à côte
par Neptunia Hier à 0:30

» La leçon "blagounette"
par Quad Daniel Ven 20 Sep 2019 - 9:49

» *RESOLU*[Edge] Customiser les boutons "Répondre" et "Nouveau sujet"
par Milouze14 Mar 17 Sep 2019 - 15:59

» [TOUTES VERSIONS] Afficher les outils de modération via la liste des sujets
par Splash Dim 15 Sep 2019 - 20:08

» *CORBEILLE*[AwesomeBB] Afficher le texte pour les champs du contact
par Milouze14 Dim 15 Sep 2019 - 19:20

» *RESOLU*[Edge] Ajouter l'année sur les posts
par Milouze14 Dim 15 Sep 2019 - 17:22

» *RESOLU*[Edge] Arrondir les angles du forum
par Milouze14 Sam 14 Sep 2019 - 19:05

» [AwesomeBB]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 7:35

» [Edge]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 6:36

» [ModernBB]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 6:25

» [Invision]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 5:32

» [PhpBB3]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 5:13

» [PunBB]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 4:57

» [PhpBB2]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Milouze14 Sam 14 Sep 2019 - 4:55

» [EDGE] Afficher/Masquer les catégories avec un effet
par chrisnvidia Ven 13 Sep 2019 - 22:17

» *RESOLU*[AwesomeBB] Afficher le bouton nouveau selon les permissions
par Milouze14 Jeu 12 Sep 2019 - 3:54

*RESOLU*[AwesomeBB] Profils en onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

BADLANDS
BADLANDS
Milouzien

MessageBADLANDS le 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>
        <!-- BEGIN switch_user_authpost -->
        <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>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
            <i class="material-icons">reply</i>
            <span>{L_POST_REPLY_TOPIC}</span>
        </a>
        <!-- END switch_user_authreply -->
        <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>
        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->
    </div>

    <div class="topic-actions">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_plus_menu -->
            <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>
            <!-- END switch_plus_menu -->

            <!-- BEGIN switch_twitter_btn -->
            <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>
            <!-- END switch_twitter_btn -->

            <!-- BEGIN switch_fb_likebtn -->
            <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>
            <!-- END switch_fb_likebtn -->

            <a class="addthis_button">{L_SHARE}</a>
        </div>
    </div>

    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <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;">
                    <!-- END hidden -->

                    <!-- BEGIN displayed -->
                    <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}

                                    <!-- BEGIN switch_attachments -->
                                    <div class="attachbox">
                                        {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                        <dl class="attachments">
                                            <!-- BEGIN switch_post_attachments -->
                                            <dt>
                                                <!-- BEGIN switch_dl_att -->
                                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_dl_att -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_no_dl_att -->
                                            </dt>
                                            <dd>
                                                <!-- BEGIN switch_no_comment -->
                                                <p>
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                </p>
                                                <!-- END switch_no_comment -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                <!-- END switch_no_dl_att -->
                                                <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>
                                            <!-- END switch_post_attachments -->
                                        </dl>
                                    </div>
                                    <!-- END switch_attachments -->
                                    <!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                    <!-- END switch_signature -->
                                </div>
                                <div class="post-footer">
                                    <!-- BEGIN switch_vote_active -->
                                    <div class="vote">
                                        <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                            <i class="material-icons">thumb_up</i>
                                        </a>
                                        <!-- END switch_vote -->

                                        <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                            <i class="material-icons">thumb_down</i>
                                        </a>
                                        <!-- END switch_vote -->

                                        <!-- BEGIN switch_bar -->
                                        <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">
                                                <!-- BEGIN switch_vote_plus -->
                                                <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                <!-- END switch_vote_plus -->

                                                <!-- BEGIN switch_vote_minus -->
                                                <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                <!-- END switch_vote_minus -->
                                            </div>
                                        </div>
                                        <!-- END switch_bar -->

                                        <!-- BEGIN switch_no_bar -->
                                        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                        <!-- END switch_no_bar -->
                                    </div>
                                    <!-- END switch_vote_active -->
                                    <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">
                                    <!-- BEGIN profile_field -->
                                    <dt>{postrow.displayed.profile_field.LABEL}</dt>
                                    <dd>{postrow.displayed.profile_field.CONTENT}</dd>
                                    <!-- END profile_field -->
                                </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}
                                        <!-- BEGIN contact_field -->
                                        {postrow.displayed.contact_field.CONTENT}
                                        <!-- END contact_field -->
                                    </div>
                                </div>
                              </div>
                            </aside>
                        </div>
                    </div>
                    <!-- END displayed -->

                    <!-- BEGIN hidden -->
                </div>
            </div>
        </div>
    </div>
    <!-- END hidden -->
    <!-- END postrow -->
    <!-- BEGIN switch_forum_rules -->
    <div class="block" id="forum_rules">
        <div class="block-header">
            {L_FORUM_RULES}
        </div>
        <div class="block-content">
            <table class="postbody">
                <tr>
                    <!-- BEGIN switch_forum_rule_image -->
                    <td class="logo">
                        <img src="{RULE_IMG_URL}" alt="" />
                    </td>
                    <!-- END switch_forum_rule_image -->
                    <td class="rules content">
                        {RULE_MSG}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- END switch_forum_rules -->

    <div class="topic-actions bottom">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_user_logged_in -->
            <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
            <!-- END watchtopic -->
            <!-- END switch_user_logged_in -->
        </div>
    </div>

    <!-- BEGIN topicpagination -->
    <div class="pagination">
        {PAGINATION}
    </div>
    <!-- END topicpagination -->

    {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>

    <!-- BEGIN viewtopic_bottom -->
    <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
        <input type="hidden" name="t" value="{TOPIC_ID}" />
        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <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>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
    <div class="block">
        <div class="block-header">
            {L_TABS_PERMISSIONS}
        </div>
        <div class="block-content">
            {S_AUTH_LIST}
        </div>
    </div>
    <!-- END show_permissions -->

    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
        <i class="material-icons">reply</i>
    </a>
    <!-- END switch_user_authreply -->
</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!


Dernière édition par BADLANDS le Dim 25 Aoû 2019 - 11:17, édité 2 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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>
        <!-- BEGIN switch_user_authpost -->
        <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>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
            <i class="material-icons">reply</i>
            <span>{L_POST_REPLY_TOPIC}</span>
        </a>
        <!-- END switch_user_authreply -->
        <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>
        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->
    </div>

    <div class="topic-actions">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_plus_menu -->
            <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>
            <!-- END switch_plus_menu -->

            <!-- BEGIN switch_twitter_btn -->
            <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>
            <!-- END switch_twitter_btn -->

            <!-- BEGIN switch_fb_likebtn -->
            <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>
            <!-- END switch_fb_likebtn -->

            <a class="addthis_button">{L_SHARE}</a>
        </div>
    </div>

    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <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;">
                    <!-- END hidden -->

                    <!-- BEGIN displayed -->
                    <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}

                                    <!-- BEGIN switch_attachments -->
                                    <div class="attachbox">
                                        {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                        <dl class="attachments">
                                            <!-- BEGIN switch_post_attachments -->
                                            <dt>
                                                <!-- BEGIN switch_dl_att -->
                                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_dl_att -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_no_dl_att -->
                                            </dt>
                                            <dd>
                                                <!-- BEGIN switch_no_comment -->
                                                <p>
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                </p>
                                                <!-- END switch_no_comment -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                <!-- END switch_no_dl_att -->
                                                <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>
                                            <!-- END switch_post_attachments -->
                                        </dl>
                                    </div>
                                    <!-- END switch_attachments -->
                                    <!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                    <!-- END switch_signature -->
                                </div>
                                <div class="post-footer">
                                    <!-- BEGIN switch_vote_active -->
                                    <div class="vote">
                                        <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                            <i class="material-icons">thumb_up</i>
                                        </a>
                                        <!-- END switch_vote -->

                                        <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                            <i class="material-icons">thumb_down</i>
                                        </a>
                                        <!-- END switch_vote -->

                                        <!-- BEGIN switch_bar -->
                                        <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">
                                                <!-- BEGIN switch_vote_plus -->
                                                <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                <!-- END switch_vote_plus -->

                                                <!-- BEGIN switch_vote_minus -->
                                                <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                <!-- END switch_vote_minus -->
                                            </div>
                                        </div>
                                        <!-- END switch_bar -->

                                        <!-- BEGIN switch_no_bar -->
                                        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                        <!-- END switch_no_bar -->
                                    </div>
                                    <!-- END switch_vote_active -->
                                    <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>
                                    <!-- BEGIN profile_field -->
                                  <div class="M14_ProfilPerso">
                                    <dt>{postrow.displayed.profile_field.LABEL}</dt>
                                    <span class="M14_profilContent"><dd>{postrow.displayed.profile_field.CONTENT}</dd></span>
                                  </div>
                                    <!-- END profile_field -->
                                </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}
                                        <!-- BEGIN contact_field -->
                                        {postrow.displayed.contact_field.CONTENT}
                                        <!-- END contact_field -->
                                    </div>
                                </div>
                              </div>
                            </aside>
                        </div>
                    </div>
                    <!-- END displayed -->

                    <!-- BEGIN hidden -->
                </div>
            </div>
        </div>
    </div>
    <!-- END hidden -->
    <!-- END postrow -->
    <!-- BEGIN switch_forum_rules -->
    <div class="block" id="forum_rules">
        <div class="block-header">
            {L_FORUM_RULES}
        </div>
        <div class="block-content">
            <table class="postbody">
                <tr>
                    <!-- BEGIN switch_forum_rule_image -->
                    <td class="logo">
                        <img src="{RULE_IMG_URL}" alt="" />
                    </td>
                    <!-- END switch_forum_rule_image -->
                    <td class="rules content">
                        {RULE_MSG}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- END switch_forum_rules -->

    <div class="topic-actions bottom">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_user_logged_in -->
            <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
            <!-- END watchtopic -->
            <!-- END switch_user_logged_in -->
        </div>
    </div>

    <!-- BEGIN topicpagination -->
    <div class="pagination">
        {PAGINATION}
    </div>
    <!-- END topicpagination -->

    {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>

    <!-- BEGIN viewtopic_bottom -->
    <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
        <input type="hidden" name="t" value="{TOPIC_ID}" />
        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <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>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
    <div class="block">
        <div class="block-header">
            {L_TABS_PERMISSIONS}
        </div>
        <div class="block-content">
            {S_AUTH_LIST}
        </div>
    </div>
    <!-- END show_permissions -->

    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
        <i class="material-icons">reply</i>
    </a>
    <!-- END switch_user_authreply -->
</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
Fondateur

MessageMilouze14 le 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
Fondateur

MessageMilouze14 le 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>
            <!-- BEGIN switch_user_authpost -->
            <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>
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
                <i class="material-icons">reply</i>
                <span>{L_POST_REPLY_TOPIC}</span>
            </a>
            <!-- END switch_user_authreply -->
            <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>
            <!-- BEGIN topicpagination -->
            <div class="pagination">
                {PAGINATION}
            </div>
            <!-- END topicpagination -->
        </div>

        <div class="topic-actions">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_plus_menu -->
                <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>
                <!-- END switch_plus_menu -->

                <!-- BEGIN switch_twitter_btn -->
                <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>
                <!-- END switch_twitter_btn -->

                <!-- BEGIN switch_fb_likebtn -->
                <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>
                <!-- END switch_fb_likebtn -->

                <a class="addthis_button">{L_SHARE}</a>
            </div>
        </div>

        {POLL_DISPLAY}

        <!-- BEGIN postrow -->
        <!-- BEGIN hidden -->
        <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;">
                        <!-- END hidden -->

                        <!-- BEGIN displayed -->
                        <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}

                                        <!-- BEGIN switch_attachments -->
                                        <div class="attachbox">
                                            {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                            <dl class="attachments">
                                                <!-- BEGIN switch_post_attachments -->
                                                <dt>
                                                    <!-- BEGIN switch_dl_att -->
                                                    <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_dl_att -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_no_dl_att -->
                                                </dt>
                                                <dd>
                                                    <!-- BEGIN switch_no_comment -->
                                                    <p>
                                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                    </p>
                                                    <!-- END switch_no_comment -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                    <!-- END switch_no_dl_att -->
                                                    <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>
                                                <!-- END switch_post_attachments -->
                                            </dl>
                                        </div>
                                        <!-- END switch_attachments -->
                                        <!-- BEGIN switch_signature -->
                                        <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                        <!-- END switch_signature -->
                                    </div>
                                    <div class="post-footer">
                                        <!-- BEGIN switch_vote_active -->
                                        <div class="vote">
                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                                <i class="material-icons">thumb_up</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                                <i class="material-icons">thumb_down</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_bar -->
                                            <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">
                                                    <!-- BEGIN switch_vote_plus -->
                                                    <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                    <!-- END switch_vote_plus -->

                                                    <!-- BEGIN switch_vote_minus -->
                                                    <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                    <!-- END switch_vote_minus -->
                                                </div>
                                            </div>
                                            <!-- END switch_bar -->

                                            <!-- BEGIN switch_no_bar -->
                                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                            <!-- END switch_no_bar -->
                                        </div>
                                        <!-- END switch_vote_active -->
                                        <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">                                     
<!-- BEGIN profile_field -->


{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
                                        <!-- END profile_field -->
                                      </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}
                                            <!-- BEGIN contact_field -->
                                            {postrow.displayed.contact_field.CONTENT}
                                            <!-- END contact_field -->
                                        </div>
                                    </div>
                                  </div>
                                </aside>
                            </div>
                        </div>
                        <!-- END displayed -->

                        <!-- BEGIN hidden -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END hidden -->
        <!-- END postrow -->
        <!-- BEGIN switch_forum_rules -->
        <div class="block" id="forum_rules">
            <div class="block-header">
                {L_FORUM_RULES}
            </div>
            <div class="block-content">
                <table class="postbody">
                    <tr>
                        <!-- BEGIN switch_forum_rule_image -->
                        <td class="logo">
                            <img src="{RULE_IMG_URL}" alt="" />
                        </td>
                        <!-- END switch_forum_rule_image -->
                        <td class="rules content">
                            {RULE_MSG}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END switch_forum_rules -->

        <div class="topic-actions bottom">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_user_logged_in -->
                <!-- BEGIN watchtopic -->
                {S_WATCH_TOPIC}
                <!-- END watchtopic -->
                <!-- END switch_user_logged_in -->
            </div>
        </div>

        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->

        {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>

        <!-- BEGIN viewtopic_bottom -->
        <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
            <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>
        <!-- END viewtopic_bottom -->

        <!-- BEGIN show_permissions -->
        <div class="block">
            <div class="block-header">
                {L_TABS_PERMISSIONS}
            </div>
            <div class="block-content">
                {S_AUTH_LIST}
            </div>
        </div>
        <!-- END show_permissions -->

        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
            <i class="material-icons">reply</i>
        </a>
        <!-- END switch_user_authreply -->
    </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">                                     
<!-- BEGIN profile_field -->


{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
                                        <!-- END profile_field -->
                                      </div>
 <div class="M14_RPG post-author-rpg">{postrow.displayed.POSTER_RPG}</div>
 
                               


Penses a enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout

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 *RESOLU*[AwesomeBB] Profils en onglets Sans_t10


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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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>
            <!-- BEGIN switch_user_authpost -->
            <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>
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
                <i class="material-icons">reply</i>
                <span>{L_POST_REPLY_TOPIC}</span>
            </a>
            <!-- END switch_user_authreply -->
            <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>
            <!-- BEGIN topicpagination -->
            <div class="pagination">
                {PAGINATION}
            </div>
            <!-- END topicpagination -->
        </div>

        <div class="topic-actions">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_plus_menu -->
                <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>
                <!-- END switch_plus_menu -->

                <!-- BEGIN switch_twitter_btn -->
                <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>
                <!-- END switch_twitter_btn -->

                <!-- BEGIN switch_fb_likebtn -->
                <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>
                <!-- END switch_fb_likebtn -->

                <a class="addthis_button">{L_SHARE}</a>
            </div>
        </div>

        {POLL_DISPLAY}

        <!-- BEGIN postrow -->
        <!-- BEGIN hidden -->
        <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;">
                        <!-- END hidden -->

                        <!-- BEGIN displayed -->
                        <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}

                                        <!-- BEGIN switch_attachments -->
                                        <div class="attachbox">
                                            {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                            <dl class="attachments">
                                                <!-- BEGIN switch_post_attachments -->
                                                <dt>
                                                    <!-- BEGIN switch_dl_att -->
                                                    <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_dl_att -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_no_dl_att -->
                                                </dt>
                                                <dd>
                                                    <!-- BEGIN switch_no_comment -->
                                                    <p>
                                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                    </p>
                                                    <!-- END switch_no_comment -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                    <!-- END switch_no_dl_att -->
                                                    <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>
                                                <!-- END switch_post_attachments -->
                                            </dl>
                                        </div>
                                        <!-- END switch_attachments -->
                                        <!-- BEGIN switch_signature -->
                                        <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                        <!-- END switch_signature -->
                                    </div>
                                    <div class="post-footer">
                                        <!-- BEGIN switch_vote_active -->
                                        <div class="vote">
                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                                <i class="material-icons">thumb_up</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                                <i class="material-icons">thumb_down</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_bar -->
                                            <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">
                                                    <!-- BEGIN switch_vote_plus -->
                                                    <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                    <!-- END switch_vote_plus -->

                                                    <!-- BEGIN switch_vote_minus -->
                                                    <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                    <!-- END switch_vote_minus -->
                                                </div>
                                            </div>
                                            <!-- END switch_bar -->

                                            <!-- BEGIN switch_no_bar -->
                                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                            <!-- END switch_no_bar -->
                                        </div>
                                        <!-- END switch_vote_active -->
                                        <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">                                      
<!-- BEGIN profile_field -->
  <div class="M14_ProfilPerso">

                                  
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
    </div>  
                                         <!-- END profile_field -->
                                      </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}
                                            <!-- BEGIN contact_field -->
                                            {postrow.displayed.contact_field.CONTENT}
                                            <!-- END contact_field -->
                                        </div>
                                    </div>
                                  </div>
                                </aside>
                            </div>
                        </div>
                        <!-- END displayed -->

                        <!-- BEGIN hidden -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END hidden -->
        <!-- END postrow -->
        <!-- BEGIN switch_forum_rules -->
        <div class="block" id="forum_rules">
            <div class="block-header">
                {L_FORUM_RULES}
            </div>
            <div class="block-content">
                <table class="postbody">
                    <tr>
                        <!-- BEGIN switch_forum_rule_image -->
                        <td class="logo">
                            <img src="{RULE_IMG_URL}" alt="" />
                        </td>
                        <!-- END switch_forum_rule_image -->
                        <td class="rules content">
                            {RULE_MSG}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END switch_forum_rules -->

        <div class="topic-actions bottom">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_user_logged_in -->
                <!-- BEGIN watchtopic -->
                {S_WATCH_TOPIC}
                <!-- END watchtopic -->
                <!-- END switch_user_logged_in -->
            </div>
        </div>

        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->

        {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>

        <!-- BEGIN viewtopic_bottom -->
        <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
            <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>
        <!-- END viewtopic_bottom -->

        <!-- BEGIN show_permissions -->
        <div class="block">
            <div class="block-header">
                {L_TABS_PERMISSIONS}
            </div>
            <div class="block-content">
                {S_AUTH_LIST}
            </div>
        </div>
        <!-- END show_permissions -->

        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
            <i class="material-icons">reply</i>
        </a>
        <!-- END switch_user_authreply -->
    </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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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>
            <!-- BEGIN switch_user_authpost -->
            <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>
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
                <i class="material-icons">reply</i>
                <span>{L_POST_REPLY_TOPIC}</span>
            </a>
            <!-- END switch_user_authreply -->
            <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>
            <!-- BEGIN topicpagination -->
            <div class="pagination">
                {PAGINATION}
            </div>
            <!-- END topicpagination -->
        </div>

        <div class="topic-actions">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_plus_menu -->
                <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>
                <!-- END switch_plus_menu -->

                <!-- BEGIN switch_twitter_btn -->
                <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>
                <!-- END switch_twitter_btn -->

                <!-- BEGIN switch_fb_likebtn -->
                <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>
                <!-- END switch_fb_likebtn -->

                <a class="addthis_button">{L_SHARE}</a>
            </div>
        </div>

        {POLL_DISPLAY}

        <!-- BEGIN postrow -->
        <!-- BEGIN hidden -->
        <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;">
                        <!-- END hidden -->

                        <!-- BEGIN displayed -->
                        <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}

                                        <!-- BEGIN switch_attachments -->
                                        <div class="attachbox">
                                            {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                            <dl class="attachments">
                                                <!-- BEGIN switch_post_attachments -->
                                                <dt>
                                                    <!-- BEGIN switch_dl_att -->
                                                    <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_dl_att -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                    <!-- END switch_no_dl_att -->
                                                </dt>
                                                <dd>
                                                    <!-- BEGIN switch_no_comment -->
                                                    <p>
                                                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                    </p>
                                                    <!-- END switch_no_comment -->
                                                    <!-- BEGIN switch_no_dl_att -->
                                                    <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                    <!-- END switch_no_dl_att -->
                                                    <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>
                                                <!-- END switch_post_attachments -->
                                            </dl>
                                        </div>
                                        <!-- END switch_attachments -->
                                        <!-- BEGIN switch_signature -->
                                        <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                        <!-- END switch_signature -->
                                    </div>
                                    <div class="post-footer">
                                        <!-- BEGIN switch_vote_active -->
                                        <div class="vote">
                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                                <i class="material-icons">thumb_up</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_vote -->
                                            <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                                <i class="material-icons">thumb_down</i>
                                            </a>
                                            <!-- END switch_vote -->

                                            <!-- BEGIN switch_bar -->
                                            <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">
                                                    <!-- BEGIN switch_vote_plus -->
                                                    <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                    <!-- END switch_vote_plus -->

                                                    <!-- BEGIN switch_vote_minus -->
                                                    <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                    <!-- END switch_vote_minus -->
                                                </div>
                                            </div>
                                            <!-- END switch_bar -->

                                            <!-- BEGIN switch_no_bar -->
                                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                            <!-- END switch_no_bar -->
                                        </div>
                                        <!-- END switch_vote_active -->
                                        <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">                                      
<!-- BEGIN profile_field -->
  <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>  
                                         <!-- END profile_field -->
                                      </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}
                                            <!-- BEGIN contact_field -->
                                            {postrow.displayed.contact_field.CONTENT}
                                            <!-- END contact_field -->
                                        </div>
                                    </div>
                                  </div>
                                </aside>
                            </div>
                        </div>
                        <!-- END displayed -->

                        <!-- BEGIN hidden -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END hidden -->
        <!-- END postrow -->
        <!-- BEGIN switch_forum_rules -->
        <div class="block" id="forum_rules">
            <div class="block-header">
                {L_FORUM_RULES}
            </div>
            <div class="block-content">
                <table class="postbody">
                    <tr>
                        <!-- BEGIN switch_forum_rule_image -->
                        <td class="logo">
                            <img src="{RULE_IMG_URL}" alt="" />
                        </td>
                        <!-- END switch_forum_rule_image -->
                        <td class="rules content">
                            {RULE_MSG}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END switch_forum_rules -->

        <div class="topic-actions bottom">
            <div class="topic-actions-buttons">
                <!-- BEGIN switch_user_logged_in -->
                <!-- BEGIN watchtopic -->
                {S_WATCH_TOPIC}
                <!-- END watchtopic -->
                <!-- END switch_user_logged_in -->
            </div>
        </div>

        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->

        {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>

        <!-- BEGIN viewtopic_bottom -->
        <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
            <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>
        <!-- END viewtopic_bottom -->

        <!-- BEGIN show_permissions -->
        <div class="block">
            <div class="block-header">
                {L_TABS_PERMISSIONS}
            </div>
            <div class="block-content">
                {S_AUTH_LIST}
            </div>
        </div>
        <!-- END show_permissions -->

        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
            <i class="material-icons">reply</i>
        </a>
        <!-- END switch_user_authreply -->
    </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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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
Fondateur

MessageMilouze14 le 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
Milouzien

MessageBADLANDS le 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
Fondateur

MessageMilouze14 le 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

Voir le sujet précédent Voir le sujet suivant Revenir en haut

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

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum