Geek asks and answers

JQuery: how to go out to persistent website elements only once?

There are several elements on the website that I create that are the same on every page, such as logo, menu, copyright notice, etc.

I want to fade them out as soon as the visitor loads any page of the website and never reproduces the effect of gradual change for any other pages that the visitor may come to.

I know that creating an AJAXy site will be one of the solutions, but for a certain number of reasons having separate pages, it would be preferable in this particular case.

Maybe there is a way to check the opacity of the element (from the previous page?) And if it is 100% keep it as it is, otherwise it will disappear into the element, but I'm not sure how to do it. Or, perhaps, if there is a way to check if a visitor arrives on a page with the same main domain name, in this case, the opacity of all the elements should be 100%, otherwise they should disappear?

I would be grateful for a practical solution!

Someone at StackOverflow wrote “just use cookies” in such a case, and the decision was made, but the actual cookie example was not provided, and it would be very useful if someone could do this.

+3
4

cookie , , .

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();
}
+1

( JavaScript) - , , , .

- ... (untested)

if (document.referrer.indexOf('www.mydomain.com' === -1) {
  // show animation
}

, - cookie, cookie, .

, case-inesnsitive regex, , indexOf , - URL

+1

you can "just use cookies" to indicate that the animation has been played. Haha just saw the last part of your post. I am a fan of this jQuery Cookie library . In addition, I wrapped it in a data provider JS class, for example:

mycompany.data.cache = {
    grab: function(key){
        return $.evalJSON($.cookie(key));
    },
    push: function(key, value){
        $.cookie(key, $.toJSON(value), {path: '/', expires: 7});
    },
    remove: function(key){
        $.cookie(key, null);
    }
};

So you can write

$(document).ready(function(){
    bool animationPlayed = mycompany.data.cache.grab('animationPlayed');

    if(!animationPlayed)
        //play animation...
    else
        //do something else...
});
0
source

Not sure what the underlying infrastructure is, but in ASP.NET you can check Session.IsNewSessionand add a class to these elements (i.e. firstTimeFadeIn) if that's true ... jQuery code to trigger the fade out all the elements of this class will be light enough.

0
source

More articles:


All Articles