Membres connectés récemment
[AwesomeBB] Profils en onglets
2 participants
Page 1 sur 1
- 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
Je vous remercie!
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!
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:
Aucun des codes d'onglets que j'ai testé n'a marché, donc je n'ai rien gardé
Merci :)
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 :)
Coucou Laura,
pour ma pomme ce sera Phil .
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:
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.
pour ma pomme ce sera Phil .
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">
- 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.
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)
En css j'ai:
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)
J'espère que c'est plus clair!
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!
Re coucou,
je vais regarder tout cela demain car ce soir,
c'est un peu tard...(vacances obligent ) .
J'ai déjà une structure en route sur mon fofo de tests
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 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.....
je vais regarder tout cela demain car ce soir,
c'est un peu tard...(vacances obligent ) .
J'ai déjà une structure en route sur mon fofo de tests
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 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.....
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é:
Les lignes ajoutées:
Penses a enregistrer puis à valider en cliquant respectivement sur puis
Pour le style, il va falloir supprimer ce que tu mentionnes ici(sauf Sticky):
https://www.milouze14.com/t32235-awesomebb-profils-en-onglets#613546
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
Penses a cliquer sur le bouton
Puis pour terminer le script qui va rechercher si le membre a activé sa feuille de personnage,
dans le cas contraire, le bouton ne sera pas disponible.
Attention, le script est basé sur la même structure que le template, si tu modifies quelque chose (à part la CSS) , il ne fonctionnera plus.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Coches Sur les sujets
Déposes ceci:
Penses a cliquer sur le bouton
On fera des retouches si besoin
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 puis
Pour le style, il va falloir supprimer ce que tu mentionnes ici(sauf Sticky):
https://www.milouze14.com/t32235-awesomebb-profils-en-onglets#613546
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
- Code:
/*On cache les parties profil et rpg*/
.M14_Profil,.M14_RPG{display:none;}
/*On donne une apparence au bloc recevant les textes de champs*/
.M14_Onglets_CONT{text-align:center;}
/*On donne une apparence aux onglets*/
p[class^="M14_Onglet"]
{
cursor:pointer;
margin:2px;
display:inline-grid;
margin: 2px;
width:auto;
padding:2px 6px 2px 6px;
background: white;
border:2px solid black;
/*les transitions tous navigateurs*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*Onglets profil selectionne*/
p.M14_Onglet_Profil.selected
{
background:#666666;
color:orange;
border:2px dotted orange;
}
/*Onglet rpg selectionne*/
p.M14_Onglet_RPG.selected
{
background:orange;
color:#666666;
border:2px dotted #6666666;
}
Penses a cliquer sur le bouton
Puis pour terminer le script qui va rechercher si le membre a activé sa feuille de personnage,
dans le cas contraire, le bouton ne sera pas disponible.
Attention, le script est basé sur la même structure que le template, si tu modifies quelque chose (à part la CSS) , il ne fonctionnera plus.
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Coches Sur les sujets
Déposes ceci:
- Code:
$(function(){
$('.Sticky').each(function(){
var $this=$(this).find('.M14_Onglet_RPG');
var action=$(this).find('.post-author-name a[href^="/u"]').attr('href');
var u="rpg";$.get(action+u, function(data){var h= $(data).find('form[action$="mode=generate"]').length;
if(h){$this.hide();}});}); });
$(function(){
$('.M14_Onglet_Profil').each(function(){
var closerpg=$(this).closest('dl').find('.M14_RPG.post-author-rpg').is(":hidden");
var $this=$(this);
//LE TEXTE DE L INFOBULLE PROFIL
var textPROFIL="Voir le profil de";
var auteur=$this.closest('.Sticky').find('.post-author-name').text();
$(this).attr('title',''+textPROFIL+' '+auteur+'').click(function(){
var openrpg=$this.closest('dl').find('.M14_RPG.post-author-rpg').is(":visible");
$this.addClass('selected');
$this.next().removeClass('selected');
$this.closest('dl').find('.M14_Profil').toggle();
if(openrpg)
{$this.closest('dl').find('.M14_RPG.post-author-rpg').hide();}});});
$('.M14_Onglet_RPG').each(function(){
var closeprof=$(this).closest('dl').find('.M14_Profil').is(":hidden");
var $this=$(this);
//LE TEXTE DE L INFOBULLE FEUILLE DE PERSONNAGE
var textPERSO="Voir la feuille de personnage de";
var auteur=$this.closest('.Sticky').find('.post-author-name').text();
$this.attr('title',''+textPERSO+' '+auteur+'').click(function(){
var openprof=$this.closest('dl').find('.M14_Profil').is(":visible");
$this.addClass('selected');
$this.prev().removeClass('selected');
$this.closest('dl').find('.M14_RPG.post-author-rpg').toggle();
if(openprof){$this.closest('dl').find('.M14_Profil').hide();}});});
$('.M14_Onglet_Close').each(function(){
$(this).click(function(){
$(this).closest('div').find('p').removeClass('selected');
$(this).closest('dl').find('.M14_Profil,.M14_RPG.post-author-rpg').hide();
});});
});
Penses a cliquer sur le bouton
On fera des retouches si besoin
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é!
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é!
Re Laura,
C'est à dire sélectionné et le profil affiché?
Alors, merci de demander cela avant que le script soit terminé car
il va falloir le revoir désormais .
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 !!
Hum, si je compte bien cela fait 3 questions .
Testes avec ce script:
Ou celui-ci:
Ou celui-ci:
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 .
- 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 .
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 .
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 .
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:
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 :)
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 :)
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:
Remplaces par:
Le script pour avoir les ids de chaque champ:
tu peux l'ajouter à l'actuel:
Tu auras donc en retour pour chaque champ:
Le premier:
Ensuite dans ton template dans sa totalité:
J'ai ajouté la class selected et la div englobant les champs pour rendre le script compatible.
On avance doucement
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
- Code:
div#M14_label_1
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
Re bonsoir,
je voudrais avoir plus de renseignements concernant ceci:
Sois explicite s'il te plait, je ferais tout cela demain matin
Quel onglet stp, je ne sais pas ce que tu souhaites de mon côté.
Peux tu imager ton souhait ?
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
Quel onglet stp, je ne sais pas ce que tu souhaites de mon côté.
Peux tu imager ton souhait ?
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:
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:
J'ai donc essayé avec quelque chose comme
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 :)
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 :)
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:
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 .
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 .
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?
Ca me semble bien! Si c'est possible de garder le même genre de fondu qu'actuellement, ça serait parfait. Merci beaucoup :)
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 :)
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
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:
Pour le Javascript j'ai:
On y est presque ! Je te remercie encore une fois :)
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 :)
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 ):
De plus la variable recevant les champs a était supprimé!!
Remplaces la totalité du script par celui-ci:
Pour la css:
remplaces par:
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;}
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:
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(){
- 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();}
});
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:
Encore merci beaucoup de ton aide, je marque le sujet comme résolu :)
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();
- 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+'');});
Encore merci beaucoup de ton aide, je marque le sujet comme résolu :)
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum