Member Avatar for chellethecat

I'm working on a layout that consists of four individual layouts and CSS files for each; one for Spring, Summer, Fall, and Winter. Perhaps not the most unique of ideas, but it's one I've had in mind for years now.

My problem is that I have not been able to find a solid and reliable way to automatically change the layout displayed based on the viewer's computer date (for example on March 19th would display the Winter layout, March 20th the Spring one). I had someone suggest the use of PHP to accomplish this, however I have zero knowledge of PHP and if at all possible I would like to avoid having to pay someone to do coding for me. I prefer to have more control over the elements of my sites and knowledge to make changes when and if necessary.

So, as I've had a lot of valuable input from the community here before on problems I turn here once more in the hopes that someone might have a suggestion.

At this time, I have not done any of the coding for this site.

  • 4 Contributors
  • 5 Replies
  • 116 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for almostbob

unfortunately the dates dont determine the seasons the same in all regions, some change on equinox and solstice, some change on first day of months,
once you decide on how YOU want your site background to change on date it would be far simpler to set on the server, by server date settings, in php asp or shtml, than on the user pc there are a lot of delays to load backgrounds after the page is loaded and the javascript run,
in php and I assume other server side languages it is simple to get the date, so

function GetSeason() {
$SeasonDates = array('/12/21'=>'winter','/09/21'=>'autumn','/06/21'=>'summer','/03/21'=>'spring','/12/31'=>'winter');
foreach ($SeasonDates AS $key => $value) // Loop through the season dates
 {  $SeasonDate = date("Y").$key;
    if (strtotime("now") > strtotime($SeasonDate)) // If we're after the date of the starting season
    { return $value; } 
  }
}
echo '<style>body {background-image: url('.GetSeason().'.jpg);}</style>' ;

the dates are guesses, I think in Mar 1 Jun 1 Sep 1 Dec 1

Member Avatar for chellethecat

...
once you decide on how YOU want your site background to change on date it would be far simpler to set on the server, by server date settings...

This is not something I have any actual control over; in fact I am not even sure I can view it. My best guess would be that it's running on US dates and times (EST) since the server is physically located in Atlanta, GA.

But again, as I know nothing about PHP I would prefer to not use it (I would have to have someone else do the coding for the site and that's just not something I'm comfortable with). If this is the only viable way to accomplish this, I will just have to shelve the project indefinitely.

Member Avatar for urtrivedi

Try following javscript code in your all html page in the begining and see what happens.
If you have many pages then you can keep following code in one javascript file and then just refer that file from every html page.
You need not to use php for this.

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="quarter1.css" />

<script type="text/javascript">
	var today=new Date();
	var month =today.getMonth()+1;
	alert(month);
	if(month>=1 && month<=3)
		document.getElementById("style1").href="quarter1.css";	
	if(month>=4 && month<=6)
		document.getElementById("style1").href="quarter2.css";	
	if(month>=7 && month<=9)
		document.getElementById("style1").href="quarter3.css";	
	else
		document.getElementById("style1").href="quarter4.css";	

</script>
</head>
<body>
</body>
</html>
Member Avatar for chellethecat

Try following javscript code in your all html page in the begining and see what happens.
If you have many pages then you can keep following code in one javascript file and then just refer that file from every html page.
You need not to use php for this.

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="quarter1.css" />

<script type="text/javascript">
	var today=new Date();
	var month =today.getMonth()+1;
	alert(month);
	if(month>=1 && month<=3)
		document.getElementById("style1").href="quarter1.css";	
	if(month>=4 && month<=6)
		document.getElementById("style1").href="quarter2.css";	
	if(month>=7 && month<=9)
		document.getElementById("style1").href="quarter3.css";	
	else
		document.getElementById("style1").href="quarter4.css";	

</script>
</head>
<body>
</body>
</html>

Thanks! I'll give this a go and let you know how it turns out! :)

Member Avatar for MidiMagic

The dates of the changes of seasons change from year to year, because of the elliptical orbit of the earth, the precession of the equinoxes, leap years, and the Gregorian calendar adjustment days.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.