CODEWITHSUNDEEP
javascript
user1761895
user1761895

Reputation: 37

Executing a js function only once per visit and execute again on refresh

I want the following code to run only once per visit. If i navigate from homepage to different page and come back to homepage, i should not see the effect again. If i refresh the page, i should see the effect. Here is the code : 

function stack(){
       $('#image').animate({
            width: 200,
            height: 150,
            top: 0,

        },1500);
}
$(function(){
    stack();
});

Here is what i am doing : http://jsfiddle.net/kq5M4/

Upvotes: 2

Views: 3017

Answers (3)

Trevor Dixon
Trevor Dixon

Reputation: 24362

Set a cookie that marks that the effect has occurred, but also set a cookie on each page load that keeps track of the last page. If when the home page loads and the last visited page was also the home page, run the effect again.

(Using https://github.com/carhartl/jquery-cookie.)

On the home page:

var lastPage = $.cookie('last_page');
if (!lastPage || lastPage == document.location.pathname)
    stack();

On every page (including home page):

$.cookie('last_page', document.location.pathname, {expires: 0}); // expires: 0 makes it a session-only cookie

You may also need to check the referrer so it will run again if they leave your site and come back later.

Upvotes: 2

TheBrain
TheBrain

Reputation: 5608

on page load, check document.referrer and if is different from your domain or blank, then do the animation. navigating between your pages or refreshing the page will have your domain in document.referrer so you'll skip the animation.

$(function(){
    if (!document.referrer.match(/buybluesky.com/) || document.referrer == document.location.href) {
      stack();
    }
});

Edits: It seems i missed something but I've reedited the code to match all your criterias. Beside checking for the referer to decide if it needs to show or not the animation, it also checks if referrer is equal to the current location. If they are that means it was a refresh since you came to this page from this page.

Upvotes: 1

KingKongFrog
KingKongFrog

Reputation: 14419

Use sessionStorage & store the last page:

var visited = sessionStorage.getItem('visit');

if (visited == null || document.location.href == sessionStorage.getItem('lastPage')) {
    stack();
    sessionStorage.setItem('visit', 1);
}

sessionStorage.setItem('lastPage', document.location.href);

Upvotes: 1

Related Questions