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.
(more…)

jQuery Plugin: simpleWeather

Recently we have had several clients wanting to display weather information on their website. Although there are several ways to do this with widgets provided by a wide range of sites, none provided the ease of use and ability to style it and use the tags I wanted. Most we came across would return flash, a bulky block of html that wasn’t easy to control the style of or you couldn’t control what values were returned. When it doesn’t exist exactly how you want it, create it.

Over the weekend I set about to create a jQuery Plugin that would use the Yahoo! Weather API but keep things simple. My goal was to get every piece of data I could from Yahoo! regarding the weather and give you the choice on what to display and how to display it. I also wanted it to be extremely easy to get your locations weather. Other jQuery Plugins require you to enter a code as your location, which is only found when looking at the rss feed url for your location on Yahoo! Weather. How is that user friendly? Using a zip code/postal code is all you need.

After a few hours of coding and learning about Yahoo! YQL API I had a plugin that did exactly what I wanted. I give you the data and you decide what html to use, what id’s or class’ should be applied and what info you want to display. Check out the demo to see a styled example and a full example showing all the data returned. You can download the plugin at the jQuery Plugins site or get the full source on the GitHub repo.

QTT: Faux Columns

For this Quick Tip I’ll show you two easy ways, css and js, to do faux columns. This is basically having two columns (or more) in your layout and having them the same height. Here is an example of a typical 2 column layout with column height problem.

The CSS Way

The first way I’ll show you is using css, basically just a background. With this method you will have a wrapper around your columns with your background image. Your image will repeat vertical to fill the complete height of your longest column, creating a faux column look (columns that look like they are the same height). Check out the CSS Way Demo first. Here is the typical code for this method:

1
2
3

#wrapper {
	background: url(images/wrapper-bg.jpg) repeat-y 0 0;
}

How simple is that css? You can of course apply more to it like rounded corners, set the width, etc if needed. Here is the image I’m using for the demo linked above; innerWrapper-bg.jpg. As you can see its pretty simple. Its small and will just repeat for the length of the wrapper. Lets check out the html:
(more…)