A Web Designer & Developer in Wichita Falls, TX. Working for Crane | West Advertising Agency.
James Fleeting
 
09 Jun

How to display weather with jQuery

Sometimes you just want to display current weather on your website. We have actually had several clients recently request displaying local weather on their website. There are times when displaying weather is useful as in one of our clients who is a realtor and targets people moving into town. While they are browsing homes for sale they see the current weather at a glance. Nothing intrusive but simple and clean. Once again I set about finding a simple, lightweight, clean and easy to use jquery plugin to accomplish this. Although several exist none did what I wanted. Some don’t let you use a zipcode or location name and instead require a unique id from Yahoo. Others return non valid or bulky html which is just as bad. A few weeks ago I created simpleWeather a jQuery Plugin.

simpleWeather uses the Yahoo! Weather API to return plenty of weather data for a location. I recently updated the plugin (v1.4) which now gives you the ability to use a US Zipcode or specify your location. Example: 90210 or London, United Kingdom. Yahoo! does a pretty good job of returning the correct location, however in some cases a location may have multiple spots reporting data (such as the city itself and then the airport or military base). In this case, if the correct location is not being returned, you still have the ability to use the unique GEOID that is assigned to every location by Yahoo. More details on using and getting this id can be found in the plugin wiki. For now lets show some code to display a little weather data from Wichita Falls that we could stick in a sidebar. First the javascript to get the weather using simpleWeather.

Copy to Clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {			
    $.simpleWeather({
        zipcode: '76309',
        unit: 'f',
        success: function(weather) {
            $("#weather").append('<h2>'+weather.city+', '+weather.region+'</h2>');
            $("#weather").append('<img style="float:left;" width="125px" src="'+weather.image+'">');
            $("#weather").append('<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>');
            $("#weather").append('<a href="'+weather.link+'">View Forecast &raquo;</a>');
        },
        error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
        }
    });
});

The above uses simpleWeather to grab weather data for the zipcode 76309 (Wichita Falls, TX USA). You can change the units to f or c depending on your location or what you want. Next up is our success function which is where we display only the data we want. In this case I have a div#weather and am using the jQuery.append() add our weather information to the empty div. Its a mix of html and our data variables. In this case displaying city, state, the weather icon, temp and link to view the full forecast on Yahoo. For a complete list of all data returned view the Available Data wiki.

Now we have our data we need to style it with some of that fancy css everybody talks about. Lets go with a clean box and a blue gradient to showcase the weather. That code looks like this:

Copy to Clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#weather {
	background: #6f9dbe;
	background: -webkit-gradient(linear, left top, left bottom, from(#adc7db), to(#6f9dbe));
	background: -moz-linear-gradient(top, #b2bcc8, #adc7db);
	width: 185px;
	margin: 0 auto;
	padding: 5px 10px;
	overflow: hidden;
	border: 1px solid #6591b3;
}
 
#weather h2 {
	color: #000;
	text-shadow: rgba(250, 250, 250, 0.6) 2px 2px 0;
}
 
#weather p {
	font-size: 25px;
	margin: 30px 0 0;
}
 
#weather p span {
	font-size: 16px;
}
 
#weather a:link, #weather a:active, #weather a:visited {
	display: block;
	clear: both;
	text-decoration: none;
	color: #222;
	font-size: 12px;
}
 
#weather a:hover {
	color: #000;
	text-decoration: underline;
}

Now what does the above get us? We get this fancy little weather box. You can get an idea of how quick and pain free it is to not only get the weather data but return what you want, with your own html and then use your own css. If you use the simpleWeather plugin or run into any issues be sure and let me know.

Download jQuery.simpleWeather PluginGet The Source Code

 

13 Responses to “How to display weather with jQuery”

[...] were, well, not quite what I wanted. So, I went searching around and eventually came across the jQuery simpleWeather plugin. It was pretty much exactly what I was looking for. Except that it was not yet a WordPress plugin. [...]

I cant apply a png fix to the returned images for IE

I’m not sure why you can’t apply a png fix on the images. You get to control the image tag and apply any classes, etc that you want depending on the png fix you use for IE.

How would you implement this for secure https pages? It gives a security warning.

Love the plugin, but it doesn’t seem to work in IE7. Is it possible I’m doing something wrong. I’m working locally at the moment, and have something stuck in the back of my mind that I’ve had something like this before that didn’t work until it was uploaded. Any thoughts appreciated.

Just realised that the demos don’t work in IE7 either. Would love to get this working in all browsers. Any thoughts or suggestions will be very appreciated.

@Kit Beck: There was a bug in the demos that kept it from working in IE, however this bug is not in the released files. Can you try the demos again at http://simpleweather.monkeecreate.com and see if it works for you in IE7 now?

The demo at the URL you suggested does work in IE7. The demo at http://paperkilledrock.com/public/code-demos/simpleweather.html doesn’t seem to work at all. I think this is what confused me. I think my problem, though, is that my set-up is letting me down. I’m serving my website from a Mac with MAMP installed, and viewing it over my LAN on a Vista machine with IE7. I think I had this problem before when I used the BBC weather feed. I’ll have to upload it and see if it works ok then. Cheers, James. Thanks for the great plug-in.

Ahh, that demo hosted here is out of date and does look like it was broken. I have updated the link and should work now. Let me know if after you upload that it still doesn’t work.

 
Jamie Hayes
October 27, 2010 6:24am

Hi James,

FYI – the Location: parameter no longer appears to work (as of this weekend).

If anyone needs to access weather for outside of the US it appears the GEOID needs to be used.

Brilliant plugin by the way!

I’m currently using the Location param on the demo to pull in weather for Melbourne, Australia and its been working just fine. It could be the location your attempting to use. What is the location that is not working? Here is the demo with location param in use: http://simpleweather.monkeecreate.com/

 
Jamie Hayes
October 27, 2010 10:04am

Hi,

yep you’re right it’s now working again. Apologies. It wasn’t earlier, honest(!). Your demo wasn’t showing Australia either but the zipcodes and GEOID were. Anyway, you’re right, it’s working now! (I wonder if the Location information is from a different Yahoo server?!)

Not sure, it could have failed to get the info from Yahoo! at the time. When using the Location param, it runs a second lookup to get the geoid for your location. So, it could have failed to return the id in that look up which is why the zipcode and geoid were still working.

Glad its working now. Thanks for using the plugin as well.