249
Customized it to be as simple as possible, before, it was configured to load the image on the body, which was breaking my CSS, specially in one of my websites that uses CMS JOOMLA, then I had to find a way to make it load on a div. So, there you go:
Make a folder and call it "daynight", it has to be at the same directory as your page (index.php, index.html, etc.) file.
Open page's file, where you gonna change the background and post the following between the <head> tags </head>:
Expand|Select|Wrap|Line Numbers
- <link href="../daynight/css/CSSTimeSwitch.css" rel="stylesheet" type="text/css">
- <script type="text/javascript" src="../daynight/js/timeswitch.js"></script>
Expand|Select|Wrap|Line Numbers
- onload="CSSTimeSwitch();"
So it gonna look like that:
Expand|Select|Wrap|Line Numbers
- <body onload="CSSTimeSwitch();">
Now make a folder inside "daynight" and name it "css", make another one and call it "js".
Inside css, make a file and name it "CSSTimeSwitch.css" (If you're using windows, don't forget to configure the OS to show extensions of system files).
open the css file and paste the follow:
ps: You can change the images path to match yours.
Expand|Select|Wrap|Line Numbers
- /*--- after 0:00 -----*/
- #bgi.night {background:url(../img/night.jpg) top no-repeat;}
- /*--- after 6:00 -----*/
- #bgi.aftersixam {background:url(../img/traveling.jpg) top no-repeat;}
- /*--- after 8:00 -----*/
- #bgi.aftereightam {background:url(../img/morning.jpg) top no-repeat;}
- /*--- after 12:00 -----*/
- #bgi.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;}
- /*--- after 13:00 -----*/
- #bgi.afternoon {background:url(../img/Seaside_Resort_02.jpg) top no-repeat;}
- /*--- after 17:00 -----*/
- #bgi.aftefivepm {background:url(../img/Holiday.jpg) top no-repeat;}
- /*--- after 20:00 -----*/
- #bgi.evening {background:url(../img/treesnight.jpg) top no-repeat;}
Open the js folder, make a file, name it "timeswitch.js" and paste the follow:
Expand|Select|Wrap|Line Numbers
- // © copyright Sibran Lens
- // Leave this comment if you want to use this script for your website
- // http://blog.e-ss.be
- function CSSTimeSwitch()
- {
- datetoday = new Date();
- timenow=datetoday.getTime();
- datetoday.setTime(timenow);
- thehour = datetoday.getHours();
- if (thehour >= 20)
- display = "evening";
- else if (thehour >= 17)
- display = "afterfivepm";
- else if (thehour >= 13)
- display = "afternoon";
- else if (thehour >= 12)
- display = "noon";
- else if (thehour >= 8)
- display = "aftereightam";
- else if (thehour >= 6)
- display = "aftersixam";
- else if (thehour >= 0)
- display = "night";
- var thebody = document.getElementById("bgi");
- thebody.className= display;
- }
Expand|Select|Wrap|Line Numbers
- var thebody = document.getElementById("bgi");
That means you've got have a div in the html that has the id "bgi", e.g.: <div id="bgi">, or table <table id="bgi">(Test the table and tell me later =]).
If you want to load the image from the body, just delete the hash tags inside the css file and rename bgi to your body id.
e.g.:
Change
Expand|Select|Wrap|Line Numbers
- #bgi.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;}
Expand|Select|Wrap|Line Numbers
- yourbodyid.noon {background:url(../img/restaurants-goers.jpg) top no-repeat;}
It had a part that was supposed to reset the bg, just in case the user has internet explorer 6, but after all, it was just going to insert a grey bg, and Google stopped offering support to IE6, once it is a very old browser.
Today, every browser supports java script, so if you're having trouble on running the script on FF, or, Safari, Opera, Chrome, maybe you have disabled your browser java script functionality.
Well, I'll post the whole original script here as an attachment, so you can download it and use it at your own will. Don't forget to remove the Google Adwords part, it is a traffic tracker, it's inside CSSTimeSwitch.html.
Well, that is it.
Have a day as cool as you.
SB^}
