Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Question

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Currently, I am integrating the revolution slider into my WordPress website. My goal is to have the slider change according to the standard time of day. For instance, I want slider1 to display in the morning, slider2 at noon, slider3 in the evening, and slider4 at midnight.

To achieve this, I attempted to use JavaScript by assigning unique class names to each slider element. Below is an excerpt of the code:

<script>
var time = new Date().getHours(); 
if (time >= 8) {
document.getElementsByClassName('morningslide').style.visibility='visible';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 12) {
document.getElementsByClassName('appBanner').style.visibility = 'hidden';
document.getElementsByClassName('noonslide').style.visibility='visible';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 18) {
document.getElementsByClassName('morningslide').style.visibility='hidden';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='visible';
document.getElementsByClassName('midnightslide').style.visibility='hidden';
}


if (time >= 22) {
document.getElementsByClassName('morningslide').style.visibility='hidden';
document.getElementsByClassName('noonslide').style.visibility='hidden';
document.getElementsByClassName('eveningslide').style.visibility='hidden';
document.getElementsByClassName('midnightslide').style.visibility='visible';
}
</script>

javascript css wordpress slider

Answer 1

Answer №1

When using document.getElementsByClassName()

, it is important to note that it returns a collection of elements rather than individual elements themselves. In order to style the elements, you will need to loop through the collection and set the style of each one individually if they are not unique. Alternatively, if they are unique, you can simply select the first element from the collection using [0]. However, I would recommend giving each element a unique ID and using document.getElementById() to directly target the specific element you want to style.

Answer 2

When using document.getElementsByClassName()

, it is important to note that it returns a collection of elements rather than individual elements themselves. In order to style the elements, you will need to loop through the collection and set the style of each one individually if they are not unique. Alternatively, if they are unique, you can simply select the first element from the collection using [0]. However, I would recommend giving each element a unique ID and using document.getElementById() to directly target the specific element you want to style.

Answer 3

Answer №2

After implementing your code on a test html page, I can confirm that it is functional. The only adjustment I made was utilizing IDs instead of classes and 'display' in place of 'visibility'. Both options work effectively. Assuming you intend to place this in the footer of the webpage, here is the revised code.

<!doctype html>
<html>
<head>

</head>

<body>

<div>
    <div id="morningslide">Hello this is Morning</div>
    <div id="noonslide">Hello this is Noon</div>
    <div id="eveningslide">Hello this is Evening</div>
    <div id="midnightslide">Hello this is Midnight</div>
</div>
</body>

<script>
    var time = new Date().getHours();
    document.getElementById('morningslide').style.display='none';
    document.getElementById('noonslide').style.display='none';
    document.getElementById('eveningslide').style.display='none';
    document.getElementById('midnightslide').style.display='none';

    if (time > 8 && time < 11) {
        document.getElementById('morningslide').style.display='block';
    }
    else if (time >= 12 && time <= 18) {
        document.getElementById('noonslide').style.display='block';
    }
    else if (time > 18 && time <= 22) {
        document.getElementById('eveningslide').style.display='block';
    }
    else if (time > 22) {
        document.getElementById('midnightslide').style.display='block';
    }

</script>
</html>

Answer 4

After implementing your code on a test html page, I can confirm that it is functional. The only adjustment I made was utilizing IDs instead of classes and 'display' in place of 'visibility'. Both options work effectively. Assuming you intend to place this in the footer of the webpage, here is the revised code.

<!doctype html>
<html>
<head>

</head>

<body>

<div>
    <div id="morningslide">Hello this is Morning</div>
    <div id="noonslide">Hello this is Noon</div>
    <div id="eveningslide">Hello this is Evening</div>
    <div id="midnightslide">Hello this is Midnight</div>
</div>
</body>

<script>
    var time = new Date().getHours();
    document.getElementById('morningslide').style.display='none';
    document.getElementById('noonslide').style.display='none';
    document.getElementById('eveningslide').style.display='none';
    document.getElementById('midnightslide').style.display='none';

    if (time > 8 && time < 11) {
        document.getElementById('morningslide').style.display='block';
    }
    else if (time >= 12 && time <= 18) {
        document.getElementById('noonslide').style.display='block';
    }
    else if (time > 18 && time <= 22) {
        document.getElementById('eveningslide').style.display='block';
    }
    else if (time > 22) {
        document.getElementById('midnightslide').style.display='block';
    }

</script>
</html>

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Answer №1

Answer №2

Similar questions

Tips for deleting a CSS class from a Wicket element

Chai spy does not recognize sinon stubbed functions when verifying function calls

Concealing the pathway to a background image

``The background color will dynamically change according to the result of a function

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Encountering a fatal error in the Next.js application: "Mark-compacts near heap limit allocation failed issue is hindering the smooth

Unlocking the secrets of capturing key presses before submitting with jQuery

Prepare for a thorough cross-referencing session

Exploring the method of extracting multiple checkbox values from an HTML form

Unable to display divs in a stacked format using Bootstrap 5

The spinner persists even after the fetch api call

Summon wicket from the non-wicket-component entity

How to send out an Array and a Variable at the same time using socket.io

Mapping an object in a table only results in the final value being displayed

inactive toggle being released

Exploring Excel files using the exceljs library

Using Chrome's tabs.executeScript() method with an included script file

Creating Objects on the Fly with Mistic Query Builder

The functionality of JSON.stringify involves transforming colons located within strings into their corresponding unicode characters

Is it possible for me to choose to establish a new scope within a directive?