Jquery cookie display only on specific page

Question

I'm using jQuery Cookie and Fancybox to display some teaser video.

I've set a custom link on the bottom of the pages and it looks like this:

<a class="fancybox-cookie" href="http://www.youtube.com/embed/the_video_link?autoplay=1&rel=0"></a>

and in my jQuery I'm displaying the video like this:

    (function($){
    $(document).ready(function() {

        //Cookie
                $.cookie('video', 'some_value', { path: '/events' });

                $('.fancybox-cookie').fancybox({
                openEffect      : 'elastic',
                closeEffect     : 'elastic',
                padding         : 20,
                maxWidth        : 800,
                maxHeight       : 600,
                fitToView       : false,
                width           : '70%',
                height          : '70%',
                autoSize        : false,
                type            : 'iframe',         
                }).trigger('click');
        //$.removeCookie('video');   
    });
})(jQuery);

As you can see from the code, I'm trying to call the video with cookie but only on specific page, in this case /events page. Even I do this the video is displaying on every single page.

The whole my idea is every time when a user enters the website and visit the "events" page, the Fancybox will display the video, but if the visitor checks some other page, the video shouldn't be displayed.

Where do I get wrong here?

This is another approach that I've tried, its displaying only once and I've set expires for 2400 minutes, before that I've set with one minute and it's ok, but its still displays on every page.

(function($){
$(document).ready(function() {
    if ($(window).width() > 768) {

    //Cookie
    var check_cookie = $.cookie('video');
    var date = new Date();
    var minutes = 2400;
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    if(check_cookie == null) {
        $.cookie('video', 'some_value', { expires: date, path: '/events' });

        $('.fancybox-cookie').fancybox({
        'openEffect':    'elastic',
        'closeEffect':   'elastic',
        'padding'           : 20,
        'autoScale'         : false,
        'width'             : 800,
        'height'            : 705,
        'type'              : 'iframe', 
        'scrolling'         : 'no'      
        }).trigger('click');            
     }
     else {
        return false;   
    } 

    //$.removeCookie('video'); 
    }
});

})(jQuery);

EDIT: I've realized later, on my first example my mistake is with .trigger() I'm calling on every page, so it has to have some logic, like with if statement on my second example, but why the video is firing on every page?

score 2 · Accepted Answer · edited May 23 '17 at 10:33

As per Rob M's answer in this thread, and what I recall of my previous uses of the jQuery Cookie plugin, the path parameter defines what URL the cookie is available and accessible from.

Also, as per the jQuery Cookie documentation on gitHub:

When you remove a cookie, you need to do it with the settings that you had passed to create it in the first place;
When you test if a cookie is set, you need to check if it's undefined, not null, like so:

var isCookieSet = typeof $.cookie('video') === 'undefined';

That being said, I don't get why you would need to even resort to jQuery Cookie, since you could only display the link (and trigger it) in the Events page, like this:

jQuery(function($) {
    $(document).ready(function() {
        if( window.location.href.search(/\/events/) > -1 ) $(".fancybox-cookie").trigger("click");
    });
});

If the reason why you are resorting to jQuery Cookie is because you would only like to fire the video once and be able to detect if it has already been fired, in that case it would make sense, and you could do:

jQuery(function($) {
    $(document).ready(function() {
        if( window.location.href.search(/\/events/) > -1 ) {
            if( typeof $.cookie('video') === 'undefined' ) {
                var date = new Date();
                var minutes = 2400;
                date.setTime(date.getTime() + (minutes * 60 * 1000));
                $.cookie('video', 'some_value', { expires: date });
                $(".fancybox-cookie").trigger("click");
            }
        }
    });
});

There's no need to set the path variable, since, as per the Docs again, the default path value is the url the cookie is created at.

Jquery cookie display only on specific page

1 Answers1