Skip to main content

10 Awesome Weather Widgets with jQuery

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Today we are sharing you our collection of what we think awesomely good jQuery Weather Widget plugins. We can easily provide our website’s visitors the weather information of any location with these plugin integrated into our site. These plugins uses the API of weather information providers like Google and Yahoo!

Related Posts:

1. WeatherSlider – jQuery animated weather widget

This is a beautiful weather slider widget with animated weather effects and 48 weather types.

2. My Google Weather Plugin

This plugin adds weather for any city in the world.
> Fully customizable weather widget
> Use google provided weather information
> Available in most cities in the world
> Cross-browser (works in IE7+ / FF / chrome / Safari / opera)
My Google Weather
Source + Demo

3 Create a Weather Widget Using jQuery, YQL and

Create a simple widget to display weather data. Our aim is to create a widget similar to how Google displays weather data.
Weather Widget Using jQuery, YQL and

4. Using Google’s Weather API

This application takes a set of Google weather API feeds and makes some simple decision based on the output.
Using Google’s Weather API

5. jQuery Geolocation and Yahoo’s APIs to build a simple weather webapp

We will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast.
jQuery Geolocation and Yahoo’s APIs

6. jQuery weather widget

This widget is pure JavaScript and requires no back-end/server so you can place it on your blog or anywhere you like. The widget makes two main calls using JSON to retrieve the users geolocation and then to retrieve the local weather for that location.
jQuery weather widget
Source + Demo

7. jDigiClock : jQuery Digital Clock with Weather

jDigiClock is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget.
Source + Demo

8. simpleWeather : How to display weather with jQuery

A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.
Source + Demo

9. Adding Weather to Your Site with jQuery and YQL

jQuery and YQL (a free web service offered by Yahoo) can be used to easily add a customized weather display to your site. In this article I’ll guide you through the process from start to finish.
Weather to Your Site with jQuery and YQL

10. zWeatherFeed – Yahoo! Weather plugin for jQuery

This plugin will read the current weather for a location using Yahoo! Weather. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!

Give yourself more options and write higher quality CSS with CSS Optimization Basics.