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.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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