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

The only way I can see of telling if this is a user's first access is the presence of a cookie set from your site.

This is obviously not reliable, as the user may have cookies turned off, or have deleted them.

Your cookie would be retrieved in the server side code, and then written out to (e.g.) an HTML hidden variable, accessible from JavaScript/JQuery.

The specifics of the server code depends on your server language.

Answer 2

You could use cookies. See: http://plugins.jquery.com/project/Cookie

Answer 3

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";
    }
}

Answer 4

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.