Unveiling the Homepage: Troubleshooting the jQuery Hide Splash Video with Index Display

I have a requirement for a splash page, but I do not want it to be my main index. To address this issue, I am implementing the following solution.

The technique I am using can be found at: http://jsfiddle.net/JjvzT/

You can view it in action on this page:

However, I am facing challenges with getting the "Enter" button to reveal the index page below. It seems to just flicker and jump back to the Video Splash Page. Any suggestions on how to resolve this?

Additionally, I would like to know what JavaScript cookie code is needed to ensure that the splash page only appears once per day. Your assistance is greatly appreciated.

Furthermore, I kindly request that any debates regarding the necessity of having an anti-splash page be saved for another discussion. The client insists on having this splash page, despite not being my original idea.

javascriptjquerycsshtml

Answer №1

Make sure to update the href attribute in your "Enter" anchor tag to "#". Currently, redirecting users to the same page after hiding the splash screen will cause the page to reload in its original state.

EDIT: Regarding the cookie handling,

jQuery(function(){
    if(document.cookie.indexOf("firstvisit") != -1){
        $("#splash").hide();
        $("#container-index").show();
    }
    else{
        $("#splash span").click(function() {
            $("#splash").hide();
            $("#container-index").show();

            var expireDate = new Date();
            /* sets expire date to current date + 1 day */
            expireDate.setDate(expireDate.getDate() + 1);
            var newCookie = "firstvisit=0;expires=" + expireDate.toUTCString();
            document.cookie = newCookie;
        });
    }
});

Please note: This code has not been tested. For more information on working with JavaScript and cookies, refer to this resource: http://www.w3schools.com/JS/js_cookies.asp

Answer №2

I implemented ZDYN's suggestion and developed a script called splash.js that can be easily integrated into your splash page (not as a hidden div) and on the specific page you want to redirect from, such as index.html.

Here is the annotated code that works:

/*
1. Create a separate HTML page for the splash screen.

2. Place a reference to this script in the splash page
    -Insert below the "jquery.js" script reference
    <script type="text/javascript" src="Scripts/splash.js"></script>

3. Insert a reference to this script on every page where you want the splash screen to appear
    -Insert below the "jquery.js" script reference
    <script type="text/javascript" src="Scripts/splash.js"></script>

4. Set the "splashPageName" variable to the file name of the splash page

5. Specify the date variables below
*/


var splashPageName = "splash.html";  
var endSplashDate = new Date("12/7/2011");
var expireCookieDate = new Date();


(function() {
    var url = window.location.toString();   


if (url.toLowerCase().indexOf(splashPageName) >= 0) {
    /* sets expiration date to current date + 1 day */
    expireCookieDate.setDate(expireCookieDate.getDate() + 1);
    var newCookie = splashPageName + "=0;expires=" + expireCookieDate.toUTCString();
    document.cookie = newCookie;
}
else {

    if (document.cookie.indexOf(splashPageName) != -1) {
        // User has already seen the splash page
    }
    else {
        var today = new Date();
        if (endSplashDate > today) {
            window.location = splashPageName;
        }
    }
}
} ());

Answer №3

Give this a shot

$(document).ready(function(){
  $("#splash").click(function() {
    $(this).hide();
    $("#container-index").show();
  });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring the query is executed prior to rendering in Node JS

At times, the result may only include type data instead of product data due to a possible async problem. However, there are also instances where both types of data are present. My current setup includes Node JS, Express, and Mongoose. router.get('/& ...

javascriptnode.jsexpressasynchronousmongoose

I am looking for a specific task to be carried out, without any need for returning a value or any additional items

I am trying to remove an element from the canvas using Selenium. The command I am currently using is "window.app.design.internalLayer().find('.deletebutton').fire('click')". Despite my efforts, this command does not seem to be working a ...

javajavascriptseleniumselenium-webdriver

Create a stylish frame for a uniquely shaped picture

   Currently working on a team page for a company, looking to incorporate an irregular-shaped png image with a red border. The desired outcome should resemble the following:             https://i.sstatic.net/ba7ek.png The image provided fo ...

htmlcssimage

The class of each page on the website keeps changing, making it a challenge for me to scrape the page descriptions

import requests from bs4 import BeautifulSoup import numpy as np import re import json title = [] pages = np.arange(1,13) for page in pages: url = 'https://www.jobs.ch/en/vacancies/?page='+str(page)+'&term=python%20web' p ...

pythonhtmlclassweb-scrapingbeautifulsoup

Ways to enhance the Response in Opine (Deno framework)

Here is my question: Is there a way to extend the response in Opine (Deno framework) in order to create custom responses? For instance, I would like to have the ability to use: res.success(message) Instead of having to set HTTP codes manually each time ...

javascripttypescriptdenoopine

TypeScript Redux actions not returning expected type

Basically, I am attempting to assign types to a group of functions and then match them in my Redux reducer. Here are the functions I have defined in actions.ts: export const SET_CART_ITEMS = "SET_CART_ITEMS"; export const SET_CART_TOTALS = "SET_CART_TOTA ...

javascriptreactjstypescriptredux

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

Tips for transforming a navigation link pill into a hyperlink:

I am using a Bootstrap Nav-pills with 2 tabs: <ul class="nav nav-pills nav-fill kt-portlet__space-x" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#menu11"><span> TAB1</span> ...

cssbootstrap-4nav-pills

Searching with beautifulSoup's find_all() method across a sequence of HTML tags

I need to find specific tags within tags using BeautifulSoup's find_all() method on a website. For instance, I want to search for data within: <li class='x'> <small class='y'> The issue is that my current code is r ...

pythonhtmlbeautifulsoup

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Working with the WebCalendar app found at to make some personalized adjustments to how extra fields function. I've set up two additional fields: one is a dropdown list of counties, and the other is a text field. Within the dropdown list, there is an ...

phpjavascriptjqueryhtmlcss

Is there a way to access jQuery pages from a user script?

I am interested in creating a brief userscript for a webpage that already has jQuery. I have no trouble accessing the $ object from the Chrome developer console, but when trying to access it from the user script, I receive an error message stating that jQu ...

javascriptjquerygoogle-chromeuserscripts

Transferring data from AJAX to PHP

I am currently developing a project in PHP. I have created an associative array that functions as a dictionary. Additionally, I have a string containing text with placeholders for keys from the array. My goal is to generate a new String where these key wor ...

javascriptphpajax

Toggle the visibility of table rows based on a specific class using a checkbox

I am currently working on a code that displays the results of a query in a table format. I would like to have the ability to click on certain elements to show or hide them. I know this can be achieved using toggle and CSS, but I keep encountering obstacles ...

javascriptjqueryhtmlcss

I am facing issues with the functionality of the "facebook.php" file

As a newcomer to the realm of PHP and Facebook integration, I am faced with a challenge. I am attempting to link my website to my Facebook page in order to access the content, but unfortunately, a basic program I created does not seem to be functioning pro ...

phpfacebookhtmlfacebook-php-sdk

When attempting to import a store in the routes.js file while running Jest tests in Vue.js, an error

My current setup involves using vue-test-utils along with jest for Test-Driven Development (TDD). In the route file (routes.js) of my Vue.js application, I have imported the $store object and utilized it for various functionalities. While writing a basic u ...

javascriptvue.jsjestjsvue-test-utils

Automatically submitting a Google Form using the Google Forms API in conjunction with Google Apps Scripts

Is it possible to integrate a third-party app with Google Forms API and Google Apps Script in order to create timed quizzes that automatically submit once the time limit has been reached? ...

javascriptdjangogoogle-apps-scriptgoogle-forms

Tips for managing submitted data to a server in express?

In the process of sending a post request from my index.js to app.js upon a click event, I have the following code snippet: var data = { name: "Sarah", age: "21" }; var xhr = new XMLHttpRequest(); xhr.open("POST", "/", true); xhr.setRequestHe ...

javascriptnode.jsexpresspostxmlhttprequest

What is the best way to begin at a specific index in an array without skipping any elements?

As I continue my journey of learning JS, I have encountered a task that has left me quite perplexed. The objective is to provide an index to start from and also include the items missing in the array while displaying them in an angular format. Here is what ...

javascriptarraysangular

Using django-autocomplete-light to retrieve data

Hi everyone, I need some help with autocomplete-light. I am trying to display the 'add' button if the autocomplete returns nothing (Object does not exist yet). Where can I find the information about what autocomplete fetches from the back-end? H ...

jquerydjangodjango-autocomplete-light

The response from an AJAX request is consistently negative

Currently, I am working on a basic PHP form that involves some AJAX functionality. Despite my efforts to troubleshoot the issue on my own, I have been unable to identify the missing component. The problem persists as all results return false, and no recor ...

phpjqueryajax