Redirection après inactivité de la souris

**lirene42** · 12/03/2011, 11h15

Bonjour tout le monde,

Je parcours très souvent le site, et j'ai souvent trouvée réponse à mes questions

mais là je bloque.

Voici le problème :

J'ai créé une page d'accueil avec différent liens pointant sur différent site internet. Cependant je souhaiterais qu'en cas d'inactivité de la souris pendant 3 min cela me ramène à ma page d'accueil.

Dans un premier temps est-ce possible en HTML ?

Dans un deuxième temps comment pourrais-je mettre cela en place?

En vous remerciant pour cette lecture.

Lirene

**misterakm** · 12/03/2011, 11h23

En HTML pur, certainement pas.

Si tu peux utiliser du Javascript, c'est possible. Une façon simple de faire, avec jQuery : http://docs.jquery.com/Tutorials:Mouse_Position

(Il te suffit de faire un timer qui est relancé dès qu'un mouvement de souris est détecté et s'il arrive à 0, c'est qu'il n'y a pas eu de mouvement et tu peux alors faire une redirection Javascript.)

**lirene42** · 12/03/2011, 11h27

Merci pour votre réponse.

Je ne connais pas le JavaScript, je pensais qu'on pouvait le faire en HTML.
En tous cas merci pour m'avoir éclairée, si je dois m'orienter en JavaScript mon post n'est pas au bon endroit

**Auteur** · 13/03/2011, 13h01

bonjour lirene42,

voilà un exemple simple

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
var chrono;
function startTimer()
{
        // le second paramètre de la fonction setTimeout() est en millisecondes
        // 3min = 3*60*10 ms
        // la fonction redirection() sera exécutée dans 3 min
        // on récupère l'identifiant du timer dans chrono
        chrono = setTimeout("redirection()",1800);      
                                                                                                
}       
// remise à 0 du timer avec pour identifiiant le contenu de chrono, s'il y a eu un mouvement dans la page 
// [évenement onmousemove()]
// puis redémarrage du timer en appelant la fonction startTimer()
function resetTimer()
{
        clearTimeout(chrono);
        startTimer();
}
 
// fonction appelée après 3 minutes d'inactivité de la souris (pas de mouvement dans la page)
function redirection()
{
        // redirection vers le site www.developpez.net
        document.location.href = "http://www.developpez.net";   
}
 
 
</script> 
 
 
</head>
 
<body onmousemove="resetTimer()" onload="startTimer()">
 
<div> 
bla bla bla bla bla bla
</div>
 
 
</body>
</html>

ce code réalise une redirection après 3 minutes d'inactivité de la souris. Par inactivité de la souris, cela veut pas de mouvement. Les clics sur la page ne réinitialisent pas la temporisation.

PS : il faut vraiment qu'on m'explique pourquoi les solutions à des problèmes simples passent nécessairement par l'utilisation d'une bibliothèque de 200ko alors que 20 lignes de codes suffisent

**misterakm** · 13/03/2011, 13h10

Auteur > jQuery pèse 29ko

et c'est une solution relativement simple, à condition de savoir de quoi on parle, effectivement. D'un autre côté, une telle librairie pourrait fortement l'aider à faire du code cross-browser simplement, donc au moins maintenant lirene42 en connait l'existence

!

Ta solution est parfaite puisqu'elle fournit la solution exacte (le code nécessaire et suffisant, ni trop, ni trop peu et avec les commentaires en plus)

**Auteur** · 13/03/2011, 13h29

Envoyé par misterakm

Auteur > jQuery pèse 29ko

200ko non compressée

**ABCIWEB** · 14/03/2011, 02h47

@lirene42

Sur le principe je me demande si c'est un bonne chose... Enfin bon si c'est indispensable... cela dit il ne faudrait pas que cette redirection soit un élément déterminant pour le fonctionnement de ton site car javascript peut être facilement désactivé.

**thelvin** · 14/03/2011, 03h02

Plus important : à part avec des frames ou des fenêtres multiples, deux choses détestées pour de très réelles raisons et pas spécialement intuitives de toute façon, je vois assez mal comment imposer notre propre JavaScript après que le visiteur ait suivi notre lien vers un autre site.

**lirene42** · 16/03/2011, 17h50

Bonjour à tous et merci pour vos réponses.

Merci aussi pour le code avec les commentaires ce qui m'aide à comprendre.

Pour être plus clair, voici l'utilisation :

J'ai des enfants à la maison et je voudrais faire en sorte qu'ils aient le choix entre 4 site internet de jeux et au cas où si il joue plus ça reviens sur la page de choix, d'où ma demande de redirection en cas d'inactivité.

Oui je sais, c’est du bricolage mais j’ai rien trouvée de mieux.

Merci à vous

@Thelvin : Oui je pensais utiliser des frames pour que cela soit plus simple

**asteroidz** · 08/11/2012, 16h50

PS: 1seconde=1000milliseconde d'ou le mot "milli"
Merci tres bon script exactement ce que je cherchais

**Sebwcip** · 28/03/2014, 10h49

Envoyé par Auteur

bonjour lirene42,

voilà un exemple simple

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
var chrono;
function startTimer()
{
        // le second paramètre de la fonction setTimeout() est en millisecondes
        // 3min = 3*60*10 ms
        // la fonction redirection() sera exécutée dans 3 min
        // on récupère l'identifiant du timer dans chrono
        chrono = setTimeout("redirection()",1800);      
                                                                                                
}       
// remise à 0 du timer avec pour identifiiant le contenu de chrono, s'il y a eu un mouvement dans la page 
// [évenement onmousemove()]
// puis redémarrage du timer en appelant la fonction startTimer()
function resetTimer()
{
        clearTimeout(chrono);
        startTimer();
}
 
// fonction appelée après 3 minutes d'inactivité de la souris (pas de mouvement dans la page)
function redirection()
{
        // redirection vers le site <a href="http://www.developpez.net" target="_blank">www.developpez.net</a>
        document.location.href = "http://www.developpez.net";   
}
 
 
</script> 
 
 
</head>
 
<body onmousemove="resetTimer()" onload="startTimer()">
 
<div> 
bla bla bla bla bla bla
</div>
 
 
</body>
</html>

ce code réalise une redirection après 3 minutes d'inactivité de la souris. Par inactivité de la souris, cela veut pas de mouvement. Les clics sur la page ne réinitialisent pas la temporisation.

PS : il faut vraiment qu'on m'explique pourquoi les solutions à des problèmes simples passent nécessairement par l'utilisation d'une bibliothèque de 200ko alors que 20 lignes de codes suffisent

Bonjour à tous,

j'ai testé ce code et je suis redirigé au bout de quelques secondes sur le site developpez et ce même si je bouge la souris. j'ai regardé ce code il est bien détaillé, mais n'étant pas trop fort en programmation je ne vois pas ce qui cloche, surtout que certaines personnes l'ont testé apparemment sans souci.
est ce que quelqu'un pourrait me venir en aide pour voir ce qui cloche et corriger l'erreur?
je vous remercie par avance
Sébastien

**ABCIWEB** · 28/03/2014, 16h54

->cf message de asteroidz juste au dessus de ton message

**Auteur** · 02/04/2014, 22h23

euh oui

il faut multiplier par 1000 pas par 10.

**Arthezius** · 17/02/2015, 17h24

Oui mais normalement, en bougeant la souris ça ne devrait pas rediriger vers la page.
En fait, ça devrait le faire uniquement si la souris ne bouge pas.

En testant et en bougeant la souris continuellement, la redirection se fait quand même.
Autrement dit, la remise à zéro du décompte ne se fait pas.

Quelqu'un pour aider?

**NoSmoking** · 17/02/2015, 18h26

Bonjour,
la surveillance de l'événement étant sur le BODY, si celui ci n'occupe pas TOUT l'espace de la fenêtre alors la redirection aura lieu.

2 solutions
- mettre le CSS suivant

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html, body {
  width:100%;
  height:100%;
}

- mettre la surveillance sur le document, dans ce cas mettre en fin de document le script suivant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.onmousemove = function(){
  clearTimeout(chrono);
  startTimer();
}
startTimer();

et supprimer la surveillance sur le BODY.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body>
<div>
bla bla bla bla bla bla
</div>

**ddaweb** · 09/06/2017, 15h31

Bonjour,

Je me permet de relancer la discussion en ayant tenu compte de ceci :

Envoyé par NoSmoking

Bonjour,
- mettre la surveillance sur le document, dans ce cas mettre en fin de document le script suivant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.onmousemove = function(){
  clearTimeout(chrono);
  startTimer();
}

J'ai voulu afficher le décompte en cas d’inactivité sur une page en particulier, la redirection fonctionne admirablement, mais le décompte reste sur "Retout à la page d'acceuil dans 20 secondes." et ne se fait pas.

Voici le javascript :

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
29
30
31
32
		function startTimer() {
				var delai=20;
				var tempo=delai*1000;
				var x;	
 
				// ----- Démarrage du décompte : affichage
				decompte (delai); 
 
				// ----- Redirection en cas d'innactivité : le second paramètre de la fonction setTimeout() est en millisecondes -> VAR tempo
				chrono = setTimeout("redirection()",tempo); 
			} 
 
			function redirection()
			{
					// redirection vers la page d'accueil
					document.location.href = "?pg=accueil";   
			}
 
			function decompte(temps) {			
				var reste=temps;
				var x;	
 
				if(reste>=0) {
					if(reste>1) { var sec = " secondes."; } 
					else { var sec = " seconde."; }
 
					document.getElementById("Crono").innerHTML = "Retout à la page d'acceuil dans " + reste + sec ;
					reste-- ;
					x = setTimeout("decompte(reste)",1000) ;
				}
				else { clearTimeout(x) ; }
			}

Dans la page à afficher le décompte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

print "<div id=\"Crono\"></div>";

Quelqu'un pourrait me dire où se situe mon erreur, il est vrai que je suis assez nul en javascript.
Ce serait un plus de considérer les "clics" comme une activité également car dans mon cas, ils vont faire un choix en cliquant sur un ou plusieurs checkbox.

D'avance merci,
ddaweb

**ddaweb** · 09/06/2017, 17h59

Re,

J'ai continué à chercher et expérimenter (vu mes connaissances réduites en javascript) et suis arriver à le faire fonctionner.
J'ai mélangé le script de ce post avec un trouvé sur le net.

Je me suis douté qu'il s'agissait d'un problème de variable, et j'ai donc pensé à une variable globale (enfin 2) pour résoudre mon problème.
J'y ai même ajouté le "onclick".

Voici donc je JS final :

Code js :

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
29
30
var delai=0;
var x;
 
function startTimer() {
	delai=delai*0+20; // ----- Initialisation de la variable globale "delai" pour la fonction "decompte()"
	var tempo=delai*1000; // ----- En millisecondes
 
	// ----- Démarrage du décompte pour affichage
	clearTimeout(x) ; // ----- Reset de la variable globale "x" pour la fonction "decompte()" lors de la réinitialisation du temps (ex. : page "liste_chiens.php", javascript en bas de page)
	decompte (); 
 
	// ----- Redirection en cas d'innactivité après le temps "tempo"
	chrono = setTimeout("redirection()",tempo); 
} 
 
function redirection() { 
	document.location.href = "?pg=accueil"; // ----- Redirection vers la page d'accueil
}
 
function decompte() {			
	if(delai>=0) {
		if(delai>1) { var sec = " secondes"; } 
		else { var sec = " seconde"; }
 
	document.getElementById("Crono").innerHTML = "Retout à la page d'acceuil dans " + "<strong>" + delai + "</strong>" + sec + "<br /><span class=\"texte_Gris_11-1\">Bougez la souris ou choisissez un cours pour réintialiser ce temps, ou alors validez votre choix</span>" ;
		delai-- ;
		x = setTimeout(decompte,1000) ;
	}
	else { clearTimeout(x) ; }
}

Et le code en bas de page quand le décompte doit être actif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
        document.onmousemove = function(){
          clearTimeout(chrono);
          startTimer();
        }
        document.onclick = function(){
          clearTimeout(chrono);
          startTimer();
        }
        startTimer();
</script>

Toute amélioration au code est évidemment la bienvenue.

@+
ddaweb

Redirection après inactivité de la souris

HTML

Discussions similaires

Partager

Partager