Can I change what background colour should be depending upon the time?

Question

I created a good looking website using html5, CSS, bootstrap. I wanted to know if I can change the background colour and nav bar selection colour automatically in code during day (blue) and during night (dull red). Is there anything I can do to change the colour of nav bar and background based on user's time? Here's my code:

<body>
    <nav>
        <h1 style="font-family:Helvetica;">
            <ul class="nav">
                <li><a href="#">Menu 1</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><a class="dropdown" href="#">Menu 2</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><font size="+4", color="white">IBAE</font> <br></li>
                <li><a href="#">Menu 3</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </h1>
    </nav>
    <br>
    <br>
    <br>
    <br>
    <br>

   <div class="container-fluid"> <!-- Cards-->
        <div class="row">
                <!--row one column two-->
                <div class="col-sm-3"><div class="cardpop">
                        <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
                            <div class="card-img-overlay">
                                <font color="white">
                                    <h4 class="card-title">John Doe</h4>
                                    <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
                                    <a href="#" class="btn btn-primary">See Profile</a>
                                </font>
                            </div>
                        </div></div>
                </div>



    <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>

Here's CSS

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;

    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}

.card-img-wrap img {
  transition: transform .25s;
  width: 100%;
}
.card-img-wrap:hover img {
  transform: scale(1.2);
}
.card-img-wrap:hover:after {
  opacity: 1;
}

This is my entire code. There's no custom java script. Please help me with code or study material or links for study material I could use to implement the logic. Also can I achieve what I am looking for using only CSS? If it is not possible how do I program using java script? I really appreciate the help in advance. Thank you very much.

Do you serve static HTML, or is it generated at request time? — crenshaw-dev, May 12 '18 at 14:08
I am a total newbie. I really apologise, I don't know what static html is. My code has nabber and bootstrap cards, a little animated. That is all. — Jeeva Bharathi, May 12 '18 at 14:10
It sounds like you have a static page then. You could add a script tag at the end, get the time, and change the DOM at that point. — Maximilian Burszley, May 12 '18 at 14:12
I added the code but not fully because the edit won't let me. How do I proceed from here. — Jeeva Bharathi, May 12 '18 at 14:24

kshetline · Accepted Answer · 2018-05-12T14:47:25.743

5

Just use setInterval to periodically (once per minute should be more than enough) call a function that uses the JavaScript Date object to check the time of day, then set the background colors as needed.

Call that same function when the page loads to start up with the right colors.

Update: Here's some sample code.

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (hours < 6 || hours >= 18)
      body.style['background-color'] = '#900';
    else
      body.style['background-color'] = '#46F';
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

Plunker here: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview

edited May 12 '18 at 14:47

answered May 12 '18 at 14:13

kshetline

12,547
4
37
73

I am not familiar with javascript. Can you please help me with the study material for which you are referring to? – Jeeva Bharathi May 12 '18 at 14:25
I understood what set interval does now from w3 school. How do I get the time from the user and change the color? – Jeeva Bharathi May 12 '18 at 14:30
`const hours = new Date().getHours();` This is 24-hour time that goes from 0-23. – kshetline May 12 '18 at 14:32
setInterval(function(){ alert("Hello"); }, 1000); – Jeeva Bharathi May 12 '18 at 14:36
how do I change the alert to color? should I call the class – Jeeva Bharathi May 12 '18 at 14:37
The time for `setInterval` is in milliseconds, so your alert will annoy the hell out of you by popping up once per second. :) For changing your background color, 60000 would be a good interval (one minute). – kshetline May 12 '18 at 14:38
I addedd a Plunker here that shows one way to do this: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview – kshetline May 12 '18 at 14:44
Oh! lol!. Should I call the class or tag for changing the colour? – Jeeva Bharathi May 12 '18 at 14:45
I used changing style as an easy way out, but yes, you can programmatically change the class of your element too. Here's an another Stack Overflow answer about how to do that: https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript – kshetline May 12 '18 at 14:51
In theory, the code is perfect and simple. LOL. I'll use it in my code with linear gradient and screen record for an entire and be right back to inform the result :D – Jeeva Bharathi May 12 '18 at 14:51
I tried with the JS, it does not work for me. I tried to change the back ground with linear-gradient color – Jeeva Bharathi May 12 '18 at 16:14
I couldn't figure out how to fix the fact that your fiddle wasn't seeing any of your JavaScript, but there were a couple of problems I saw. First of all, a gradient must be assigned to the `background` property of an element, not to `background-color`. Second, the `body` element has an `onload` method, as do `img` and a few other, but the `onload`s you added to your `ul` tags don't do anything -- `ul` does not support `onload`. – kshetline May 12 '18 at 17:18
So instead of unload how about an ID for ul? – Jeeva Bharathi May 12 '18 at 17:26
Using an `id` is the best way to get to your `ul`s. I simply used `onload` as a convenient way to bootstrap my script when the document was finished loading, it didn't tie the script to the `body` element in any other way. Oh, and I updated my Plunker to do gradients instead of simple colors. – kshetline May 12 '18 at 17:32
When I added that to my code even body background does not change. – Jeeva Bharathi May 12 '18 at 17:39
Start your fiddle from scratch and work up to what you're trying to do a step at a time. Don't paste in the whole page of what you're trying to do. That existing fiddle is broken and isn't even running any of the JavaScript. – kshetline May 12 '18 at 17:40
Mate, body colour works now! :DDD ul with id does not work. – Jeeva Bharathi May 12 '18 at 18:03

crenshaw-dev · Answer 2 · 2018-05-12T14:22:03.023

1

The question boils down to whether it's possible to change a CSS Style based on the time of day.

There are a few ways to go about it, but for the best user experience you probably want to set the style at HTML generation time. That would mean something like server-side setting a class on the body element to indicate that you want to use the Night Time theme. Or you can simply write the style in line, but it's probably better to keep styles external when possible.

The other option is to do the same thing in the user's browser using JavaScript. Just set a class or set the style in-line. JavaScript has the advantage that it will respect the user's local time, but if their system clock is incorrect, they'll get an incorrect theme. It also means you don't have to worry about detecting the user's time zone server-side, if you're concerned about users from different parts of the country / world.

edited May 12 '18 at 14:22

answered May 12 '18 at 14:13

crenshaw-dev

7,504
3
45
81

I wanted to change the colours of navigation bar and background colour depending upon user's time zone. How should I proceed from here? Can you please help me with any study material or link for code, I could refer to? – Jeeva Bharathi May 12 '18 at 14:16
I'm away from my laptop right now, but I'll add some links when I'm back. – crenshaw-dev May 12 '18 at 14:17
Thanks! Really appreciate the help, mate. :D – Jeeva Bharathi May 12 '18 at 14:26

Achu · Answer 3 · 2018-05-12T14:49:01.050

0

Some thing like this would work, 1000 means 1 sec, you will have to tweak it further to make it less frequent setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000)

But to best way to make changes to your navbar follow this stack overflow link: Change navbar color in Twitter Bootstrap

edited May 12 '18 at 14:49

answered May 12 '18 at 14:43

Achu

272
2
10

Can I change what background colour should be depending upon the time?

3 Answers3

Linked

Related