Show div only once using cookie

Question

I have this code that is running fine:

$(document).ready(function(){
setTimeout(function(){ $('.welcomemessage').slideToggle('slow');
},1000);
setTimeout(function(){ $('.welcomemessage').hide('slow');
},20000);  

setTimeout(function() {
$(".td-page-wrap").animate({
        marginTop: "800px",
    }, 750);
},1000);  
setTimeout(function() {
$(".td-page-wrap").animate({
        marginTop: "0px",
    }, 750);
},20000);   

$('.closewelcomemessage').click(function(){
$(".welcomemessage").hide();
$(".td-page-wrap").animate({
        marginTop: "0px",
    }, 750);
});
});

I would like to show this animation only once per visit. I tried to add a cookie, without any success. How can I do it?

EDIT : I finally need it to expire after seven days, without any sliding expiration. Is there a way to do this?

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

you'll need the cookie plugin

already explained in this answer:

https://stackoverflow.com/a/1599367/3391783

edited May 23 '17 at 11:57

Community

1
1

answered Nov 23 '14 at 19:47

low_rents

4,481
3
27
55

The problem is that I tried to use it but was unable to insert it inside my code, the div is showing at every page load... – Sarah Nov 23 '14 at 20:15

balzafin · Answer 2 · 2014-11-23T22:26:41.713

If the level of support is enough for your needs, I would go with LocalStorage.

You can wrap the code inside a function. Then when the user enters your page, just check if there's a item in the storage. If not, call the function and set the item.

For experimentation, you can use a custom timestamp. Set the value of the item as the current date in milliseconds. Then you can check if it was set more than seven days ago.

Like this:

$(document).ready(function () {

    if (typeof (Storage) !== "undefined") {

        // get the current date
        var dateSevenDaysAgo = new Date();
        // decrease 7 days from the current date, so it will repesent the date 7 days ago
        dateSevenDaysAgo.setDate(dateSevenDaysAgo.getDate() - 7);
        // get the excperiationDate item from localStorage
        var expirationDate = localStorage.getItem("expirationDate");

        // check if the excperiationDate item doesn't excist
        // OR if it has been set more than 7 days ago
        if (!expirationDate || expirationDate < dateSevenDaysAgo.getTime()) {
            // notice that getTime stores the date in milliseconds after/before January 1, 1970
            localStorage.setItem("expirationDate", new Date().getTime());
            showWelcomeMessage();
        }

    } else {
        // LocalStorage is not supported in users browser
    }

    function showWelcomeMessage() {
        setTimeout(function () {
            $('.welcomemessage').slideToggle('slow');
        }, 1000);
        setTimeout(function () {
            $('.welcomemessage').hide('slow');
        }, 20000);

        setTimeout(function () {
            $(".td-page-wrap").animate({
                marginTop: "800px"
            }, 750);
        }, 1000);
        setTimeout(function () {
            $(".td-page-wrap").animate({
                marginTop: "0px"
            }, 750);
        }, 20000);

        $('.closewelcomemessage').click(function () {
            $(".welcomemessage").hide();
            $(".td-page-wrap").animate({
                marginTop: "0px"
            }, 750);
        });
    }

});

You also had some extra commas after every marginTop: Xpx. I removed those.

EDIT: Updated the answer to match the new requirements (expiration).

Awesome, I didn't know LocalStorage and it's running fine! Just one question: when the div will show again to the user? Is there a way to custom the cookie expiration up to 7 days for instance? — Sarah, Nov 23 '14 at 20:37
I don't think you can set the expiration directly, but you can do it with a timestamp: http://stackoverflow.com/a/4275854/3632159. — balzafin, Nov 23 '14 at 20:42
It should be pretty easy to implement it to the code in my answer. Just set the value to `new Date().getTime()` instead of `true` and add another comparison where you compare the items value and `new Date().getTime().` (time now). — balzafin, Nov 23 '14 at 20:50
I unfortunately didn't suceed to add the timestamp. Maybe I'm missing something... May you please help me? — Sarah, Nov 23 '14 at 21:23
I can see you don't have enough reputation to use the SO chat. Like I said, edit your question and add that you need it to expire after seven days. Also mention if you want it to be a sliding expiration. In other words, do you want to reset the expiring date every time the user visits your page. After that, I will update my answer. — balzafin, Nov 23 '14 at 21:33
You're welcome. Remember to mark this as the correct answer if you think it is. That way your question will be shown as `solved`. — balzafin, Nov 23 '14 at 22:52

Show div only once using cookie

2 Answers2