Animation sur le bouton envoyer de la chatbox

[user123456789]

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.

[chattigre]

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

[user123456789]

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.



Pour ensuite revenir à la couleur initiale :

[chattigre]

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é

Cordialement.

[user123456789]

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é

Cordialement.

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

[chattigre]

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