How can I make an element not visible after refresh

Question

Basically I put a lightbox with a video in my website which shows at the beginning, you can skip it using a button or pressing "Esc" key, but what i want is it only shows once, I mean if I do a refresh on the site, or if I go back the the Home page, I want the div of the video no longer displays.

Here's what i tried to do

 <article id="video_holder">
    <iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>
</article>

 <script>
 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         // Here I tried to remove the window forever
         $(this).remove();
     });          
 });
 </script>

Anyone knows how can I achieve it?

You would need to store a flag that states the user has already visited the site somewhere. I would suggest using a cookie. — Rory McCrossan, May 21 '15 at 18:44
How about [cookies](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)? — Dendromaniac, May 21 '15 at 18:45
@RoryMcCrossan, Yes both functions suggestions from below helped a lot and they use cookies. — Ion Torres, May 21 '15 at 21:05

score 1 · Accepted Answer · edited May 22 '15 at 20:26

As other have suggested, the correct way to do this is with a cookie. Use the following functions to set and read the cookie:

function read_video_cookie(){
        var name = "skip_video=";
        var all_cookies = document.cookie.split(';');

        for(var i = 0; i < all_cookies.length; i++){
            var c = all_cookies[i];
            while(c.charAt(0) == ' ')
                c = c.substring(1);
            if (c.indexOf(name) == 0)
                return JSON.parse(c.substring(name.length, c.length));
        }

        return false;
    }

    function set_video_cookie(){
        $skip_video = true;
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000)); // Cookie expires in 1 year
        var expires = "expires=" + d.toUTCString();
        document.cookie = "skip_video=" + "true" + "; " + expires + ";";
        $('.close_video').click(function(){
            $("#video_holder").fadeOut(500, function() {
                $(this).remove();
            });          
        });
    }

Then, in your document ready function, check the value of the cookie and insert the video element if needed:

var $skip_video;

        $(function(){
            $skip_video = read_video_cookie();

            if(!$skip_video){
                $("#video_holder").append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><a class="close_video"> <i class="fa fa-angle-double-right"></i> Saltar Video </a>');
            } else {

                $("#video_holder").fadeOut(500, function() {
                    $(this).remove();
                }); 

            }      
            set_video_cookie();     
        });

Updated:

This method should remove the delay you're dealing with. You should also change your markup to:

 <article id="video_holder"></article>

It works perfect, I'm just working in a little delay I notice just after the refresh. But these helped a lot. — Ion Torres, May 21 '15 at 21:10
@IonTorres I updated my answer to help with the delay. Cheers. — Vince, May 21 '15 at 21:20
It works perfect now! I just update the code adding a fading effect and closing the
appearing at refresh. — Ion Torres, May 22 '15 at 19:46

wholevinski · Answer 2 · 2015-05-22T12:23:46.313

0

Since you're using jquery already, there's a plugin which makes getting and setting cookies much easier:

https://github.com/carhartl/jquery-cookie

To set the cookie:

$.cookie('myCookie', 'value');

To then, get the cookie:

$.cookie('myCookie');

Then, on page load, you can show your video if it's set; this would require you to keep the video hidden by default. Using an inline style (if you want): style="display:none":

Then, on document ready, you should show it if the cookie's not set:

$( document ).ready(function() {
    if( !$.cookie('myCookie') ){
        $("#video_holder").show();
        $.cookie('myCookie', 'watched');
    }
}

Also, you'll probably want to set autoPlay in your vimeo URL to false. I'm not sure how it behaves if the container isn't visible.

edited May 22 '15 at 12:23

answered May 21 '15 at 18:57

wholevinski

3,658
17
23

Your if statement in the on ready function should be if(!$.cookie('myCookie')). Couldn't edit it since it's only 1 character. :) – Vince May 21 '15 at 19:04
I'm a little lost just un the part 'value' what should i put there exactly? – Ion Torres May 21 '15 at 23:20
@IonTorres, the way the library works is with key value pairs. You can put whatever you want (within reason and within the confines of what cookie values allow) in the key and value parameters. It's basically a one-level deep map/lookup-table/etc. – wholevinski May 22 '15 at 12:23
@dubhov works pretty good it's another way to solve my problem, only works inversely at the example above, the use of the cookie library was very helpful – Ion Torres May 25 '15 at 14:58
@IonTorres Yeah...@Vcode found a bug. I was missing a ! when checking if the cookie exists, so it would play the video every time if you _had_ watched it once... Fixed that. Glad I/we could help! – wholevinski May 25 '15 at 15:27

score 0 · Answer 3 · edited May 23 '17 at 11:43

I'd suggest sessionStorage which acts like a document store on the user's browser. So you'd do:

 $('.close_video').click(function(){
     $("#video_holder").fadeOut(500, function() {
         sessionStorage.setItem('viewed_my_video', true);
         $(this).remove();
     });          
 });

I would also encourage you to use javascript to render the video in as oppose to removing it from the dom. which will allow you to do something like:

if(!sessionStorage.getItem('viewed_my_video')) {
  $('#video-holder').append('<iframe src="https://player.vimeo.com/video/123859666?autoplay=1&color=3551a4&title=0&byline=0&portrait=0&controls=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}

There are betters ways of rendering html via javascript but figure that is outside the scope of this question. ( But if you're curious checkout underscore / lodash / handlebars ).

As others suggested cookies are another way to go about this. I favor sessionStorage over cookies because it's easier to use vs parsing out a long string. Here's a great StackOverflow answer on the differences: What is the difference between localStorage, sessionStorage, session and cookies?

How can I make an element not visible after refresh

3 Answers3

Updated: