Question

The website I’m building has a few elements that are the same on every page, such as a logo, a menu, a copyright notice, and so on.

I want to fade them in once the visitor loads any of the website’s pages, and never replay the fade-in effect for any other pages the visitor may arrive to.

I know making the site AJAXy would be one of the solutions, but for certain number of reasons having separate pages would be preferable in this particular case.

Maybe there’s a way to check the opacity of an element (from a previous page?) and if it’s 100% to keep it as is, otherwise fade in the element – but I’m not sure how it can be done. Or – perhaps, if there’s a way to check if the visitor arrived to a page from the same main domain name, in which case the opacity of all the elements should be equal 100%, otherwise they should be fade in?

I would appreciate a practical solution!

Someone else on StackOverflow wrote “just use a cookie” in a similar case, and a solution was accepted, but no actual example of a cookie was provided, and that would be most helpful if someone could do it.

Answer 1

You could set a uniquie cookie value for each element that loads and check it on every page to determine whether to fade-in or not.

http://plugins.jquery.com/files/jquery.cookie.js.txt

var loaded = $.cookie('loaded');
loaded = (typeof(loaded) == 'string') ? loaded.split('|') : [];
if($.inArray('unique_key', loaded) == -1) {
  alert('first load');
  $('#element').fadeIn();
  loaded.push('unique_key');
  $.cookie('loaded', loaded.join('|'));
} else {
  alert('subsequent load');
  $('#element').show();
}