Bonjour,
Je cherche a appliquer un code jquery à mon site web. (
https://tds.datweb.ch)
J'aimerais utiliser un code qui permette d'élargir le logo en haut à gauche sur toute la surface de la page lorsqu'il n'y a aucune interaction avec le clavier, le clique de la souris, le scroll ou le mouvement de la souris durant 5 secondes.
Lorsqu'une interaction est effectuée, le compteur se remet à zéro et le logo se réduit pour retrouver sa taille d'origine.
J'ai trouvé un code ci-dessous qui pourrait être repris pour appliquer ce que je souhaite faire.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| (function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$("body").append("<p>Welcome Back.</p>");
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery) |
J'ai trouvé un autre code (JS ou JQuery) qui pourrait aider :
https://www.geeksforgeeks.org/how-to-detect-idle-time-in-javascript/ et un plugin qui agit comme je le voudrais mais onmouse hover :
https://makitweb.com/zoom-images-on-...-with-zoomove/
Je ne connais malheureusement pas ce langage pour programmer moi-même. Est-ce que l'un ou l'une de vous pourrait m'aider à faire un petit script qui permette de réaliser cela ?
Merci infiniment pour votre soutien.
Bonne journée
Partager