hrskrs hrskrs - 1 month ago 14
Javascript Question

Rotating an Image only once with a jQuery cookie

On the page load I rotate an image for some time and hide using jQuery. However when I navigate to other pages and come back again to the first one, again it loads that image. How can I make that the rotation will occur only on the first page load?

PS: I know I have to use cookies, but I cannot manage to do it correctly. Can anyone help please?

Here is the code that rotates the image:

$(document).ready(function(){
var angle = 0;
setInterval(function(){
angle+=3;
$("#loading").rotate(angle);
}, 50);
});


I tried to set a defaul cookie as true before the rotation and then change it, but it doesn't work.

$.cookie('visited', true);
$(document).ready(function(){
if( $.cookie('visited') == true){
var angle = 0;
setInterval(function(){
angle+=3;
$("#loading").rotate(angle);
},50);
$.cookie('visited', false);
}
});


I wonder if this can contradict smth:

$(document).ready(function(){

//Initial loading, after 3 seconds fadeout the loading and show the menu
$("#loading").delay(3000).fadeOut("slow");
$(".logo").delay(3500).fadeIn('slow');
$("footer, nav").delay(4000).fadeIn('slow');
});


Here I tried to make a kind of animation. The logo, Footer and Nav are hidden with CSS then I fade in those.

I tried this:

$(document).ready(function(){
if ($.cookie('hasSeenAnimation') == null){
var angle = 0;
setInterval(function(){
angle+=3;
$("#loading").rotate(angle);
},50);

//Initial Loading, after 3 seconds fadeout the Loading and show Menu
$("#loading").delay(3000).fadeOut("slow");
$(".logo").delay(3500).fadeIn('slow');
$("footer, nav").delay(4000).fadeIn('slow');

$.cookie('hasSeenAnimation','true');
}
});


But now on the first load it rotates...when I navigate and come back it shows the rotated image, but prevents the rotation (it doesn't rotate).

Answer

ok guys thnx for help. I just managed to do it bu putting an else statement. here is the code in case someone have same issue. (notice that this is not the best answer as im new on jQuery)

 $(document).ready(function(){
            if ($.cookie('hasSeenAnimation') == null){
                var angle = 0;
                setInterval(function(){
                      angle+=3;
                     $("#loading").rotate(angle);
                },50);

                //Initial Loading, after 3 sec fadout the Loading and show Menu
                $("#loading").delay(3000).fadeOut("slow");
                $(".logo").delay(3500).fadeIn('slow');
                $("footer, nav").delay(4000).fadeIn('slow');

                $.cookie('hasSeenAnimation','true');
            }
            else{
                $("#loading").hide();
                $(".logo").delay(300).fadeIn('slow');
                $("footer, nav").delay(600).fadeIn('slow');
            }
         });