N'exécuter un script qu'une seule fois (cookie ?)

Version imprimable

Bonsoir,
Grâce au Raptorize-kit et à l'aide de certains d'entre vous, j'ai pu créer une petite animation à l'ouverture de la page d'accueil de mon site (un perso arrive de la droite de l'écran et s'arrête). Le script complet :
Code:

1 2 3 4 5 6 7 $( window ).load( function(){ var musique = $( "#sound" ).get( 0 ), foreground = $( "#foreground" ); musique.load(); // pour Chrome ! musique.play(); foreground.animate( { "right" : "-250px" }, 500 ); });
J'aimerais que ce script ne s'exécute qu'une seule fois. Par une seule fois je veux dire : on se rend sur la page d'accueil, le script s'exécute ; on change de page puis on revient sur la page d'accueil, le script ne s'exécute plus. Je pense qu'il faut passer par les cookies mais je ne sais pas trop comment faire.

Merci de votre aide.

Salut,

Tu peux en effet passer par un cookie qui va indiquer si le script a déjà été exécuté ou non.

Je te conseille pour ça d'utiliser le plugin cookie pour jQuery, vu que tu utilises jQuery.

Au début de ton script dont tu veux qu'il ne s'exécute qu'une seule fois, tu vérifies si le cookie existe

Code:

if (!$.cookie('executed')) { /* ton code */ }

A la fin de ton script, tu mets en place le cookie

Code:

$.cookie('executed', true);

Remarque : tant que le cookie sera vivant, le script ne sera plus exécuté. Tu peux jouer sur la date d'expiration du cookie en ajoutant une option comme dans le code suivant pour lequel le cookie expire au bout de 7 jours.

Code:

$.cookie('executed', true, {expires: 7});

Code final :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> $(window).load(function(){ if (!$.cookie('executed')) { var musique = $("#sound").get(0); var foreground = $("#foreground"); musique.load(); // pour Chrome ! musique.play(); foreground.animate({"right" : "-250px"}, 500); $.cookie('executed', true, {expire: 7}); } }); </script>
Ou aussi
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script> $(window).load(function(){ if ($.cookie('executed')) return; var musique = $("#sound").get(0); var foreground = $("#foreground"); musique.load(); // pour Chrome ! musique.play(); foreground.animate({"right" : "-250px"}, 500); $.cookie('executed', true, {expire: 7}); }); </script>

15/02/2013, 17h03
Invité

Merci pour ton aide mais, malheureusement, ni le premier ni le second code ne fonctionne chez moi :(
Je pense que cela vient du fait que je n'ai pas trop sur ce que tu voulais dire par "utiliser le plugin jQuery pour les cookies" : est-ce un code particulier que je dois intégrer quelque part et que tu n'as pas mis dans le code final que tu as proposé ?
15/02/2013, 19h20
Invité

En fait, jQuery ne dispose pas de la fonctionnalité cookie de base. Il te faut utiliser le plugin dédié, téléchargeable ici. (Le fichier se situe ici sur le dépôt officiel github).

Télécharge le dans tes librairies Javascript (comme jQuery) et inclue le dans une balise <script>

Merci beaucoup ! Le script fonctionne, mais entraîne parallèlement 1 problème : comme je demande au script de ne s'exécuter qu'une seule fois, lorsque je reviens sur la page d'accueil, ni la musique ni l'animation ne se lancent (et c'est normal). Pour expliquer mon problème, voici le code complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <img id="foreground" src="photos/foreground.png"> <audio id="son" preload="auto"> <source src="son.mp3"> <source src="son.ogg"> </audio> <script> $(window).load(function(){ if (!$.cookie('executed')) { var musique = $("#son").get(0); var foreground = $("#foreground"); musique.load(); // pour Chrome ! musique.play(); foreground.animate({"right" : "-250px"}, 500); $.cookie('executed', true); } }); </script>
L'animation consiste en l'apparition par la droite d'une image (foreground.png) qui s'arrête au niveau de la partie droite de l'écran. Cependant, si le script fait ce qu'on lui demande, à savoir ne pas jouer l'anim lorsqu'on revient sur la page d'accueil, j'aimerais que l'image non animée figure pour autant. Plus simplement : la première fois que j'ouvre la page d'accueil, l'image apparaît en animé depuis la droite avec la musique ; toutes les autres fois où je vais sur la page d'accueil, l'image est déjà là, et donc n'apparaît ni en animé ni avec la musique.
Est-ce possible ?
Merci.

Tout à fait possible.

Ton image a un point de départ et un point d'arrivé. Lorsque le cookie n'est pas défini, tu montres l'animation. Il te suffit de dire que s'il est défini, tu positionnes l'image à l'endroit où tu veux, sans animation.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<img id="foreground" src="photos/foreground.png">
	<audio id="son" preload="auto">
		<source src="son.mp3">
		<source src="son.ogg">	
	</audio>
 
	<script>
    $(window).load(function(){
        var foreground = $("#foreground");
        if (!$.cookie('executed')) {
            var musique = $("#son").get(0);
 
            musique.load(); // pour Chrome !
            musique.play();
 
            foreground.animate({"right" : "-250px"}, 500);
            $.cookie('executed', true);
        } else {
            foreground.css(/* règles css pour le positionnement adéquat */);
        }
    });
</script>

C'est une manière de faire parmi tant d'autres.

EDIT : code fix

16/02/2013, 18h49
Invité

Super merci beaucoup ça fonctionne ! (sauf sur Chrome de mon fixe (ça marche sur Chrome de mon portable) où l'anim se relance quand même. Mais il doit sans doute avoir un bug entre le jQuery et une extension, un programme... installé sur mon fixe).
Merci encore !

Bonjour,
Je reviens à vous plusieurs mois après. Je rencontre en effet un problème assez bizarre : sur Firefox, tout fonctionne bien, lorsque je reviens sur la page d'accueil ni l'animation ni la musique ne se lancent. Mais sur Chrome, si l'animation ne se joue pas, la musique, elle, se lance bel et bien !
Rappel du code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script> $(window).load(function(){ var foreground = $("#foreground"); if (!$.cookie('executed')) { var musique = $("#son").get(0); musique.load(); // pour Chrome ! musique.play(); foreground.animate({"right" : "-250px"}, 500); $.cookie('executed', true); } else { foreground.css({"right" : "-250px"}); } }); </script>
Avez-vous une idée ?
Merci.