Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,194,115 members, 7,953,424 topics. Date: Thursday, 19 September 2024 at 03:58 PM

Changing Css Or Background Based On Time - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Changing Css Or Background Based On Time (4313 Views)

Nairaland's New Background And Layout Style / How To: Create A Simple Hover Button With Html And Css / How Do I Randomly Change Background Image Of My Pages (2) (3) (4)

(1) (Reply) (Go Down)

Changing Css Or Background Based On Time by ponana(m): 9:42am On Apr 13, 2010
I dont know if it is possible, but i was thinking if anybody knws how to change the applied CSS of a website according to what the time is i.e creating a website with different appearance, background colour and all sorts for morning, another one for afternoon and another for night. IS it possible? Anybody?
Re: Changing Css Or Background Based On Time by DualCore1: 10:32am On Apr 13, 2010
Psuedocode.

var1 = system.getTime();
if (var1 = 01:00){
print('<link type="text/css" href="styles/morning.css" rel="stylesheet" />');
}

elseif(var1=13:00)
{
print('<link type="text/css" href="styles/afternoon.css" rel="stylesheet" />');
}

elseif(var1 = 18:00){
print('<link type="text/css" href="styles/evening.css" rel="stylesheet" />');
}
else{
print('<link type="text/css" href="styles/default.css" rel="stylesheet" />');
}



Erm, this is just psuedocode, get the idea and draw up a structure and put it in real code with with language you can work with.


One way i think i can do this is to get the time using the PHP Date() and then echo the respective CSS style sheet declaration based on the different conditions.

If i'm talking crap, sorry i havnt done it before, i'm just conjuring things off of my cores. Impossible is nothing.
Re: Changing Css Or Background Based On Time by Nobody: 10:34am On Apr 13, 2010
very possible and doable this is a rough idea you can build on it.

(script)

var time=new Date() \\

var timetochange= 12 \\meaning half of the day

var compare;

compare=time.getHours(); \\get hours btwn 0-23

