刷新后如何使元素不可见

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?

Answer 1

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>

Answer 2

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.

Answer 3

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?