Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Chatbox / nombre de connectés


2 participants

Page 1 sur 2 1, 2  Suivant

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

ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 1:56

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Salut Phil ,
tout d'abord je te souhaite bonne année remplis de bonheur et de santé .

Pour ce qui est de mon problème vois-tu en se moment je tente de supprimer ma chatbox au haut du forum
pour l'intégré dans un sorte de popup ou lorsque tu click sur un icone image la chatbox s'affiche .
De cette façon : [PHPBB2] Chatbox / nombre de connectés Social_And_Communication_Message_Square_Alert-128

j'ai trouver comment envoyer le tout à la bonne place par contre j'aimerais faire en sorte que seul le nombre d
personnes connectés s'affiche et non pas tout la phrase : Il y a actuellement 0 utilisateur(s) sur la ChatBox

Sa donne ceci en se moment : https://snipboard.io/k0AJlL.jpg
J'aimerais que sa donne ceci : https://snipboard.io/tOgkKM.jpg

Merci d'avance pour ton aide !!!


Dernière édition par ThunderTB le Ven 3 Jan 2020 - 18:06, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 3:58

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

ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 6:14

Merci pour les souhaits Phil  hinhin !!!
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."

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 6:24

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 [PHPBB2] Chatbox / nombre de connectés Sans_t10



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:


[PHPBB2] Chatbox / nombre de connectés 150




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>
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:06

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 :
[PHPBB2] Chatbox / nombre de connectés ZEeG7k

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 19:14

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

ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:17

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 .

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 19:21

Ben j'ai beau scroller rien de s'affiche mon ami.
De plus je vois la chatbox heuu
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:28

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 .

ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:29

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 19:34

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é

ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:37

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 !!!
Mercimill  

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 19:41

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.
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 19:49

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 1 Jan 2020 - 20:02

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.




ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Mer 1 Jan 2020 - 20:27

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 2 Jan 2020 - 4:05

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


ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 2 Jan 2020 - 4:11

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



Dernière édition par ThunderTB le Jeu 2 Jan 2020 - 4:33, édité 2 fois
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 2 Jan 2020 - 4:14

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 ?

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 2 Jan 2020 - 17:09

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.



ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 2 Jan 2020 - 17:41

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 .



ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 2 Jan 2020 - 17:46

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 2 Jan 2020 - 17:53

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  clin oeil .


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 clin oeil
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 2 Jan 2020 - 17:57

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:
ThunderTB
ThunderTB
http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 2 Jan 2020 - 18:21

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 .

Page 1 sur 2 1, 2  Suivant

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

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

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

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


Connexion

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