How to trigger event upon first visit of website only using jQuery?

Question

Hi I would like the navigation on my website to fade in when visiting my website and remain present (ie. not fade in again) when visiting other pages of the site.

Would the best way to achieve this be to tell jQuery to ignore the fade in effect if visiting from the same domain? If so can someone tell me how I would write this?

Many thanks, Gavin

Answer 1

A simple way to do this without cookies is using the document.referrer property.

if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
// Your code here
}

Essentially we're just checking to see wether the page the user was on before was nothing (they've opened a new browser window) or was not on the same domain as the current page.

Answer 2

You can't guarantee a user will have cookies turned on for this solution to work. You will have to first add a check to see if cookies are turned on before implementing. You can check if cookies are turned on using a method like this.

var cookieName = 'yourcookiename';
$(function() {
    checkCookie();
});

function checkCookie() {
    if (document.cookie.length > 0 && document.cookie.indexOf(cookieName + '=') != -1) {
            // do nothing, cookie already sent
    } else {
            // handle jQuery animation

            // set the cookie to show user has already visited
            document.cookie = cookieName + "=1";
    }
}