[PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

**.truelove** · **.truelove** Ven 17 Juil 2020 - 10:30

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

Bonjour !
J'ai suivi ce petit tuto https://www.milouze14.com/t30501-toutes-versions-auto-suggestion-des-membres-sur-les-tags et je l'ai installer sur mon forum. Le problème c'est que quand je veux l’utiliser dans la réponse rapide, l'avatar ne s'affiche pas ... Je pense que cela doit être du à mes templates ou mon css, cependant je ne n'arrive pas à voir la class qui faut changer et où l'utiliser dans le js ... Une petite aide de votre part, serait parfaite, merci d'avance !

Voici une capture afin que vous puissiez juger par vous même :
[PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas OtLEZqx

Et mon viewtopic_body sous hide :

Si vous avez besoin de mon css, je le posterai à la suite. Merci encore :)

**Milouze14** · **Milouze14** Ven 17 Juil 2020 - 16:57

Coucou Sonia,

hum, ton soucis vient du template memberlist_body
Affichage/Templates/Général/memberlist_body

Tu peux me donner le contenu stp.

**.truelove** · **.truelove** Ven 17 Juil 2020 - 17:10

Merci Phil ! Je n'avais pas du tout penser que ça pouvait venir de là mevoilou

Je te donne ça de suite !

Voici le template en question :

Code:: <form action="{S_MODE_ACTION}" method="get"> <table cellspacing="0" cellpadding="0" border="0" align="center" class="forumline" width="100%"> <tr> <th nowrap="nowrap">{L_ORDER_OR_SELECT}</th> </tr> <tr> <td class="row1"> <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed"> <tr> <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /> {L_SELECT_SORT_METHOD} {S_MODE_SELECT} {L_ORDER} {S_ORDER_SELECT}   {S_HIDDEN_SID} <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td> </tr> </table> </td> </tr> </table> </form> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr><td class="{memberrow.ROW_CLASS}" align="center">  <script type="text/javascript">//<![CDATA[ $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color"); $(this).closest('.lmnom').css("background-color", color);});});//]]> </script> <div class="lmfond"> <div class="lmava"> <div class="lmimg"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div> <div class="lmdet"> <div class="lmdetin2">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div> <div class="lmdetin"><nommm>Inscrit depuis le</nommm><br> {memberrow.JOINED}</div> <div class="lmdetin"><nommm>vu la dernière fois</nommm><br>{memberrow.LASTVISIT}</div> <div class="lmdetin"><nommm>mensonges</nommm><br>{memberrow.POSTS}</div> </div> </div> <div class="lmnom"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><div class="linemembre"></div><div class="humeur">( {memberrow.INTERESTS} )</div></div> </div>   <tr> <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td> </tr>  </table>  <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="nav">{PAGE_NUMBER}</span></td> <td align="right"><span class="nav">{PAGINATION}</span></td> </tr> </table> <br />

Et le CSS qui y correspond :

