Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.
05:00

Style Your Site According to the Weather with jQuery

By pulling in feed from the Yahoo API with jQuery, you can style your website according to the Weather! Find out how by following this step by step guide. We’ll start by creating four backgrounds for sun, rain, snow and cloudy, then use a clever jQuery script to pull in the forecast. To finish things off, we’ll even create a cool manual override, allowing users to switch through the various themes themselves.

See the weather switcher in action on Jakethelab.com

I recently put this idea into practice on a site I hashed together for my dog Jake. Jakethelab.com is a Tumblr blog where I post random photos and videos from my iPhone. The theme of the site changes depending on the weather, with Jake being the happiest when it’s sunny and cloudy, and not so much when it’s rainy or snowy. I wasn’t brainy enough to code all the Javascript myself, so some scripts from other talented developers were used alongside a few lines of my own basic jQuery. A few people has asked how it was all done, so here’s a brief overview.

Create the themes

Four backgrounds for each weather condition

The four themes of the site were put together as large background images. The same layout is used for each, but the overall theme changes to show the four weather conditions of sunny, rainy, snowy and cloudy.

Fetch the weather feed

$(document).ready(function() {	

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
            var w=data.query.results.item;
          	var class=w.condition.text;
          	var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

          	$('body').addClass(encodedclass);

       });
});

The script that does all the work by fetching the feed from Yahoo is courtesy of Justin Shearer from Graphically Herding the Masses. Justin’s post takes the API to a more advanced level and creates a complete weather widget. For our site we only need part of the code, and the rest is modified to suit.

With our weather being used as a class on the page body, the condition needed encoding to lower case and the spaces removed. This changed the text from this: Partly Cloudy to this: partly-cloudy. Next, the encodedclass variable was then added as a class to the page body, so the HTML would read <body class="partly-cloudy">, which could then be styled up with CSS.

http://weather.yahooapis.com/forecastrss?p=USNY0996

If you’re using this code on your own site, you’ll want to change the location of the weather feed. The easiest way to find your location code is to head over to Yahoo weather and check the URL of the RSS feed for your particular location.

Write the CSS styles

body.cloudy, body.partly-cloudy, body.mostly-cloudy {
	background: #b3c6e4 url(Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
	background: #9eacaf url(Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
	background: #8cdafe url(Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
	background: #889986 url(Snowy.jpg) fixed center bottom no-repeat;
}

With the current weather being injected right into our HTML, we can now write some CSS to make the appropriate changes to the website. Here’s where the list of Condition Codes from Yahoo Weather comes in handy because a bunch of classes are used to render each of the four backgrounds. For instance, a class of sunny, fair or hot will show the sunny background image. We don’t tend to get very many tropical storms in the UK, so just the most common conditions are picked out.

Add a manual override

Four buttons for changing the weather condition

Unless a user comes back to your website during every weather condition, they may never see your other themes so I figured it would be cool to add a manual override to allow users to toggle through the weather themselves.

<ul id="weather">
 	<li class="cloudy"><a href="#">Cloudy</a></li>
 	<li class="sunny"><a href="#">Sunny</a></li>
 	<li class="rainy"><a href="#">Rainy</a></li>
 	<li class="snowy"><a href="#">Snowy</a></li>
 </ul>

A simple list is laid out in HTML. Each list item contains an anchor which we’ll style up into button style graphics.

ul#weather {
		position: absolute; top: 40px; left: 40px;
		list-style: none; display: none;
	}
		ul#weather li {
			margin: 0 0 12px 0;
		}
			ul#weather li a {
				display: block; width: 60px;
				background: url(weather-icons.png) no-repeat; text-indent: -9999px;
			}
				ul#weather li.cloudy a {
					height: 32px; background-position: 0 0;
				}
				ul#weather li.sunny a {
					height: 63px; background-position: 0 -43px;
				}
				ul#weather li.rainy a {
					height: 50px; background-position: 0 -115px;
				}
				ul#weather li.snowy a {
					height: 48px; background-position: 0 -177px;
				}

The buttons are firstly moved into place using absolute positioning. This places them in a fixed position at the top left of the screen. Each anchor is then transformed into a button using CSS image replacement, with each button displaying a simple weather condition icon. Because this feature will only work if the user has Javascript enabled display:none; is used, the buttons will be made visible again by jQuery for those users with JS enabled.

	$('ul#weather').show();

	$('li.cloudy').click(function() {
		$('body').removeClass();
		$('body').addClass('cloudy');
		return false;
	});
	$('li.sunny').click(function() {
		$('body').removeClass();
		$('body').addClass('sunny');
		return false;
	});
	$('li.rainy').click(function() {
		$('body').removeClass();
		$('body').addClass('rain');
		return false;
	});
	$('li.snowy').click(function() {
		$('body').removeClass();
		$('body').addClass('snow');
		return false;
	});

A simple jQuery function is then written for each of the four buttons. When the button is clicked, the current class is removed from the page body and replaced according to whichever button was clicked. return false; disables the default action of the anchor to prevent the page from jumping back to the top.

var name = "#weather";
    var menuYloc = null;
   	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  

   		$(window).scroll(function () {
   			var offset = menuYloc+$(document).scrollTop()+"px";
   			$(name).animate({top:offset},{duration:500,queue:false});
		});

To finish off the buttons, a nifty piece of code from Nettuts is used to transform the buttons into a floating menu, which slides up and down the page when the user scrolls.

See the weather switcher in action on Jakethelab.com

See it in action on jakethelab.com

(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...