Animation sur le bouton envoyer de la chatbox

2 participants

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

Résolu Animation sur le bouton envoyer de la chatbox

Message par user123456789 Sam 21 Jan 2023 - 14:45

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Safari
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 à tous, j'aurais une dernière question concernant la Chatbox.

Est-il possible de faire une animation sur le bouton envoyer de la Chatbox, de faire en sorte que lorsqu'il s'active le fond du bouton passe du rouge au vert assez rapidement et qu'en suite il revient sur sa couleur d'origine.


Dernière édition par user123456789 le Dim 22 Jan 2023 - 14:06, édité 1 fois
user123456789

user123456789
Nouveau membre

Messages : 22
Inscrit(e) le : 17/01/2023

https://trading.forumactif.com/
user123456789 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation sur le bouton envoyer de la chatbox

Message par chattigre Sam 21 Jan 2023 - 19:20

Bonjour,

Je ne sais pas si ça correspond à ce que vous souhaitez, mais il est possible de changer la couleur de fond du bouton lorsque l'utilisateur est en train de cliquer dessus avec sa souris :
Ajoutez ce code CSS :
Code:
.chatbox #submit_button:active  {
  background-color: green;
  border-color: lightgreen;
  color: white;
}

Dans l'ordre, les 3 propriétés vous permettent de changer la couleur :
- de fond
- de la bordure
- de la police (du texte)

Vous pouvez remplacer green, lightgreen et white par les couleurs de votre choix que vous trouverez par exemple sur le site https://htmlcolorcodes.com/fr/

Cordialement
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation sur le bouton envoyer de la chatbox

Message par user123456789 Sam 21 Jan 2023 - 20:18

Bonsoir,

C'est à peu près ça, mais ce qu'il faudrait c'est que dès que l'on appuie sur le bouton envoyer, ça déclenche une petite animation qui change la couleur du fond du bouton qui passe du rouge au vert à une fraction de seconde.
Animation sur le bouton envoyer de la chatbox Captur21
Animation sur le bouton envoyer de la chatbox Captur22

Pour ensuite revenir à la couleur initiale :
Animation sur le bouton envoyer de la chatbox Captur23
user123456789

user123456789
Nouveau membre

Messages : 22
Inscrit(e) le : 17/01/2023

https://trading.forumactif.com/
user123456789 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation sur le bouton envoyer de la chatbox

Message par chattigre Sam 21 Jan 2023 - 20:55

Je vois...
Essayez ce Javascript placé sur la Chatbox :
Code:
$(function() {
    $("#message").on("keydown", function(e) {
        if(e.keyCode == 13) {
            messageSent();
        }
    });
    $("#submit_button").on("click", function() {
        messageSent();
    });
    function messageSent() {
        $("#submit_button").css("background", "red");
        setTimeout(function() {
            $("#submit_button").css("background", "green");
            setTimeout(function() {
                $("#submit_button").removeAttr("style");
            }, 500)
        }, 500)
    }
});

Toutefois, je ne suis pas certain de comprendre votre objectif derrière ce code.
Si c'est pour indiquer que le message est "en envoi" ?, alors sachez que normalement l'envoi est instantané Smile

Cordialement.
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation sur le bouton envoyer de la chatbox

Message par user123456789 Sam 21 Jan 2023 - 21:03

chattigre a écrit:Je vois...
Essayez ce Javascript placé sur la Chatbox :
Code:
$(function() {
    $("#message").on("keydown", function(e) {
        if(e.keyCode == 13) {
            messageSent();
        }
    });
    $("#submit_button").on("click", function() {
        messageSent();
    });
    function messageSent() {
        $("#submit_button").css("background", "red");
        setTimeout(function() {
            $("#submit_button").css("background", "green");
            setTimeout(function() {
                $("#submit_button").removeAttr("style");
            }, 500)
        }, 500)
    }
});

Toutefois, je ne suis pas certain de comprendre votre objectif derrière ce code.
Si c'est pour indiquer que le message est "en envoi" ?, alors sachez que normalement l'envoi est instantané Smile

Cordialement.

C'est une petite référence par rapport au thème du forum Smile
Cependant, j'ai essayé votre code rien ne se déclenche.
user123456789

user123456789
Nouveau membre

Messages : 22
Inscrit(e) le : 17/01/2023

https://trading.forumactif.com/
user123456789 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Animation sur le bouton envoyer de la chatbox

Message par chattigre Sam 21 Jan 2023 - 21:14

Bonsoir,

Pouvez-vous retenter SVP ? Je viens de tester sur votre forum et effectivement ça ne fonctionne pas, mais j'ai testé sur deux autres forums et le code est bien fonctionnel normalement :
Code:
$(function() {
    $("#message").on("keydown", function(e) {
        if(e.keyCode == 13) {
            messageSent();
        }
    });
    $("#submit_button").on("click", function() {
        messageSent();
    });
    function messageSent() {
        $("#submit_button").css("background", "red");
        setTimeout(function() {
            $("#submit_button").css("background", "green");
            setTimeout(function() {
                $("#submit_button").removeAttr("style");
            }, 500)
        }, 500)
    }
});

Je vois que sur votre forum le code contient des guillemets simples ' et non doubles " , si le problème persiste essayez d'installer le code avec un autre navigateur internet que vous n'utilisez pas d'habitude (non personnalisé).

----

Le problème est que vous avez une règle dans votre CSS qui empêche l'animation d'être visible puisqu'elle passe par dessus l'attribut "style" ajouté par le JS.
Je vous invite à remplacer cette règle
Code:
#submit_button {
   border: 1px solid #000 !important;
   background: #ececec !important;
   color: #000;
   cursor: pointer;
   height: 20px !important;
   width: 55px !important;
}
Par
Code:
#chatbox_footer #submit_button {
  border: 1px solid #000;
  background: #ececec;
  color: #000;
  cursor: pointer;
  height: 20px !important;
  width: 55px !important;
}

Je ne me trompe pas en disant qu'elle était destinée à la Chatbox également ? Dans ce cas le rendu sera exactement le même, mais l'animation sera visible.

Cordialement
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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