Changing background based on time of day (using javascript)

javascript dynamic-css
41,761

Solution 1

You don't need to use a new stylesheet for each image. You can change only the background image from javascript:

<html>
<head>
    <title></title>
</head>
<body>

</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.body) {
    if (7 <= currentTime && currentTime < 20) {
        document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
    }
    else {
        document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
    }
}
</script>
</html>

EDIT: updated to show the recommended location of the script inside the page. This has been tested and works in Firefox and Internet Explorer.

Solution 2

I'd recommend something slightly different than neo - rather than setting the image only, have two CSS classes, one for day and one for night - both can be in the same stylesheet. You can set the body's class depending on the time of day. This will allow you to do more than just the background.

document.body.className = "day";
or
document.body.className = "night";
Share:
41,761
Josh Tha CreativeOne
Author by

Josh Tha CreativeOne

Updated on September 06, 2022

Comments

  • Josh Tha CreativeOne
    Josh Tha CreativeOne almost 2 years

    Okay, I have two different background .jpgs that I want to used as the backgroud depending on what time of day it is. I want the sunny background from 7am to 8pm and the night background from 8pm to 7am.

    I'm working on a remote html file and I have the backgrounds and graphics stored on a separate server from the actual html file. Most of the css is in the html file except for the the body section that contains the background code which I separated and moved to an external style sheet. I made two separate style sheets, one w/ the day bg image & one with the night. This is the body css that's on the night css style sheet.

    @charset "UTF-8";
/* CSS Document */

         body { 
                background-image: url('http://itsnotch.com/tumblr/images/daytime_bg.jpg') !important;
                background-repeat: repeat-x !important;
                background-attachment: fixed !important;
                background-position: top center !important;
                background-color:#b68e59 !important;
                margin-top:-5px !important;
                font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
                font-size:14px !important;
         }

    I've written a javascript code that I thought would work. But it didn't. I placed it right below the and it still didn't work. Why didn't it work? I just want to be able to switch the background out... time-sensitively.

    <script type="text/JavaScript">
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (7 <= currentTime&&currentTime < 20) {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/daytime.css' type='text/css'>");
      }
      else {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/nighttime.css' type='text/css'>");
      }
      rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

