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

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.

Answers:

Answer

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

Answer

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.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.