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
  • 127 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short summary and a practical path forward: is correct that server-side logic gives a single authoritative date (good for consistency), while shows the client-side JavaScript route (good when you don’t control the server). is also right that “season” can be defined astronomically (equinox/solstice) and that those instants move year-to-year. If you cannot edit server code or want the visitor’s local interpretation, use a small client-side script that runs before styles are applied and adds a season class (so CSS selectors do the rest).

A simple, safe pattern is: 1) put a tiny inline script as the first thing in <head>, 2) let it set class="season-xxx" on the root element, 3) write seasonal rules in your CSS keyed to those classes (for accessibility, supply a neutral default in <noscript>). Example script to drop into the top of the page:

<script>
(function(){
  var d = new Date(), m = d.getMonth();
  var hemi = 'north'; // change to 'south' for southern hemisphere
  var north = ['winter','winter','spring','spring','spring','summer','summer','summer','autumn','autumn','autumn','winter'];
  var south = ['summer','summer','autumn','autumn','autumn','winter','winter','winter','spring','spring','spring','summer'];
  var season = (hemi==='south' ? south[m] : north[m]);
  document.documentElement.className = (document.documentElement.className + ' season-' + season).trim();
})();
</script>

Practical tips and caveats: place the script before your CSS links to avoid flicker; prefer class-based CSS (e.g., body.season-spring { background: ... }) over repeatedly loading full CSS files if you want faster rendering. Provide a <noscript> fallback and a small user override (store the choice in localStorage) so visitors can pick a season. If you need exact astronomical instants, embed a small per-year table of equinox/solstice timestamps in the script (or generate it when you deploy) instead of hard-coding month boundaries. Test by changing the machine date or toggling the hemi/m values to confirm visuals and caching behavior.

Recommended Answers

All 5 Replies

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.