IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Zoom image mousemove keydown scroll


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2015
    Messages : 7
    Points : 6
    Points
    6
    Par défaut Zoom image mousemove keydown scroll
    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

  2. #2
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2015
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2015
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Citation Envoyé par re4perch Voir le message
    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
    Up !

Discussions similaires

  1. zoom image sur mouseon
    Par chloe5972 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 31/12/2007, 15h37
  2. Agrandissement (zoom) image
    Par beavis6511 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 27/12/2007, 11h00
  3. Zoom image + page sombre
    Par lelectronique.com dans le forum Débuter
    Réponses: 2
    Dernier message: 23/12/2007, 09h03
  4. [VB] zoom image
    Par syldudu dans le forum VBA Access
    Réponses: 6
    Dernier message: 03/10/2007, 13h41
  5. Zoom image avec Internet Explorer
    Par zetta dans le forum IE
    Réponses: 1
    Dernier message: 27/06/2006, 15h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo