I am making a website with a splash screen that I want to make disappear after 3 seconds. I can successfully do it when I include jQuery, but this takes time to load (especially if it's not cached) and so the splash still displays for a small time.

I am also using cookies so that it will only show on the first load of the page (so it's not overly irritating).

Here's my HTML:

<div class="splash">
    splash content
</div>

Here's the working jQuery (that I want to avoid):

if(document.cookie.indexOf("visited=true") === -1) {
    $(".splash").delay(3000).queue(function(){
        $(this).addClass("hidden").dequeue();
    });
} else {
    $(".splash").addClass("hidden");
}

Here's what I have e up with regarding javascript, but it doesn't work:

document.getElementsByClassName("splash").addEventListener("load",
function() {
    if(document.cookie.indexOf("visited=true") === -1) {
        setTimeout(function(){
            this.classList.add("hidden");
        }, 3000);
    } else {
        this.classList.add("hidden");
    }
});

I am making a website with a splash screen that I want to make disappear after 3 seconds. I can successfully do it when I include jQuery, but this takes time to load (especially if it's not cached) and so the splash still displays for a small time.

I am also using cookies so that it will only show on the first load of the page (so it's not overly irritating).

Here's my HTML:

<div class="splash">
    splash content
</div>

Here's the working jQuery (that I want to avoid):

if(document.cookie.indexOf("visited=true") === -1) {
    $(".splash").delay(3000).queue(function(){
        $(this).addClass("hidden").dequeue();
    });
} else {
    $(".splash").addClass("hidden");
}

Here's what I have e up with regarding javascript, but it doesn't work:

document.getElementsByClassName("splash").addEventListener("load",
function() {
    if(document.cookie.indexOf("visited=true") === -1) {
        setTimeout(function(){
            this.classList.add("hidden");
        }, 3000);
    } else {
        this.classList.add("hidden");
    }
});

• javascript
• jquery
• html

• Are you sure this works? I don't think if(document.cookie.indexOf === -1) works as indexOf is a function, and you also haven't specified what you are looking for. In terms of your second piece of code, I think this isn't your element, but rather window. – putvande Commented Feb 4, 2017 at 17:54
• @putvande The second code snippet (which the OP says he's using, does use indexOf correctly. – Scott Marcus Commented Feb 4, 2017 at 17:58
• yeah, i changed it.. thanks @putvande! – marcellothearcane Commented Feb 4, 2017 at 18:10

3 Answers 3

I don't think you want to add the function as the load event listener of the splash. You should add it to the load event of the page.

See ments inline for more details on reorganizing the code. Unfortunately, it won't work with cookies here in the Stack Overflow snippet environment.

Note that the splash is set to be hidden (via CSS) by default. This is a better practice than showing it by default and then hiding it. If, after reading the cookie, it is determined that the splash should not be shown, some users may wind up seeing the splash momentarily on their screens due to processing limitations, or worse if there is any kind of error in your code, the splash may wind up being shown and never taken away because the JS stops executing at the error.

// Get a reference to the splash dialog
var splash = document.querySelector(".splash");

// When the window is loaded....
window.addEventListener("load", function() {
  
  // Check to see if the cookie indicates a first-time visit
  if(document.cookie.indexOf("visited=true") === -1) {

    // Reveal the splash (remember: splash is hidden by default by CSS)
    splash.classList.remove("hidden");
    
    // .5 seconds later, hide the splash
    setTimeout(function(){
      splash.classList.add("hidden");
      
      // >> Set cookie to visited here <<
    }, 500);
  } 
});

.splash {
  height:200px;
  width:200px;
  background:yellow;
}

.hidden {
  display:none;
}

<div class="splash hidden">S P L A S H !</div>

document.getElementsByClassName("splash").addEventListener("load", //not possible as ByClassName returns a collection not an element
function() {
if(document.cookie.indexOf("visited=true") === -1) {//why not simply !...
    setTimeout(function(){
        this.classList.add("hidden");//this is window as setTimeout is a window function...
    }, 3000);
} else {
    this.classList.add("hidden");//the only that work
}
});

The right way:

document.getElementsByClassName("splash").forEach(el=>{el.addEventListener("load",function() {
if(!document.cookie.indexOf("visited=true")) {
    setTimeout(function(){
        this.classList.add("hidden");
    }.bind(this), 3000);//fix of context
} else {
    this.classList.add("hidden");
}
})});

You can include this IIFE at the bottom of your page so that it will be executed when the splash DOM element is ready. This way you can avoid the event listener.

I also converted your splash to use the ID splash rather than a class. If you prefer the class, when you use document.getElementsByClassName("splash") it returns an array of elements. In that case you'll have to specify which elements of the returned array you want to use (i.e. document.getElementsByClassName("splash")[0] or iterate through them).

(function() {
  var splash = document.getElementById("splash");
  if (document.cookie.indexOf("visited=true") === -1) {
    splash.classList.remove("hidden"); // Display the splash
    setTimeout(function() {
      splash.classList.add("hidden"); // Hide it after the timeout
    }, 500);
  }
})();

#splash { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ddd; }
.hidden { display: none; }

Not splashed!
<div id="splash" class="hidden">Splashed!</div>