[PHPBB2] Chatbox / nombre de connectés

Hello Franck,
bonne et heureuse année 2020 mon ami.

Alors pour commencer, nativement la chatbox ne mentionne
pas le nombre de membres connectés.

Comment as tu fais pour mettre tout cela en œuvre Franck?
Scripts, html etc....

Merci pour les souhaits Phil   !!!
Pour la chatbox je n'est ajouter qu'une "div class" à cette variable
"{TOTAL_CHATTERS_ONLINE} : Affiche le nombre de personnes connectées sur la ChatBox."

Merci mon ami,


Dans ton template index_body:
Affichage/Templates/Général/index_body

Recherches ceci:

Code:

{CHATBOX_TOP}

Supprimes et remplaces par:

Code:

<div class="M14_OpenCloseChatBox"title="Afficher/Masquer la chatbox"><img src="https://i.servimg.com/u/f20/20/11/87/27/ab10.png"/></div>
<div id="M14_ChaTBox">
  <div class="M14_numberMember">{TOTAL_CHATTERS_ONLINE}</div>
 
{CHATBOX_TOP}
   <script>
$(function(){
$('.M14_OpenCloseChatBox').click(function(){
   $('#M14_ChaTBox').slideToggle();});
$('.M14_numberMember').each(function(){
var str=$(this).text();
var nom = str.match(/\d+/);
$(this).html('<span>'+b+'</span>');

});});
</script>
</div>

On masque la div:

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

Ajouter ceci:

Code:


#M14_ChaTBox{display:none;}
.M14_numberMember{width:24px;height:24px;background:darkred;color:white;text-align:center;border-radius:24px;}
.M14_numberMember span{font-size: 12px;top: 3px;position: relative;}


Penser a cliquer sur le bouton



Et voilou le tour est joué.


Ou ceci qui va afficher une infobulle mentionnant le nombre de membre(s) connecté(s) au survol de l'image:

Code:

<div class="M14_OpenCloseChatBox">
  <img src="https://i.servimg.com/u/f20/20/11/87/27/ab10.png"/>
</div>
<div id="M14_ChaTBox">
  <div class="M14_numberMember">{TOTAL_CHATTERS_ONLINE}</div>
 
{CHATBOX_TOP}
   <script>
$(function(){

$('.M14_OpenCloseChatBox').click(function(){
$('#M14_ChaTBox').slideToggle();});
$('.M14_numberMember').each(function(){
var a=$(this).text();
var b = a.match(/\d+/);
$(this).html('<span>'+b+'</span>');
$('.M14_OpenCloseChatBox').attr('title','Afficher/Masquer la chatbox ( '+b+' membre(s) connecté(s) ) ');
});});
</script>
</div>

ReSalut Phil , je viens tout juste de tester et ton astuce fonctionne à merveille par contre
il y a un dernier petit détail que sur lequel j'ai besoin de ton aide je m'explique .
J'aimerais faire en sorte que lorsque je click sur mon icone chatbox au bas de mon forum
que peut importe ou je me situ sur la page que la chatbox s'affiche centré au cadre avec un
background-color:noir avec un opacity appliquer comme ceci :


J'ai déjà tentez d'appliquer une tel manipulation mais sans succès , j'epère que tu pourras
m'aider .

Re Franck,
je suis sur ton forum et je ne vois pas de bouton!!!!!!!!!!

RePhil , il est ici : https://snipboard.io/b8sgQ6.jpg
Il s'affiche après quelque secondes lorsque tu scroll down sur le forum donc il ne s'affiche
pas si tu reste sur le haut du forum .

Ben j'ai beau scroller rien de s'affiche mon ami.
De plus je vois la chatbox

Est-ce que tu est sur la version par default ou la version Cell ? j'ai supprimer l'astuce sur la version Cell ? de mon coter tout s'affiche bien sur Firefox et Chrome ainsi que ma tablette qui utilise Chrome . J'ai remarquer que sur Cellulaire l'astuce ne s'affiche pas donc j'ai supprimer
le tout sur la version cell au bas de mon forum dans le sélecteur des thèmes .

C'est peut-être bête mais as-tu penser de faire F5 pour être sur .

C'était le selecteur pour information.
Pour ta demande, il faudrait le mentionner dès le départ car cela m'oblige a revoir le code déjà travaillé

Ahhh je suis vraiment désolé Phil au départ je t'avoue que je ne croyais pas que
tu allais me donner tout l'astuce mais plutôt une façon d'implanté mon icône mais
je te remercie d'avance pour ton aide précieuse !!!
 

Avec le code html qui figure dans le template, tu peux modifier la css ainsi:

Code:


#M14_ChaTBox{display:none;}


En:

Code:


#M14_ChaTBox{display:none;position: fixed;width: 90%;left: 5%;top: 20%;}


Il n'y aura pas de background ni d'opacité car il faut que je revoie entièrement le codage dans le template.

