Délais de 10 secondes d'une notice qui ne revient pas lors des autres visites

**dancom5** · 10/09/2015, 08h05

Bonjour à vous.

J'ai fait un petit code jQuery pour supprimer une classe css au moment du démarrage de la page.

Ma page a une classe avec une balise div qui fait afficher une petite notice au début.
Mais, je voudrais que cette notice s'efface pour de bon après avoir entrée au bout de 10 secondes
et qu'elle ne revienne pas sur le navigateur de l'utilisateur ou l'utilisatrice si elle y retourne.

Je pensais avec l'aide d'un cookie mais je ne vois pas du tout comment faire avec ce que j'ai.

Code :

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

1
2
3
  $(document).ready(function(){    
    $(".maclass").delay(10000).fadeOut();    
  });

Espérant que quelqu'un puisse m'aider, mes salutations.

**danielhagnoul** · 10/09/2015, 11h22

Ce n'est pas un problème jQuery. Il faut utiliser session storage.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$( function(){ // forme abrégée de $(document).ready( function( ){
 
  var monDelay = sessionStorage.getItem('monSiteDelay');
 
  console.log( monDelay );
 
  if ( monDelay === null ){
    $( ".maclass" ).delay( 10000 ).fadeOut();
    sessionStorage.setItem('monSiteDelay', '10000');
  }
 
});

**dancom5** · 11/09/2015, 07h25

Ça semble pas marcher.

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
 
<script>
$(document).ready( function( ){ 
  var monDelay = sessionStorage.getItem('monSiteDelay');
  console.log( monDelay );
  if ( monDelay === null ){
    $( ".maclass" ).delay( 10000 ).fadeOut();
    sessionStorage.setItem('monSiteDelay', '10000');
  }
});
 
//sessionStorage.couleur = "blue";
console.log(sessionStorage.monSiteDelay);
document.write(sessionStorage.monSiteDelay);
</script>
 
<div class="maclass">test</div>

**danielhagnoul** · 11/09/2015, 11h01

Envoyé par dancom5

Ça semble pas marcher.

1) Je teste toujours mes codes avant de les donner, donc je vous assure que cela fonctionne chez moi.
2) Je ne peux rien conclure de votre longue explication : "Ça semble pas marcher".
3) Si vous utilisez un navigateur de l'âge des dinosaures (IE <= 8 ), c'est normal.

**dancom5** · 11/09/2015, 12h59

C'est difficile de donner une longue explication puisque rien se passe.
Le navigateur est Firefox 40.0.3, alors, c'est la dernière.
Et en faite, mon code est en quelque sorte une explication par démo.

Pourtant ceci fonctionne pour enregistrer la sessionStorage:

Code :

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

1
2
3
4
 
sessionStorage.couleur = "blue";
console.log(sessionStorage.couleur);
document.write(sessionStorage.couleur);

**danielhagnoul** · 11/09/2015, 15h31

Je viens de tester le code ci-dessous dans Firefox 40.0.3, il agit comme prévu. La division contenant "Hello World" s'efface lors de la première ouverture de la page, et elle reste toujours visible si je recharge la page avec le bouton "Actualiser la page".

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
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
 
 
  </style>
</head>
<body>
 
  <div class="maclass">
    <p>Hello World !</p>
  </div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      var monDelay = sessionStorage.getItem('monSiteDelay');
 
      if ( monDelay === null ){
        $( ".maclass" ).delay( 10000 ).fadeOut();
        sessionStorage.setItem('monSiteDelay', '10000');
      }
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

**dancom5** · 11/09/2015, 19h32

Merci pour l'aide. c'est apprécié.

Mon but est que lors d'une toute première visite dans le site, la notice apparaisse un cour moment et qu'après
elle disparaisse et ne réapparait plus lors des visites suivantes.

**danielhagnoul** · 11/09/2015, 21h25

Je croyais avoir compris qu'il s'agissait d'un problème de session, il faut simplement remplacer sessionStorage par localStorage.

Mais, une information qui ne doit apparaître à l'utilisateur qu'une seule fois c'est soit une information peu utile (j'allais dire inutile) soit un formulaire d'inscription. Dans ce cas, c'est à traiter au niveau du serveur et avec une base de données des utilisateurs. Voir les forums adéquats (PHP et autres langages serveur).

Délais de 10 secondes d'une notice qui ne revient pas lors des autres visites

jQuery

Vue hybride

Discussions similaires

Partager

Partager