<noscript><link href="http://itsnotch.com/tumblr/files/daytime.css" rel="stylesheet" type="text/css"></noscript>

    here is the entire html code so you guys can see where I placed the javascript code.(i updated the javascript code and it still doesn't work.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

        {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#d7a769"/>
        <meta name="color:Title" content="#444"/>
        <meta name="color:Description" content="#666"/>
        <meta name="color:Post Title" content="#c00"/>    
        <meta name="color:Text" content="#444"/>
        <meta name="color:Inline Link" content="#c00"/>
        <meta name="color:Quote" content="#666"/>
        <meta name="color:Quote Source" content="#444"/>
        <meta name="color:Link Post" content="#c00"/>
        <meta name="color:Conversation Background" content="#f8f8f8"/>
        <meta name="color:Conversation Border" content="#ddd"/>
        <meta name="color:Conversation Text" content="#444"/>
        <meta name="color:Conversation Label" content="#111"/>
        <meta name="color:Photo Border" content="#eee"/>
        <meta name="color:Date" content="#fff"/>
        <meta name="color:Date Background" content="#ccc"/>
        <!-- END DEFAULT COLORS -->


        <!-- DEFAULT SETTINGS -->
        <meta name="image:Background" content="http://assets.tumblr.com/images/x.gif" />
        <meta name="font:Title" content="Arial" />
        <meta name="font:Body" content="Lucida Sans" />
        <meta name="text:Disqus Shortname" content="" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        <meta name="viewport" content="width=775"/> <!-- iPhone -->








        <style type="text/css">

            #content {
                width:            850px;
                margin:           auto;
                margin-top:       -44px;
                padding:          15px;
                background-color: {color:Content Background};
                position:         relative;
            }

            a {
                color:            {color:Inline Link};
            }

            h1 {
                padding:          30px 0px 50px 0px;
                margin:           0px;
                text-align:       center;
                font:             Bold 55px {font:Title};
                letter-spacing:   -2px;
                line-height:      50px;
            }

            h1 a {
                color:            {color:Title};
                text-decoration:  none;
            }

            #description {
                position:         absolute;
        left:        -189px;
                top:             150px;
            }

            #description div {
                font:             normal 18px {font:Body};
                line-height:      20px;
                width:            150px;
                color:            {color:Description};
            }

                        #description div#search {
                                text-align: left;
                        }

            #description div a {
                color:            {color:Description};
            }

            #description #nav_container {
                font-size: 13px;
                font-weight: bold;
            }

            #description #nav_container .dim {
                filter: alpha(opacity=50); 
                -moz-opacity: 0.5; 
                opacity: 0.5;
            }

                        #searchresultcount {
                            margin: 0 0 30px;
                            text-align: center;
                        }

            .post {
                position:         relative;
                margin-bottom:    40px;
            }

            .post div.labels {
                position:         absolute;
                right:            435px;
                text-align:       right;
                width:            150px;
            }

            .post div.date {
                background-color: {color:Date Background};
                white-space:      nowrap;
                font:             Normal 20px {font:Body};
                letter-spacing:   -1px;
                color:            {color:Date};
                display:          inline;
                margin-right:     -550px;
                padding:          3px 5px 0px 5px;
                line-height:      20px;
            }

            .post div.date a {
                color:            {color:Date};
                text-decoration:  none;
            }

            .post img {
              max-width: 100%;
            }

            .post h2 {
                font-size:        18px;
                font-weight:      Bold;
                color:            {color:Post Title};
                letter-spacing:   -1px;
                margin:           0px 0px 10px 0px;
            }

            .post h2 a {
                color:            {color:Post Title};
                text-decoration:  none;
            }

            /* Regular Post */
            .post .regular {
                font-size:        12px;
                color:            {color:Text};
                line-height:      17px;
            }

            .post .regular blockquote {
                font-style: italic;
            }

            /* Photo Post */
            .post .photo img {
                border:           solid 10px {color:Photo Border};
            }

            .post .photo div.caption {
                font-size:        11px;
                color:            {color:Text};
                margin-top:       5px;
            }

            .post .photo div.caption a {
                color:            {color:Text};
            }

            /* Quote Post */
            .post .quote span.quote {
                font:             Bold 28px {font:Body};
                letter-spacing:   -1px;
                color:            {color:Quote};
            }

            .post .quote span.quote a {
                color:            {color:Quote};
            }

            .post .quote span.quote big.quote {
                font:             Bold 60px Georgia, serif;
                line-height:      8px;
                vertical-align:   -20px;
            }

            .post .quote span.source {
                font-size:        16px;
                font-weight:      Bold;
                color:            {color:Quote Source};
                letter-spacing:   -1px;
            }

            .post .quote span.source a {
                color:            {color:Quote Source};
            }

            /* Link Post */
            .post .link a.link {
                font:             Bold 20px {font:Body};
                letter-spacing:   -1px;
                color:            {color:Link Post};
            }

            .post .link span.description {
                font-size: 13px;
                font-weight: normal;
                letter-spacing: -1px;
            }

            /* Conversation Post */
            .post .conversation ul {
                background-color: {color:Conversation Background};
                list-style-type:  none;
                margin:           0px;
                padding:          0px;
                border-left:      solid 5px {color:Conversation Border};
            }

            .post .conversation ul li {
                border-bottom:    solid 1px {color:Conversation Border};
                font-size:        12px;
                padding:          4px 0px 4px 8px;
                color:            {color:Conversation Text};
            }

            .post .conversation ul li span.label {
                font-weight:      bold;
                color:            {color:Conversation Label};
            }

            /* Audio Post */      
            .post .audio div.caption {
                font-size:        11px;
                color:            {color:Text};
                margin-top:       5px;
            }

            .post .audio div.caption a {
                color:            {color:Text};
            }

            /* Video Post */
            .post .video {
                width:            400px;
                margin:           auto;
            }

            .post .video div.caption {
                font-size:        11px;
                color:            {color:Text};
                margin-top:       5px;
            }

            .post div.video div.caption a {
                color:            {color:Text};
            }

            /* Twitter Text */
            .twtr-tweet-text {
             font: 11px Verdana, Arial, Helvetica, sans-serif !important;
            }

            .twtr-tweet-shell {
             width:190 !important;
            }

            /* Footer */
            #footer {
                margin:           40px 0px 30px 0px;
                text-align:       center;
                font-size:        12px;
            }

            #footer a {
                text-decoration:  none;
                color:            {color:Text};
            }

            #footer a:hover {
                text-decoration:  underline;
            }

                        .query { font-weight: bold; }

            {CustomCSS}
        </style>

        <!--[if lt IE 7]>
            <style type="text/css">
                .post div.labels {
                    right: 450px;
                }
            </style>
        <![endif]-->
 <link href="http://itsnotch.com/tumblr/files/gurucss.css" rel="stylesheet" type="text/css">



<!--Google Tracker Code--->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19744657-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


        <script type="text/JavaScript">
<!--
var currentTime = new Date().getHours();
if (7 <= currentTime&&currentTime < 20) {
    if (document.body) {
        document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
    }
}
else {
    if (document.body) {
        document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
    }
}

-->
</script>