Code:: /*****LISTE DES MEMBRES *****/ .lmback {text-align:center; font-family:arial; text-transform:lowercase; font-size:70px; letter-spacing:-6px; color:#787878; text-shadow:2px 2px 0px white;} .lmfond {padding:5px; width:140px; background-color:#BDECD9;float:left; margin-bottom:10px;margin-left:13px;border: 1px solid #BDECD9;} .lmava {width:140px; height:200px; overflow:hidden;} .lmava img {width:140px; height:200px;} .lmimg {transition: all 600ms ease;} .lmava:hover .lmimg {margin-top:-200px;} .lmdet {width:130px; height:200px; padding:5px;} .lmdetin2 img {width:32px;height:32px;margin-top:5px;margin-bottom:5px;display: none;} .lmdetin {background-color: #FAFEF9;border: 1px solid #dbf2e7;font-weight:bold; margin-top:6px;width:130px;text-transform:lowercase; font-size:10px; font-family:'Roboto', sans-serif; color:#a8a8a8;padding:2px;margin-left: -2px;} .lmnom {margin-top:5px;padding:5px;} .lmnom a {font-family: 'Rouge Script', cursive;font-size:22px;font-weight:700;} .lmnom strong {color: #fff!important;font-weight: 400!important;} .humeur {font-family: Abel, sans-serif;text-transform:uppercase; font-size:10px;margin-top:-5px;color: #fff;width: 130px !important;} nommm{font-size:10px;font-family: 'Abril Fatface', cursive;text-transform:uppercase;line-height:9px;margin-left:5px;letter-spacing:1px;color: #85D4BF;font-weight: 700;} /*FIN LISTE DES MEMBRES-*/

Merci d'avance à toi et à ton coup de main Merci pour l'aide

**Milouze14** · **Milouze14** Ven 17 Juil 2020 - 17:13

Ce n'est pas évident de faire le rapprochement concernant l'avatar impeccable

.

Remplaces le script par celui-ci Sonia:

Code:: !window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){ 'SCEDITOR @HANDLE AUTO-SUGGEST'; 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157'; var container = $('.sceditor-container')[0], text_editor = document.getElementById('text_editor_textarea'), frame, instance; if (container && text_editor) { frame = $('iframe', container); instance = $(text_editor).sceditor('instance'); window.fa_mentionner = { suggest_delay : 100, // delay before suggestions show up (100ms) // language presets lang : { placeholder : 'Recherche...', not_found : 'Utilisateur non trouvé' }, // colors of the suggestion popup color : { font : '#333', hover_font : '#FFF', error_font : '#F00', background : '#FFF', hover_background : '#69C', border : '#CCC', shadow : 'rgba(0, 0, 0, 0.176)' }, // sceditor instance and rangeHelper instance : instance, rangeHelper : instance.getRangeHelper(), // nodes for listening and modifications frame : frame[0], body : frame.contents().find('body')[0], textarea : $('textarea', container)[0], // faux textarea and suggestion list faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0], // version specific selectors selectors : $('.bodyline')[0] ? ['a.gen[href^="/u"]', '.lmimg a'] : document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] : null, // adjusts the scroll position of the faux textarea so the caret stays in line adjustScroll : function() { fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop; }, // updates the content in the faux textarea updateFauxTextarea : function(active, key) { if (key == 16) { // 16 = SHIFT return; // return when specific keys are pressed } // clear suggestion queue when suggestions aren't active if (active != true) { fa_mentionner.clearSuggestions(); } else { return; // return when interactive keys are pressed while suggesting ; up, down, enter } // use another method if in WYSIWYG mode if (!fa_mentionner.instance.inSourceMode()) { key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions(); return; } var val = fa_mentionner.instance.val(), range = 0, selection, faux_caret, username; // get the position of the caret if (document.selection) { selection = document.selection.createRange(); selection.moveStart('character', -fa_mentionner.textarea.length); range = selection.text.length; } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) { range = fa_mentionner.textarea.selectionStart; } // set the position of the caret val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length); // parse and sanitize the faux textarea content $(fa_mentionner.faux_textarea).html( val.replace(/</g, '<') .replace(/>/g, '>') .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) { var lastChar = M.substr(-1), name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, ''); return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>'); }) .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>') ); faux_caret = document.getElementById('faux_caret'); // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions if (faux_caret && faux_caret.parentNode.tagName == 'A') { fa_mentionner.value = val; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset()); }, fa_mentionner.suggest_delay); } fa_mentionner.adjustScroll(); }, // search for active mentions in wysiwyg mode searchWYSIWYG : function() { var selected = fa_mentionner.rangeHelper.cloneSelected(), mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g), offset, offset_marker, hit, i; console.log(mentions); if (mentions && mentions[0]) { // clean up whitespace for (i in mentions) { mentions[i] = mentions[i].replace(/\s$/g, ''); } // search for the mention that's currently being modified for (i in mentions) { if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) { hit = true; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset offset = $(fa_mentionner.frame).offset(); offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset(); // add the marker offsets to the iframe offsets offset.left += offset_marker.left; offset.top += offset_marker.top - fa_mentionner.body.scrollTop; fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true); fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish() }, fa_mentionner.suggest_delay); break; } } // hide the suggestion list if there's no newly modified mentions if (!hit) { fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions } }, // suggest a list of users based on the passed username suggest : function(username, offset, wysiwyg) { // insert the suggestion list to show that it's searching fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>'; $(fa_mentionner.list).css({ left : offset.left + 'px', top : offset.top + 'px', display : 'block', overflowY : 'auto' }); document.body.appendChild(fa_mentionner.list); // send a query request to the memeberlist to find users who match the typed username fa_mentionner.request = $.get('/memberlist?username=' + username, function(d) { fa_mentionner.request = null; var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.avatar-mini a', d), ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null, i = 0, j = suggestion.length, name; fa_mentionner.list.innerHTML = ''; if (j) { for (; i < j; i++) { name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, ''); fa_mentionner.list.insertAdjacentHTML('beforeend', '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+ '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).find('img').attr('src') + '"/>'+ '<span class="fa_suggested_name">' + name + '</span>'+ '</a>' ); } // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto'; // update the focused suggestion and scroll it into view fa_mentionner.list.firstChild.className += ' fam-focus'; fa_mentionner.focused = fa_mentionner.list.firstChild; fa_mentionner.scrollSuggestions(); } else { fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>'; } }); }, // kill the suggestion timeout while typing persists clearSuggestions : function() { if (fa_mentionner.delay) { window.clearTimeout(fa_mentionner.delay); fa_mentionner.delay = null; fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } if (fa_mentionner.request) { fa_mentionner.request.abort(); fa_mentionner.request = null; } }, // finish the username finish : function(username, wysiwyg) { var mention, index, i; // hide and clear suggestions fa_mentionner.clearSuggestions(); fa_mentionner.focused = null; fa_mentionner.list.style.display = 'none'; if (!wysiwyg) { fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) { mention = '@"' + username + '"'; return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' ); }); // get the index where the mention should be index = fa_mentionner.value.indexOf('{MENTION_POSITION}'); fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', ''); // save current scroll position for application after the value has been updated fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop; // update the textarea with the completed mention fa_mentionner.instance.val(''); fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length)); // restore the scroll position for the textareas fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex; fa_mentionner.adjustScroll(); // update the fake textarea fa_mentionner.updateFauxTextarea(); } else { // save the caret range in WYSIWYG so we can restore it after replacing the HTML fa_mentionner.rangeHelper.saveRange(); fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1'); fa_mentionner.body.focus(); fa_mentionner.rangeHelper.restoreRange(); // update the wysiwyg mention array so no new suggestions appear for (i in fa_mentionner.wysiwyg_mentions) { if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) { fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"'; break; } } } }, // scroll the selected suggestion into view scrollSuggestions : function() { $(fa_mentionner.list).scrollTop( ( $(fa_mentionner.focused).offset().top - $(fa_mentionner.list).offset().top + $(fa_mentionner.list).scrollTop() ) - (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling ); } }; // get computed styles for the textarea and apply them to the faux textarea for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) { str += css[i] + ':' + css.getPropertyValue(css[i]) + ';'; } // add styles to the head $('head').append('<style type="text/css">'+ '#faux_text_editor {' + str + '}'+ '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+ '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+ 'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+ 'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+ '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+ '</style>'); // insert faux textarea into document fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea); // apply event handlers fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea; fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll; // update the faux textarea on keyup fa_mentionner.instance.keyUp(function(e) { if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) { fa_mentionner.updateFauxTextarea(true, e.keyCode); return false; } else { fa_mentionner.updateFauxTextarea(false, e.keyCode); } }); // key events for the suggested mentions $([document, fa_mentionner.body]).on('keydown', function(e) { var that = e.target; if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) { // move selection down if (e.keyCode == 40) { var next = fa_mentionner.focused.nextSibling; if (next) { $(fa_mentionner.focused).removeClass('fam-focus'); next.className += ' fam-focus'; fa_mentionner.focused = next; fa_mentionner.scrollSuggestions(); } return false; } // move selection up if (e.keyCode == 38) { var prev = fa_mentionner.focused.previousSibling; if (prev) { $(fa_mentionner.focused).removeClass('fam-focus'); prev.className += ' fam-focus'; fa_mentionner.focused = prev; fa_mentionner.scrollSuggestions(); } return false; } // apply selection if (e.keyCode == 13) { fa_mentionner.focused.click(); return false; } } }); // update focused suggestion on hover $(document).on('mouseover', function(e) { var that = e.target; if (/fa_mention_suggestion/.test(that.className)) { $(fa_mentionner.focused).removeClass('fam-focus'); that.className += ' fam-focus'; fa_mentionner.focused = that; } }); } })});

**.truelove** · **.truelove** Ven 17 Juil 2020 - 17:15

C'est parfait, un grand merci à toi, ça fonctionne Merci

**Milouze14** · **Milouze14** Ven 17 Juil 2020 - 17:15

De rien Sonia hinhin

.

Hello

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

A bientôt pour une prochaine demande clin oeil

[PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

[PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

Re: [PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

Re: [PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

Re: [PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

Re: [PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

Re: [PHPBB2] Avatar dans l'auto suggestion des membres sur les tags qui ne s'affiche pas

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

S'enregistrer

Connexion