CODEWITHSUNDEEP
javascripthtmlcss
IrrationalName
IrrationalName

Reputation: 49

Changing section background based on time

The first section of my website contains a picture. I want the picture to change based on the local time. For example between 6 AM until 6 PM the "day picture" will be shown, and the rest of the time the "night picture" will be shown. I have two classes in my CSS file one called Day the other Night:

    .day {
           background-image: url("./css/images/daymode.jpg");
           background-size: cover;
}
.night {
         background-image: url("./css/images/nightmode.jpg");
         background-size: cover;
}

this is the HTML section I would like to change its the background:

    <section class="home-section section-hero overlay slanted" id="home-section">

that's my JavaScript file:

    $(document).ready(function() {
  var d = new Date();
  var n = d.getHours();
  if (n > 18 || n < 6)
    // If time is after 7PM or before 6AM, apply night theme to ‘body’
    document.body.className = "night";
  if (n > 6 && n < 18) document.body.className = "day";
});

I can't figure out how to put these day and night classes in the same class of the section element so it will recognize them and I can control it with the js file.

Any help will be appreciated! :)

Upvotes: 1

Views: 327

Answers (3)

Robert McKee
Robert McKee

Reputation: 21477

You are close, but if you want to target only changing the background on your section, then you need to change the CSS selectors slightly. While you CAN have both a 'day' and 'night' class, it is easier to just have a default, and then an overridden 'night' theme.

Since you are already using $(document).ready, I'll assume you have jQuery included, so I've modified your function to take advantage of this and preserving whatever additional classes may have already been present on the body.

$(document).ready(function() {
  $('body').toggleClass('night',IsNight());
  setInterval(function(){
    $('body').toggleClass('night',IsNight());
  },60000);
});

function IsNight()
{
  var d = new Date();
  var n = d.getHours();
  return (n >= 18 || n < 6);
}
#home-section {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
}

.night #home-section {
  background-image: url("./css/images/nightmode.jpg");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>

Here is the same thing, slightly modified so that you don't have to wait for day/night. This changes every second instead and uses color instead of background-iamge.

$(document).ready(function() {
  setInterval(function(){
    $('body').toggleClass('night');  
  },1000);
});
#home-section {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
  color: yellow;
}

.night #home-section {
  background-image: url("./css/images/nightmode.jpg");
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-section section-hero overlay slanted" id="home-section">blah</section>

Upvotes: 1

lvilasboas
lvilasboas

Reputation: 76

Since you have an ID on your section element, you can more easily do:

var section = document.getElementById('home-section');
var period;
// your logic to define whether it's day or night, and it's set to 'period'

// then, remove previous set classes
section.classList.remove('day');
section.classList.remove('night');

// finally, set the recently defined period
section.classList.add(period);

This way, since both of your day and night classes share the background-size: cover property, you can move it into your styles for the #home-section css rules.

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

You can use if{..}else{..}

for you understanding i have set the time of day you can comment it and set it to current time

var d = new Date('Thu Feb 20 2020 07:35:09 GMT+0530 ');

//var d = new Date();

var n = d.getHours();

if (n > 18 || n < 6) {
  // If time is after 7PM or before 6AM, apply night theme to ‘body’
  document.body.className = "night";
} else {
  document.body.className = "day";
}
.day {
  background-image: url("./css/images/daymode.jpg");
  background-size: cover;
  background-color: orange;
}

.night {
  background-image: url("./css/images/nightmode.jpg");
  background-size: cover;
  background-color: black;
}

Upvotes: 1

Related Questions