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

Unable to retrieve input using jquery selector

Using ASP .NET controls in conjunction with Bootstrap

What prevents me from extending an Express Request Type?

How can I programmatically close the Date/Time Picker in Material UI Library?

Issue with Vue-Validator form validation not functioning properly on JS Fiddle

Creating redux reducers that rely on the state of other reducers

`I'm experiencing difficulty sending JSON data to Typeahead using PHP`

Guide on setting the href value within a $.each loop in AJAX requests

I am encountering an issue where my like button is returning a Json object { liked: true } but it is not functioning correctly with my ajax call in my Django application whenever a user tries to click the

Using Ajax and jQuery to dynamically insert an option into a datalist

Combine theme configuration options within Material-UI

Using backslashes to escape JSON values within a value in Angular

jquery module for retrieving and updating messages

Unable to choose a child div using jQuery

What steps do I need to follow in order to incorporate and utilize an npm package within my Astro component

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Disconnect occurred during execution of Node.js "hello world" on a Windows 7 operating system

Styling Text with Shadow Effects in Mobile Web Browsers

Using CSS3 to Enhance the Look of Multiple Background Images

Swap out the image backdrop by utilizing the forward and backward buttons