Discussion :

[Redrum65]

Bonjour.

Sur mes différentes pages, une Newsletter est visible en position fixe et lorsque l'on clique sur un bouton, elle se cache.
J'aimerais savoir comment je pourrais faire pour que lorsqu'une personne a cliqué sur le bouton pour la cacher, elle reste cachée, même en rechargeant la page et en allant sur les autres pages.

Je suppose qu'il faut utiliser un sessionStorage (ou localStorage) mais je ne suis pas sûr que ça marche sur une class.

Je vous poste le code ici :

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
        <script>
            jQuery(document).ready(function($) {
                //Newsletter
                $('#fleche').click(function() {
                    $('#newsletter').toggleClass('slide');
                    $(this).toggleClass('inverse');
                });
 
 
                function position() {
 
                    var pos = $(document).scrollTop();
 
 
                    if (pos > 300) {
                        $('#newsletter').addClass('slide');
                        $('#fleche').addClass('inverse');
                    }
                };
 
 
 
                $(document).ready(function() {
                    position();
                });
 
                $(window).scroll(function() {
                    position();
 
                });
 
 
            });
        </script>

et le CSS (si c'est bien utile) :

Code CSS :

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
#newsletter{
    position: fixed;
    width: 400px;
    right: 0px;
    bottom: 200px;
    background-color: white;
    transition: all 0.8s;
    z-index: 1000;
 
}
 
#newsletter #fleche{
    background: url(fleche.png);
    height: 30px;
    width: 30px;
    position: absolute;
    bottom: 0px;
    left: -30px;
    cursor: pointer;
 
}
 
.slide{
    transform: translate(400px);
}
 
.inverse{
    transform: rotate(180deg);
}

[Toufik83]

Salut,

Ajoute un each juste après la fin de toggleClass comme suite :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#fleche').click(function() {
         $('#newsletter').toggleClass("slide inverse")//au lieu de toggleClass("slide") et toggleClass("inverse"), tu peux les mettre les deux dans un seul sélecteur
	.each(function(){
		if ($(this).hasClass("slide inverse")){
			console.log('fermé');
			localStorage.setItem("etat", "fermé");
		}else {
			console.log('ouvert');
			localStorage.setItem("etat", "ouvert");
		}
	});
        console.log('l\'etat :',localStorage.getItem("etat") );
});

Comme il est possible de remplacer each par promise().done