Tu peux me donner le lien de l'image d'ouverture de la chatbox et il m'en faudrait une autre pour la fermeture.

Voici l'image d'origine : https://i.servimg.com/u/f80/15/62/56/22/chatbo14.png
Et pour la fermeture : https://i.servimg.com/u/f80/15/62/56/22/chatbo15.png

Avant de me sauver,
remplaces le code html dans le template par celui-ci:

Code:


<div class="M14_OpenCloseChatBox">
  <img src="https://i.servimg.com/u/f80/15/62/56/22/chatbo14.png"/>
</div>
<div class="M14_body-chatBox">
  <div class="M14_close_body"><img src="https://i.servimg.com/u/f80/15/62/56/22/chatbo15.png"/></div>
<div id="M14_ChaTBox">
 
  <div class="M14_numberMember">{TOTAL_CHATTERS_ONLINE}</div>
 
{CHATBOX_TOP}
  <script>
$(function(){

$('.M14_OpenCloseChatBox').click(function(){
$('.M14_body-chatBox').slideToggle();});
$('.M14_close_body').click(function(){
$(this).closest('.M14_body-chatBox').fadeOut();});   
$('.M14_numberMember').each(function(){
var a=$(this).text();
var b = a.match(/\d+/);
$(this).html('<span>'+b+'</span>');
$('.M14_OpenCloseChatBox').attr('title','Afficher la chatbox ( '+b+' membre(s) connecté(s) ) ');
$('.M14_close_body').attr('title','Masquer la chatbox ( '+b+' membre(s) connecté(s) ) ');
});});
</script>
  </div></div>



Puis remplaces la css donnée par ce style:

Code:

.M14_body-chatBox{display:none;background-color:#666;width: 100%;height: 100%;position: fixed;left: 0;top: 0;opacity:0.9;}
.M14_close_body{position:fixed;top:30px;right:30px;font-size:20px;color:white;}
#M14_ChaTBox{position: fixed;width: 90%;left: 5%;top: 20%;}
.M14_numberMember{width:24px;height:24px;background:darkred;color:white;text-align:center;border-radius:24px;}
.M14_numberMember span{font-size: 12px;top: 3px;position: relative;}


Si tu as besoin d'explications, n'hésites pas mais ce sera demain mon ami.

Un gros merci Phil , je vais tenter de jouer avec tout sa et je te reviens si jamais
j'ai un souci !!! Bonne fin de soirée !!!

Hello Franck,
je viens de corriger le code html afin que le bouton d'ouverture ne reste pas affiché si la chatbox est affichée et vice versa, ainsi que d'afficher les boutons seulement pour les membres.

Remplaces tout le code HTML figurant dans le template par celui-ci:

Code:

<!-- BEGIN switch_user_logged_in -->
<div class="M14_OpenCloseChatBox">
  <img src="https://i.servimg.com/u/f80/15/62/56/22/chatbo14.png"/>
</div>
<div class="M14_body-chatBox">
  <div class="M14_close_body"><img src="https://i.servimg.com/u/f80/15/62/56/22/chatbo15.png"/></div>
<div id="M14_ChaTBox">
 
  <div class="M14_numberMember">{TOTAL_CHATTERS_ONLINE}</div>
 
{CHATBOX_TOP}
  <script>
$(function(){

$('.M14_OpenCloseChatBox').click(function(){
$(this).fadeOut();   
$('.M14_body-chatBox').slideToggle();
  });
$('.M14_close_body').click(function(){
    $('.M14_OpenCloseChatBox').fadeIn();
$(this).closest('.M14_body-chatBox').fadeOut();
   
    });   
$('.M14_numberMember').each(function(){
var a=$(this).text();
var b = a.match(/\d+/);
$(this).html('<span>'+b+'</span>');
$('.M14_OpenCloseChatBox').attr('title','Afficher la chatbox ( '+b+' membre(s) connecté(s) ) ');
$('.M14_close_body').attr('title','Masquer la chatbox ( '+b+' membre(s) connecté(s) ) ');
});});
</script>
  </div></div>
<!-- END switch_user_logged_in -->

ReSalut Phil , vois-tu j'ai modifier quelques trucs et j'aime bien le résultat par contre
je me demandais si c'étais possible d'annuler l'astuce pour un de mes thèmes
puisque sur cellulaire l'astuce ne fonctionne pas bien , l’icône n'apparait que sur les pc's et tablettes .
Je teste ton nouveau code à l'instant .

P.s. Un gros merci en passant !!!

Oh et est-ce que se serais possible de rendre la chatbox disponible sur tout le forum
j'ai tenter de mettre le code dans overall_header mais elle ne s'affiche pas ?

Hello Franck,

Oh et est-ce que se serais possible de rendre la chatbox disponible sur tout le forum
j'ai tenter de mettre le code dans overall_header mais elle ne s'affiche pas ?

C'est impossible mon ami.

Ce que l'on peut faire et de tout désactiver pour la version mobile.
Le script suivant et bien celui qui gère les thèmes ?



As tu remarqué le que dernier style était erroné ?:

Code:


http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style1.cs#s



Remplaces cette partie:

Code:


$(function(){

  $("#frame_chatbox").load(function(){
    $("#frame_chatbox").contents().find("head").append($("#tstyle").clone());
  });

  $("iframe[name=smilies]").load(function(){
    $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{max-width:190px;margin:0!important;}</style>');
  });

  $(".row1.M14_lastTable").find('select').before('<select id="sstyle" onChange="changestyle(this.value);this.selectedIndex=0;"><option>Choisir un style</option></select>');

  addstyle("Style par défaut","");
  addstyle("Style Bleu","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style3.css");
  addstyle("Style Cell","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style2.css");
  addstyle("Style en cours","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style1.cs#s");
});

Par:

Code:

$(function(){
if ($(window).width()< 600)return;
  $("#frame_chatbox").load(function(){
    $("#frame_chatbox").contents().find("head").append($("#tstyle").clone());
  });

  $("iframe[name=smilies]").load(function(){
    $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{max-width:190px;margin:0!important;}</style>');
  });

  $(".row1.M14_lastTable").find('select').before('<select id="sstyle" onChange="changestyle(this.value);this.selectedIndex=0;"><option>Choisir un style</option></select>');

  addstyle("Style par défaut","");
  addstyle("Style Bleu","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style3.css");
  addstyle("Style Cell","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style2.css");
  addstyle("Style en cours","http://hf.hockeyhq.net/HockeyFederation/Ronde2/HFStyles/Style1.cs#s");
});

J'ai ajouté cette ligne:

Code:

if ($(window).width()< 600)return;

Qui veut dire , si inférieur à 600px on annule le script.

Rebonjour Phil :) , merci encore une fois pour ton aide par contre je n'arrive pas à faire fonctionner ton astuce ?