if(compare == timetochange)
{
document.write( <style> background:red; or any style goes herer</style>wink;

}
else
{
document.write( <style> background:black; or any style goes herer</style>

}

(script)


i using wrong "(" to avoid bot eating my post.that's the basic idea php too can work but that's just wahala and mudane workload to the server
Re: Changing Css Or Background Based On Time by DualCore1: 10:37am On Apr 13, 2010
Frontend Vs. Backend grin
I humbly surrender to frontend. tongue
Re: Changing Css Or Background Based On Time by Nobody: 10:41am On Apr 13, 2010
@DualCore grin i had no idea u were going to paste a php version, coincidence
Re: Changing Css Or Background Based On Time by OmniPotens(m): 8:34pm On Apr 13, 2010
One situation here. What if I want to change my theme for Christmas, New Year, St. Patrick's day, and all those; how do I achieve it?
Re: Changing Css Or Background Based On Time by DualCore1: 9:00pm On Apr 13, 2010
//for christmas

if ((date('m') == 12) && (date('d') == 25)) {
//do ya thing
}



apply this concepts for the dates of the other days.
Re: Changing Css Or Background Based On Time by dodo10: 11:48pm On Apr 13, 2010
i will give u life code of it
call 08035057766
using javascript
Re: Changing Css Or Background Based On Time by DualCore1: 1:05am On Apr 14, 2010
dodo10:

i will give u life code of it
call 08035057766
using javascript

Please know when to differentiate serious convos from playful threads. Take this somewhere else, you wont get a call from anyone here, that's an assurance.
Re: Changing Css Or Background Based On Time by dodo10: 6:51am On Apr 14, 2010
Are u God?
people are calling they will still continue doing that
friend face your business

can d code run for d question he asked
see error

move out from my line
ja kuro lori line mi
Re: Changing Css Or Background Based On Time by OmniPotens(m): 7:15am On Apr 14, 2010
I guess you could tell I knew what to do but wanted to bring in more responses to this thread.

Needless @dodo10 trying to bring in quarrels or anything. I guess you could understand that this had to deal with code reviews and not needing any of the calling things. True, all my threads won't need any call me thing at all. It is either you solve them here and get rid of them or forget it. Any having to deal with emails is for a purpose needing my attention for some privacy. Don't feel bad please. Okay buddie?

@DC, easy man!
Re: Changing Css Or Background Based On Time by OmniPotens(m): 7:41am On Apr 14, 2010
Code snippet contribution. There could be more to this. The thing is just doing your calculations. Just like the code below, you could still calculate according to days too. Just add it in and they will all work. Events could also come in here as well just like the holidays.

<?php

function current_season() {
       // Locate the icons
       $css = array(
               "spring" => "stylesheet/spring.css",
               "summer" => "stylesheet/summer.css",
               "autumn" => "stylesheet/autumn.css",
               "winter" => "stylesheet/winter.css"
       );

       // What is today's date - number
       $day = date("z"wink;

       //  Days of spring
       $spring_starts = date("z", strtotime("March 21"wink);
       $spring_ends   = date("z", strtotime("June 20"wink);

       //  Days of summer
       $summer_starts = date("z", strtotime("June 21"wink);
       $summer_ends   = date("z", strtotime("September 22"wink);

       //  Days of autumn
       $autumn_starts = date("z", strtotime("September 23"wink);
       $autumn_ends   = date("z", strtotime("December 20"wink);

       //  If $day is between the days of spring, summer, autumn, and winter
       if( $day >= $spring_starts && $day <= $spring_ends ) :
               $season = "spring";
       elseif( $day >= $summer_starts && $day <= $summer_ends ) :
               $season = "summer";
       elseif( $day >= $autumn_starts && $day <= $autumn_ends ) :
               $season = "autumn";
       else :
               $season = "winter";
       endif;

       $image_path = $icons[$season];

       echo $image_path;
}

?>
Re: Changing Css Or Background Based On Time by DualCore1: 8:23am On Apr 14, 2010
OmniPotens:

@DC, easy man!
I am at ease brotha, I hardly respond to this guy's stuff but he took it too far by bringing it in here. We are right in the middle of serious work that could result in anybody learning something from and this dude comes in as usuall asking to be called.


dodo10:

Are u God?
people are calling they will still continue doing that
friend face your business

can d code run for d question he asked
see error

move out from my line
ja kuro lori line mi
you can go and F yourself for all I care. You're way outta ma league and we both know that.
Re: Changing Css Or Background Based On Time by Nobody: 10:07am On Apr 14, 2010
another fighting BAD Habit but keep it up. grin
Re: Changing Css Or Background Based On Time by Nobody: 11:08am On Apr 14, 2010
since javascript time is not constant from time to time, you may just use server side. You can use a cron job to change the stylesheet
like every 1 hour or whatever, so that everybody viewing the site at any point in time will get the same display.
i am not sure if i am making any sense . . .
Re: Changing Css Or Background Based On Time by ugochukwum(m): 11:12am On Apr 14, 2010
Ur not making sense at all explain well
Re: Changing Css Or Background Based On Time by Nobody: 12:21pm On Apr 14, 2010
ugochukwum:

your not making sense at all explain well
i am not making sense eh? ok, i suspect the problem is that you dont know what a cron job is.

A cron job is a way of making your website run some scripts at intervals. Let us assume that
i have 24 different stylesheets on my website. I can setup a cron job that will run every one hour.
I dont need to be online when it runs, the cron job will execute a php script which can change the
default stylesheet of the site according to the interval. So when it runs the first time, it changes the
style to maybe style1, next one hour, style2. . .style24
The current stylesheet in use is stored into a database. So whenever the website is opened at any
point in time, it is the current stylesheet that has been selected by the cron job that will be displayed.

This is not dependent on the time of the current user, it is based on the server time interval. I hope i have not
gone too advanced eh?
Re: Changing Css Or Background Based On Time by Nobody: 12:58pm On Apr 14, 2010
dhtml if the time of the system changes does js retrieve that time.if so then php will be preferable.
Re: Changing Css Or Background Based On Time by c7(m): 1:53pm On Apr 14, 2010
@dhtml,
u make sense.
I think php script shud suffix. U can use php date() to retrieve the time and with that parse the css u want. I dnt knw if am making sense
Re: Changing Css Or Background Based On Time by Nobody: 3:36pm On Apr 14, 2010
pc guru:

dhtml if the time of the system changes does js retrieve that time.if so then php will be preferable.
unless you are using ajax to calculate the current time based on local, time zone and all that rubbish.

I mean, jscript is entirely client sided, so if my cmos battery is weak, and my laptop is showing wrong
time, then a different stylesheet will show. However, if you make use of php such as cron job, then the
time will be synchronized to show what is on the server, so that everyone all over the world will see the
same style in real-time (as in at any point in time).
That is the best method i can come up with, and i can implement it with code as well. Just some slight
adjustment to the nice php code written by ominipotent with a good knowlege of dbase and cron jobs
will do it.

c++:

@dhtml,
u make sense.
I think php script shud suffix. U can use php date() to retrieve the time and with that parse the css u want. I dnt knw if am making sense
yeah right, i quite agree with you on that.
Re: Changing Css Or Background Based On Time by OmniPotens(m): 3:44pm On Apr 14, 2010
I agree man. Cron job is the better alternative to it. What if I use my server time in changing the CSS? I still think my code will work but cron is cron and does it's job. Can you help with a working code for this? I'm pretty more interested in here. I'm working on something else but I will also see how I can get a cron job thing on this.

@dhtml Thanks for bringing in this cron job thing into view.
Re: Changing Css Or Background Based On Time by Nobody: 3:50pm On Apr 14, 2010
First you need to know how to use cron job. And i must quickly mention that cron is mainly on apache servers.
On windows server, there are equivalents. I dont really want to go into that area right now. Find out what
applies on the server you are using.
I think cron job is easier to use on cpanel. Search google and stuff. You may practice by writing a cron job that
sends you an email like say every 10 minutes and stuffs like that.
Then from there, we can now talk. You can test out your script by running it directly before telling cron job to run
it for you. There is nothing much about cron job really, just scheduling the time your script will run.
Re: Changing Css Or Background Based On Time by DualCore1: 6:44pm On Apr 14, 2010
Am I the only one thinking of something else when I see the phrase blow cron job? lipsrsealed

Cron will work for intervals but wont work for specific calendar dates.
Re: Changing Css Or Background Based On Time by Nobody: 8:49pm On Apr 14, 2010
cron will work for specific calendar dates. How does facebook and many other sites remember to send you a birthday notification eh?
There is a direct and in-direct way of using blow cron jobs.
Newsletters, birthday card defering of sending emails, and so many other web applications use it.
Again, the method i was giving was even talking about intervals, but it can work for calendars as well.
Re: Changing Css Or Background Based On Time by DualCore1: 10:13pm On Apr 14, 2010
Mehn for some weird reasons, my connection is dulling. The times I have used cron from cpanel, its been based on intervals. I dont think I can remember seeing the possibility of its being applied for specific calendar dates. Thanks for the info though. i still have to check this up on cpanel as soon as I can.

Ok, so i'm not the only one seeing blow cron job, mmm? Nice!
Re: Changing Css Or Background Based On Time by Nobody: 10:26pm On Apr 14, 2010
the Mouth Action can be applies for calendar dates @ least indirectly. Once you know how to evaluate time properly in php.
This is beyond the scope of this thread (as in the indirect methods), but the direct applyin to calendar dates is possible
on some cron configurations. I am sure you can get scripts to do that for you, or pay me to write one for you.
Re: Changing Css Or Background Based On Time by DualCore1: 10:42pm On Apr 14, 2010
*dhtml:

I am sure you can get scripts to do that for you, or pay me to write one for you.
Lol I don't need this functionality for any project now and if I ever have to need it, I go either google my way out or bug you to death on Y!m and I will get it, either ways tongue

I use cron on trudigits.com for backup and account/billing management but that's at intervals (every mid-night).
Re: Changing Css Or Background Based On Time by Nobody: 10:46pm On Apr 14, 2010
. . .sleeps off. . .

(1) (Reply)

8 Best Wordpress Tools And SEO Plugins For Your Website / Most Remarkable Website Designer In The World Is Here / In Need Of A Landing Page

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 52
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.