<noscript><link href="http://itsnotch.com/tumblr/files/daytime.css" rel="stylesheet" type="text/css"></noscript>

    </head>
    <body>



        <div id="content">
            <h1><a href="/"><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></a></h1>

            <div id="description">
                <div>
                                        <div id="search">
                                            <form action="/search" method="get">
                                                <input type="text" name="q" value="{SearchQuery}"/>
                                                <input type="submit" value="Search"/>
                                            </form>
                                        </div>

                    {Description}

                    <p id="nav_container">
                        <a href="/archive" id="archive_link">Archive</a>
                        <span class="dim">/</span>
                        <a href="{RSS}">RSS</a>
                    </p>
                </div>
            </div>

                        {block:SearchPage}
                        <div id="searchresultcount">
                            <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
                        </div>
                        {/block:SearchPage}

            {block:Posts}
                <div class="post">
                    <div class="labels">
                        {block:NewDayDate}
                            <div class="date"><a href="{Permalink}">{Month} {DayOfMonth}</a></div>
                        {/block:NewDayDate}

                        {block:SameDayDate}
                            <div class="date"><a href="{Permalink}">+</a></div>
                        {/block:SameDayDate}
                    </div>

                    {block:Regular}
                        <div class="regular">
                            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                            {Body}
                        </div>
                    {/block:Regular}

                    {block:Photo}
                        <div class="photo">
                            {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Photo}

                    {block:Quote}
                        <div class="quote">
                            <span class="quote">
                                <big class="quote">&#147;</big> {Quote}
                            </span>
                            {block:Source}<span class="source">{Source}</span>{/block:Source}
                        </div>
                    {/block:Quote}

                    {block:Link}
                        <div class="link">
                            <a href="{URL}" class="link" {Target}>{Name}</a>
                            {block:Description}
                                <span class="description">{Description}</span>
                            {/block:Description}
                        </div>
                    {/block:Link}

                    {block:Conversation}
                        <div class="conversation">
                            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                            <ul>
                                {block:Lines}
                                    <li>
                                        {block:Label}<span class="label">{Label}</span>{/block:Label}
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                        </div>
                    {/block:Conversation}

                    {block:Audio}
                        <div class="audio">
                            {AudioPlayerGrey}
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Audio}

                    {block:Video}
                        <div class="video">
                            {Video-400}
                            {block:Caption}
                                <div class="caption">{Caption}</div>
                            {/block:Caption}
                        </div>
                    {/block:Video}
                </div>

                {block:IfDisqusShortname}
                    {block:Permalink}
                        <div id="disqus_thread"></div>
                        <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
                        <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>

                        <div style="text-align: right; margin-top: 5px">
                            <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
                        </div>
                    {/block:Permalink}
                {/block:IfDisqusShortname}
            {/block:Posts}

            <div id="footer">
                {block:PreviousPage}
                    <a href="{PreviousPage}">&#171; Previous</a> &nbsp;&nbsp;
                {/block:PreviousPage}

                {block:NextPage}
                    <a href="{NextPage}">Next &#187;</a>
                {/block:NextPage}
            </div>
        </div>

        {block:IfDisqusShortname}
            <script type="text/javascript">
                //<![CDATA[
                (function() {
                    var links = document.getElementsByTagName('a');
                    var query = '?';
                    for(var i = 0; i < links.length; i++) {
                        if(links[i].href.indexOf('#disqus_thread') >= 0) {
                            query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
                        }
                    }
                    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
                })();
                //]]>
            </script>
        {/block:IfDisqusShortname}
    </body>
</html>
  • Josh Tha CreativeOne
    Josh Tha CreativeOne over 13 years
    I tried that and it didn't work. This is exactly what I put before the </head>
  • Josh Tha CreativeOne
    Josh Tha CreativeOne over 13 years
    <script type="text/JavaScript"> <!-- var currentTime = new Date().getHours(); if (7 <= currentTime&&currentTime < 20) { if (document.body) { document.body.background = "itsnotch.com/tumblr/images/daytime_bg.jpg"; } } else { if (document.body) { document.body.background = "itsnotch.com/tumblr/images/nighttime_bg.jpg"; } } --> </script> <noscript><link href="itsnotch.com/tumblr/files/daytime.css" rel="stylesheet" type="text/css"></noscript>
  • Joe Enos
    Joe Enos over 13 years
    Location is important. If you put the script at the bottom of the body, then it should work. If you're putting it in the head, you may have problems. Many people recommend putting CSS at the top of the markup, and JS at the bottom, to ensure that everything runs smoothly. (Of course, putting things in external files is typically better, but that's another issue...)
  • neo2862
    neo2862 over 13 years
    I've updated the code to show where you should put the script inside the page. I've tested it and it worked perfectly. (Be sure to check out Joe's answer too!)
  • Josh Tha CreativeOne
    Josh Tha CreativeOne over 13 years
    Yes, I figured it out last night. I definitely had it in the wrong place. I was told to put the code in the header. And i'm such a newb that I didn't know better so............. forgive me lol. And thanks for the help. I had been trying 2 get that to work the entire day.
  • neo2862
    neo2862 over 13 years
    You're welcome :) You can put your scripts anywhere between the <html> and </html> tags but if you put them before the <body>, they run before the document is rendered. I recommend putting all <script> tags to the end.

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

jQuery css() function changing 'a' property not 'a:hover' property
Wait cursor over entire html page
Dynamic URLs in CSS/JS
How to get javascript console.log in flutter webview
Call javascript from dart native/flutter
How to integrate flutter web build inside react app for specific route?
while clicking local push notification how to navigate and reload a page in flutter
Flutter webview with custom javascriptInterfaceAdapter or invoke JS using webview controller
checkbox list does not update in flutter getx
Dart "encrypt" library gives unreadable string after encryption