Pour répondre à la question "Ce que l'on peut faire et de tout désactiver pour la version mobile.Le script suivant et bien celui qui gère les thèmes ?"

Oui c'est en plein sa j'aimerais que tout l'astuce ce désactive pour le style Cell seulement
pour que la chatbox demeure disponible pour tous au grand jours par contre pour le moment elle demeure cacher ont ne la vois pas .

Pour ce qui est du style erroné c'est normale je suis en train de travailler dessus et je veux pas qu'il sois accessible .


Note : Pour ce qui est d'établir la chatbox sur toute les page si c'est impossible alors
je suis triste :P ont va faire avec .

Dans le fond si c'est pas plus compliquer , se serais bien de tout désactiver pour les écrans de moins de 600px si possible bien sur plutot que de juste supprimer l'astuce pour le style cell . Merci !!!

Oui c'est en plein sa j'aimerais que tout l'astuce ce désactive pour le style Cell seulement

C'est impossible mon ami, pas assez de détail pour donner une condition...
Mais je vais faire encore des essais en cherchant quelque chose de concret.
Ne soit pas surprit si tu vois du texte s'afficher sur ton fofo, ce sera moi   .


Ensuite pour afficher pour tous les membres, il faut supprimer les lignes suivantes dans le template au niveau du code html:


Au début:

Code:


<!-- BEGIN switch_user_logged_in -->

Et à la fin:

Code:

<!-- END switch_user_logged_in -->

Note : Pour ce qui est d'établir la chatbox sur toute les page si c'est impossible alors
je suis triste :P ont va faire avec .

Désolé mon ami.

Dans le fond si c'est pas plus compliquer , se serais bien de tout désactiver pour les écrans de moins de 600px si possible bien sur plutot que de juste supprimer l'astuce pour le style cell . Merci !!!

Je regarde pour mettre à part le script

Tu peux tester sur ton mobil ou une tablette,
normalement le sélecteur n'est plus présent.

Hum, je viens de supprimer juste le thème Cell dans le sélecteur
pour la version mobile.

Tu peux tester stp:

Je viens de faire le teste et maintenant l'astuce Cell est désactivé sur le style 2/Cell sur pc's , tablettes et cellulaires
par contre la chatbox n'est toujours pas de retour pour le style cell je sais que tu ma dit que c'étais peut-être pas possible
par contre je me demande si une astuce avec une div sur mon style Cell pourrais pas faire le boulot j'ai tenter de le faire
aujourd'hui mais si je remet le chatbox sur le style Cell j'ai un problème avec les autres style exemple :

Code:

<div class="chatbox_top"><div>

dans le css je fait :

Code:

 .chatbox_top: display:none;

et dans le style Cell je fait

Code:

chatbox_top: display:inline !important

sa fonctionne à un certain niveau
mais j'affecte les deux autres style ou la chatbox n'affiche plus sont contenue j'ai tenter quelque trucs en vain .