Animation lors de la réception d'un message privé
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Animation lors de la réception d'un message privé
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour,En essayant d’améliorer toujours plus l’ergonomie de mon forum, j’aimerais arranger l’affichage des notifications lors de la réception d’un nouveau message privé pour qu’une animation se joue. Travaillant avec des svg j’ai totalement personnalisé ma barre de navigation que vous pourrez retrouver ci-dessous.
TEMPLATE OVERHALL_HEADER POUR LA NAVBAR
- Code:
<div id="NAVBAR">
<div class="NAVright">
<a title="clique ici pour des informations"><div class="NAVlinksicon"><div class="navicon links"></div></div></a>
<div class="NAVicon" title="rejoindre le discord">
<div class="navicon discord"></div>
</div>
<div class="NAVicon" title="revenir sur l'accueil">
<a href="/forum"><div class="navicon home"></div></a>
</div>
<div class="NAVicon" title="Foire aux questions">
<a href="/h3-faq"><div class="navicon faq"></div></a>
</div>
<div class="NAVicon" title="Liste des membres">
<a href="/memberlist"><div class="navicon users"></div></a>
</div>
<div class="NAVicon" title="Factions">
<div class="navicon groups"></div>
</div>
<div class="NAVicon" title="Chroma Shop">
<div class="navicon chromashop"></div>
</div>
<div class="NAVicon" title="Carte">
<div class="navicon map"></div>>
</div>
<!-- BEGIN switch_user_logged_out -->
<div class="NAVicon" title="S'enregistrer">
<a href="/register"><div class="navicon register"></div></a>
</div>
<div class="NAVicon" title="Connexion">
<a href="/login"><div class="navicon login"></div></a>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="NAVicon" title="Modifier son profil">
<div class="navicon editprofil"></div>
</div>
<div class="NAVicon" title="Connexion">
<a href="/login?logout"><div class="navicon login"></div></a>
</div>
<!-- END switch_user_logged_in -->
</div>
<div class="NAVleft">
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>
</div>
CSS
- Code:
#NAVBAR {width: 100%;height: 75px;position:fixed;margin:0 auto;background: var(--black002);z-index: 999;padding-top:10px;margin:0px auto;overflow:hidden;}
/*NAVBAR - ICONS POSITION LEFT - RIGHT*/
.NAVright {position: relative;float:right;display: flex;margin-right:20px;}
.NAVleft {position: relative;float:left;display: flex; }
.NAVlinksicon, .NAVicon {width: 50px;height: 75px;position: relative;overflow: hidden;text-align: center;margin-left:5px;cursor: pointer;line-height:70px;display: block!important;}
/*NAVBAR - ICONS*/
.arrowdown:before {content:'\ebd9';}
.discord:before {content:'\ebd6';}
.home:before{content:'\ea63';}
.faq:before{content:'\eb31';)}
.users:before{content:'\eb9c';}
.groups:before{content:'\ea98';}
.chromashop:before{content:'\eb0f';}
.map:before{content:'\eab1';}
.connexion:before{content:'\eaa0';}
.register:before{content:'\e941';}
.login:before{content:'\eaa0';}
.logout:before{content:'\eaa2';}
.links:before{content:'\ea96';}
.editprofil:before{content:'\eb47';}
.navicon:before {font-family:'honeybee';font-size:35px;background:linear-gradient(var(--red01), var(--red02) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
La partie concernant l’icon de la messagerie privée est celui-là.
- Code:
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>
CSS
- Code:
.CHNAVstructmp {
position: absolute;
display: block;
top: 35px;
left: 50px;
transform: translate(-50%, -50%);}
.CHNAVbgmp {
position: absolute;
height:40px;
width: 40px;
transform: translate(-50%, -50%);
border-radius: 75px;
background:var(--gdred);
animation: newmp 1.5s infinite;}
.fa-envelope {
position: absolute;
transform: translate(-50%, -50%);
font-size: 20px; height:30px;
width: 40px;border-radius: 75px;text-align:center;padding-top:10px;
color: #ffffff;background:var(--gdred);}
@keyframes newmp {
0%{height: 0px;width: 0px;}
50%{height: 50px;width: 50px;opacity: 0.8;}
70%{height: 60px;width: 60px;opacity: 0.1;}
100%{height: 75px;width: 75px;opacity: 0;}
}
Et visuellement, voilà à quoi ressemble la navbar.
- Spoiler:
Mon problème est donc le suivant : est-il possible que l’animation se lance seulement lorsqu’un nouveau message est disponible dans la messagerie privée ? Et si oui a-t-il un moyen particulier d’y arriver ?
J'espère que mon problème est assez clair, sinon je n'hésiterais pas à demander d'autres ressources auxquelles je n'aurais pas pensées. Je vous remercie de l’intérêt que vous porterez à mon problème.
Re: Animation lors de la réception d'un message privé
Hello Chokolatyne,
il aurait été judicieux de fournir le template dans la totalité afin d'avoir le même visu..
Comment a été place le code html cité?
Comment as tu importé la librairie des icônes ?
Actuellement je n'ai strictement rien qui s'affiche sur mon fofo de test avec ce que tu fournis .
a++
il aurait été judicieux de fournir le template dans la totalité afin d'avoir le même visu..
Comment a été place le code html cité?
Comment as tu importé la librairie des icônes ?
Actuellement je n'ai strictement rien qui s'affiche sur mon fofo de test avec ce que tu fournis .
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Bonjour Milouze14,
Je savais que j'oubliais quelque chose ! Pour les librairies des icons oui elles sont là :
Avec l'intégralité du template :
Le code en lui-même du header n'est pas fini (sujets récents particulièrement), mais j'espère que tout est bon !
Je savais que j'oubliais quelque chose ! Pour les librairies des icons oui elles sont là :
- Code:
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/aafbda32e6.js" crossorigin="anonymous"></script>
Avec l'intégralité du template :
Le code en lui-même du header n'est pas fini (sujets récents particulièrement), mais j'espère que tout est bon !
Re: Animation lors de la réception d'un message privé
et le css : (désolé pour le double post, la limite est dépassée)
Re: Animation lors de la réception d'un message privé
Re,
merci mais je n'ai pas l'animation comme sur ton fofo, l'enveloppe reste telle que..
Il me faut quelque chose de concret chère amie,
sinon je ne peux pas te donner le script adéquate.
a++
merci mais je n'ai pas l'animation comme sur ton fofo, l'enveloppe reste telle que..
Il me faut quelque chose de concret chère amie,
sinon je ne peux pas te donner le script adéquate.
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Re (désolé pour le double post),
tu peux tester ceci:
Il faudrait modifier cette div dans le template:
Par:
Puis modifier son style ainsi:
et ajoutes:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
Penses à cliquer sur le bouton VALIDER
a++
tu peux tester ceci:
Il faudrait modifier cette div dans le template:
- Code:
<div class="CHNAVbgmp"></div>
Par:
- Code:
<div class="CHNAVbg"></div>
Puis modifier son style ainsi:
- Code:
.CHNAVbg {
position: absolute;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
border-radius: 75px;
background: var(--gdred);
}
et ajoutes:
- Code:
.CHNAVbg.mp
{
animation: newmp 1.5s infinite;
}
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposes ceci:
- Code:
$(function(){
$.get('/privmsg?folder=inbox' , function(data){
var number=$(data).find('img[alt="Message Non-lu"]').length;
if(number>=1)
{
$('.CHNAVbg').addClass('mp');
}
});});
Penses à cliquer sur le bouton VALIDER
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Je préfère un code qui viendrait utiliser ce qui est déjà sur la page plutôt que d'en charger une autre.
Si jamais:
Dans le template overall_header, modifie la partie du code que tu as donné dans le 1er message par:
Ce qui donnera au niveau du CSS:
Si jamais:
Dans le template overall_header, modifie la partie du code que tu as donné dans le 1er message par:
- Code:
<div class="navss" style="display: none !important;">{GENERATED_NAV_BAR}</div>
<div id="NAVBAR">
<div class="NAVright">
<a title="clique ici pour des informations"><div class="NAVlinksicon"><div class="navicon links"></div></div></a>
<div class="NAVicon" title="rejoindre le discord">
<div class="navicon discord"></div>
</div>
<div class="NAVicon" title="revenir sur l'accueil">
<a href="/forum"><div class="navicon home"></div></a>
</div>
<div class="NAVicon" title="Foire aux questions">
<a href="/h3-faq"><div class="navicon faq"></div></a>
</div>
<div class="NAVicon" title="Liste des membres">
<a href="/memberlist"><div class="navicon users"></div></a>
</div>
<div class="NAVicon" title="Factions">
<div class="navicon groups"></div>
</div>
<div class="NAVicon" title="Chroma Shop">
<div class="navicon chromashop"></div>
</div>
<div class="NAVicon" title="Carte">
<div class="navicon map"></div>>
</div>
<!-- BEGIN switch_user_logged_out -->
<div class="NAVicon" title="S'enregistrer">
<a href="/register"><div class="navicon register"></div></a>
</div>
<div class="NAVicon" title="Connexion">
<a href="/login"><div class="navicon login"></div></a>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<div class="NAVicon" title="Modifier son profil">
<div class="navicon editprofil"></div>
</div>
<div class="NAVicon" title="Connexion">
<a href="/login?logout"><div class="navicon login"></div></a>
</div>
<!-- END switch_user_logged_in -->
</div>
<div class="NAVleft">
<div class="CHNAVstructmp" title="Messagerie Privée">
<a href="/privmsg?folder=inbox" target="_blank"><div class="CHNAVbgmp"></div><i class="fas fa-envelope"></i></a>
</div>
</div>
<script>
var checkmp = $('.navss a[href="/privmsg?folder=inbox"] img');
if ($(checkmp).is('[title*="nouveau"]')) {
$('.CHNAVstructmp').addClass('newmp');
}
</script>
Ce qui donnera au niveau du CSS:
- Code:
.CHNAVstructmp {
position: absolute;
display: block;
top: 35px;
left: 50px;
transform: translate(-50%, -50%);}
.CHNAVbgmp {
position: absolute;
height:40px;
width: 40px;
transform: translate(-50%, -50%);
border-radius: 75px;
background:var(--gdred); }
.fa-envelope {
position: absolute;
transform: translate(-50%, -50%);
font-size: 20px; height:30px;
width: 40px;border-radius: 75px;text-align:center;padding-top:10px;
color: #ffffff;background:var(--gdred);}
.newmp {
animation: newmp 1.5s infinite; }
@keyframes newmp {
0%{height: 0px;width: 0px;}
50%{height: 50px;width: 50px;opacity: 0.8;}
70%{height: 60px;width: 60px;opacity: 0.1;}
100%{height: 75px;width: 75px;opacity: 0;}
}
Re: Animation lors de la réception d'un message privé
Oups, désolé.
a++
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Milouze14 a écrit:Oups, désolé.
a++
Ah mais y'a pas lieu de s'excuser ! C'est juste deux méthodes différentes
Re: Animation lors de la réception d'un message privé
Re,
je viens de tester et le script ne fonctionne pas chez moi.
De plus, l'effet est sur cette div:
Donc, je reste sur ma méthode qui va réellement rechercher sur la partie concernée plutôt que d'ajouter une div:
Mais bon, comme tu le dis si bien, ce sont deux méthodes différentes .
a++
je viens de tester et le script ne fonctionne pas chez moi.
De plus, l'effet est sur cette div:
- Code:
<div class="CHNAVbgmp"></div>
Donc, je reste sur ma méthode qui va réellement rechercher sur la partie concernée plutôt que d'ajouter une div:
- Code:
<div class="navss" style="display: none !important;">{GENERATED_NAV_BAR}</div>
Mais bon, comme tu le dis si bien, ce sont deux méthodes différentes .
- Code:
<script>
$(function(){
$.get('/privmsg?folder=inbox' , function(data){
var number=$(data).find('img[alt="Message Non-lu"]').length;
if(number>=1)
{
$('.CHNAVbg').addClass('newmp');
}
});});
</script>
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Le problème, c'est qu'on va charger la page /privmsg?folder=inbox à chaque fois qu'on charge une quelconque page du forum, que ce soit un sujet ou non: là, on vient juste rajouter une div invisible qui contient les données natives de FA qui sont chargées de base à chaque page; du coup, on vient utiliser les éléments déjà existants pour appliquer l'animation seulement s'il y a un nouveau MP. Ça évite une surcharge dont on peut se passer et on vient accélérer le chargement de la page
J'ai essayé en local avec le forum de Chokolatyne et j'ai eu aucun problème
J'ai essayé en local avec le forum de Chokolatyne et j'ai eu aucun problème
Re: Animation lors de la réception d'un message privé
Effectivement, c'est bien là le soucis, la requête,
Ensuite il faudrait tester si tu as MP non lu.
Est-ce que que tu as toujours l'infobulle (nouveau) sur la barre de navigation de l'image MP ?
J'en doute très fortement au bout d'un certain temps.
Actualises le navigateur ou alors regardes demain (si le temps presse ) .
Mais je doute fortement que ton infobulle soit encore présente et pourtant tu auras encore ton MP non lus encore présent.
L'expérience depuis maintenant près de 8 années que je m'amuse avec les templates,variables etc sur mon fofo me permettre de remonter ce genre d' informations .
a++
Ensuite il faudrait tester si tu as MP non lu.
Est-ce que que tu as toujours l'infobulle (nouveau) sur la barre de navigation de l'image MP ?
J'en doute très fortement au bout d'un certain temps.
Actualises le navigateur ou alors regardes demain (si le temps presse ) .
Mais je doute fortement que ton infobulle soit encore présente et pourtant tu auras encore ton MP non lus encore présent.
L'expérience depuis maintenant près de 8 années que je m'amuse avec les templates,variables etc sur mon fofo me permettre de remonter ce genre d' informations .
a++
Dernière édition par Milouze14 le Mar 12 Mai 2020 - 18:42, édité 1 fois
Invité- Invité
Re: Animation lors de la réception d'un message privé
J'ai toujours l'infobulle. :p
Re: Animation lors de la réception d'un message privé
Super et si tu cliques sur le lien du mp de la barre de navigation sans lire le dit MP.
Que se passe t-il ?
a++
Que se passe t-il ?
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Ça dépendra des membres dans ce cas. Si tu tiens à avoir une icône clignotante en permanence à moins d'avoir lu le MP mais ne pas l'oublier, ou si tu veux juste être tenu au courant.
Les deux codes conviennent à des demandes différentes, mais pas besoin de dédain
(au passage: https://i.ibb.co/5cvvzBf/Screenshot-21.png
ceux suspectés d’avoir contaminé leur maître sont attrapés)
Les deux codes conviennent à des demandes différentes, mais pas besoin de dédain
(au passage: https://i.ibb.co/5cvvzBf/Screenshot-21.png
ceux suspectés d’avoir contaminé leur maître sont attrapés)
Re: Animation lors de la réception d'un message privé
Re,
hum, non, je ne suis pas d'accord un Mp si il n'est pas lu doit garder son apparence.
Ce n'est pas le cas.
Ou alors supprimer directement le bouton et se fier aux notifications de la Toolbar non ?
Je n'ai plus d'avertissement sur la barre de navigation et pourtant j'ai tout de même trois MPS non lu:
Voilà pourquoi la div et moins gourmande mais pas fiable .
Ma requête est peut être plus lourde mais fiable .
Ensuite rien ne nous oblige a mettre le script dans le dit template,
le mettre dans la gestion des scripts et cocher sur l’accueil,
on sera donc averti qu'à cet endroit.
Pour moi le sujet est clos.
A bientôt cher ami.
a++
hum, non, je ne suis pas d'accord un Mp si il n'est pas lu doit garder son apparence.
Ce n'est pas le cas.
Si tu tiens à avoir une icône clignotante en permanence à moins d'avoir lu le MP
Ou alors supprimer directement le bouton et se fier aux notifications de la Toolbar non ?
Je n'ai plus d'avertissement sur la barre de navigation et pourtant j'ai tout de même trois MPS non lu:
Voilà pourquoi la div et moins gourmande mais pas fiable .
Ma requête est peut être plus lourde mais fiable .
Ensuite rien ne nous oblige a mettre le script dans le dit template,
le mettre dans la gestion des scripts et cocher sur l’accueil,
on sera donc averti qu'à cet endroit.
Pour moi le sujet est clos.
A bientôt cher ami.
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
Ah mais il n'y a pas de question d'être d'accord ou non; ça dépend du membre. Il n'y a pas de généralité ^^
Ce qui, du coup, enlève tout intérêt à une toolbar fixe qui s'affiche sur toutes les pages. :/
Chaque code aura son utilité; le tien sera bien plus pratique aux dépens d'une consommation plus importante. C'est au choix
L'heure d'aller manger ! :b Bonne soirée à toi
Ensuite rien ne nous oblige a mettre le script dans le dit template,
le mettre dans la gestion des scripts et cocher sur l’accueil,
on sera donc averti qu'à cet endroit.
Ce qui, du coup, enlève tout intérêt à une toolbar fixe qui s'affiche sur toutes les pages. :/
Chaque code aura son utilité; le tien sera bien plus pratique aux dépens d'une consommation plus importante. C'est au choix
L'heure d'aller manger ! :b Bonne soirée à toi
Re: Animation lors de la réception d'un message privé
Re,
Mais si, je confirme.
Mais quel rapport ?
Bonne soirée à toi aussi.
a++
Ah mais il n'y a pas de question d'être d'accord ou non;
Mais si, je confirme.
Ce qui, du coup, enlève tout intérêt à une toolbar fixe qui s'affiche sur toutes les pages. :/
Mais quel rapport ?
Bonne soirée à toi aussi.
a++
Invité- Invité
Re: Animation lors de la réception d'un message privé
.. Oulah, je vais arrêter là. Ça devient embarrassant x)
Re: Animation lors de la réception d'un message privé
Re bonjour ! Désolé j'ai été occupée tout le restant de la journée :'(
(Merci pour la correction, avec cette mise à jour générale on va repasser tous les textes au peigne fin j'avoue qu'il y a énormément de fautes encore).
J'ai décidé de partir sur la solution de Kehoru, ergonomiquement parlant il est certain qu'une animation visible tant que les messages ne sont pas lus est bien meilleure mais j'avoue que ce n'est pas forcément ce que je recherchais absolument. Je voulais surtout une animation pour signaler au membre qu'il y a des nouveautés. On passe majoritairement via Discord pour le forum, les MPs ne sont que très peu courants donc je pense que ce ne sera pas dérangeant que l'animation se stoppe quand le membre clique sur le bouton : il a accès à sa messagerie, à lui de lire ses messages.
Je vous remercie énormément tous les deux, je n'aurais sincèrement jamais trouver seule (il est temps pour moi de me mettre au javascript), le sujet est clos pour moi encore merci !
(Merci pour la correction, avec cette mise à jour générale on va repasser tous les textes au peigne fin j'avoue qu'il y a énormément de fautes encore).
J'ai décidé de partir sur la solution de Kehoru, ergonomiquement parlant il est certain qu'une animation visible tant que les messages ne sont pas lus est bien meilleure mais j'avoue que ce n'est pas forcément ce que je recherchais absolument. Je voulais surtout une animation pour signaler au membre qu'il y a des nouveautés. On passe majoritairement via Discord pour le forum, les MPs ne sont que très peu courants donc je pense que ce ne sera pas dérangeant que l'animation se stoppe quand le membre clique sur le bouton : il a accès à sa messagerie, à lui de lire ses messages.
Je vous remercie énormément tous les deux, je n'aurais sincèrement jamais trouver seule (
Re: Animation lors de la réception d'un message privé
Je me suis pris à lire le contexte et les autres textes par pure curiosité, je voulais juste signaler ça :b J'aime bien l'idée en tout cas, bon courage à toi/vous !
Sujets similaires
» Contenu de l'email de notification lors de la réception d'un Message Privé
» Icone - Avertissement de réception de Message Privé (MP)
» Réception de message privé étrangers indésirable sur mon forum rpg.
» Pop-up lors d'un nouveau message privé
» Animation lors du déplacement de la souris
» Icone - Avertissement de réception de Message Privé (MP)
» Réception de message privé étrangers indésirable sur mon forum rpg.
» Pop-up lors d'un nouveau message privé
» Animation lors du déplacement de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum