Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective.

<div class="loader"><h1><?php bloginfo('name'); ?> <?php wp_title(); ?></h1></div>

$(window).load(function() {
    $('.loader').delay(2000).fadeOut();
});

I'm trying to figure out how to make sure this div and jQuery only show or run if the user is visiting the site for the first time or has cleared their cache/cookies. Any suggestions? I was thinking about using cookies.js but it seems to be still in development.

Cheers, R

jquerycsscookies

Answer №1

    <?php if(!isset($_COOKIE['visited'])) { ?>

      <div class="loader"><h1><?php bloginfo('name'); ?> <?php wp_title(); ?></h1></div>

      <script type="text/javascript">
        $(window).load(function() {
        $('.loader').delay(2000).fadeOut();
        });
      </script>

    <?php 
     setcookie ("visited", "", time() + 31536000,"/");
} ?>

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

TinyMCE - Utilizing selection.setContent along with getContent for the Warp Button

I am looking to implement a button that will wrap content with all tags. Snippet of Code: editor.addButton('MobileToggleArea', { text: '<M>', icon: false, onclick: function (){ editor.selection. ...

javascriptjqueryhtmltinymcetinymce-4

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

Tips for utilizing the @run-at document-start meta-rule

Currently, I am utilizing the following code snippet: Jquery(window).load(function(){ // here is my code for making an AJAX request to retrieve data from the database }); Unfortunately, I have encountered an issue specifically with its function ...

javascriptjqueryajaxliferayliferay-aui

Round corners, images in the background, gradients in the background, and compatibility with Internet Explorer versions 8 and

I've encountered an issue where my div with border radius, background gradient, and background image are working fine in FireFox but not displaying correctly in IE8 or IE10. In IE8, the gradient and background image work properly, but as soon as I app ...

cssbackground-imagecss3pie

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

Is Ajax capable of processing and returning JSON data effectively?

I am in the process of making modifications to my codeigniter application. One of the changes I am implementing is allowing admin users to place orders through the admin panel, specifically for received orders via magazines, exhibitions, etc. To achieve ...

phpjavascriptjsonjquery

Is it possible for the server to initiate communication with the client

Every time I try to find a solution, Comet always comes up. But it seems like overkill for what I need - just around 100 users at most, with maybe 10 online simultaneously. Is there a simpler and more suitable option for my needs, such as pushing data to ...

php.netjavascriptjqueryajax

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php

I am attempting to preserve form values even after submitting the form. document.getElementById('start_date').value = "<?php echo $_POST['start_date'];?>"; document.getElementById('end_date').value = "<?php echo $_P ...

javascriptphpjqueryhtml

The window.beforeunload prompt doesn't conceal the ongoing ajax update progress

Utilizing the following code: $(window).on('beforeunload unload', function (element) { return 'Are you sure you want to leave?'; }); On the same page, there is an update panel and an update progress. When a user navigates to anoth ...

jqueryajaxupdatepanelupdateprogress

Displaying a Google map within a jquery modal window upon hovering over a designated location

I'm looking for a way to display a Google map in a jQuery modal window when I hover or click on a cell in a table that contains a location. I'm new to JavaScript and the Google Maps API, so any assistance would be greatly appreciated. Thanks! ...

jqueryhovermapsmodal-dialog

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

cssrubysinatrahaml

Is there a way for me to replicate the add to cart button on the individual product page while directing it to a different page?

We are in the process of developing a customized webshop integrated with WooCommerce. Our single product page features an add-to-cart button that automatically directs users to the cart page. Beneath the add-to-cart button, we have included a button for a ...

phpjquerywordpresswoocommerceproduct

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

I'm encountering an issue where my JS stops working every time I switch displays within a single HTML file. I've attempted to replace the HTML onclick call with a JavaScript function, but the problem persists. Update: Apologies for the unclear e ...

javascripthtmlcss

Is it possible to have images automatically resize to fit the content div without becoming distorted?

I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...

jqueryhtmlcss

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

javascriptcssreactjsreact-typescript

Creating custom Magento extensions with jQuery integration

I am in the process of developing my very first extension that I plan to market on magento connect. One of the requirements for my module is jquery. The dilemma I face is if I include jquery in my module, it could potentially overwrite a version that the ...

jquerymagento

Issue with scroll being caused by the formatting of the jQuery Knob plugin

I am currently utilizing the jQuery Knob plugin and I am looking to have the displayed value shown in pound sterling format. My goal is for it to appear as £123456. However, when I attempt to add the £ sign using the 'format' hook, it causes is ...

javascriptjqueryjquery-knob

Switch the view to a grid layout upon clicking

Using bootstrap 5, I've successfully created a list view: <div class="col"> Click to switch to grid/list </div> Below is the content list: <div class="row mt-3 list"> list view ... ..... ....... </div ...

javascripthtmlcssbootstrap-5

css the vertical column is unable to reach 100% vertical

Check out my website at I need help getting the black column with my thumbnails to extend all the way down on the site. Here is the CSS code for the thumbnails: #thumbnails { position:absolute; top: 110px; width: 190px; height: 100%; ...

css