Simple Weather Plugin with jQuery - simpleWeather

File Size: 30.2 KB
Views Total: 22116
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Weather Plugin with jQuery - simpleWeather

simpleWeather is a jQuery Plugin for easily displaying a weather widget that is clean and customizable. The data is pulled from the public Yahoo! Weather feed via the YQL API. 

How to Use It:

1. Include jQuery library and simpleWeather.js

<script src="" charset="utf-8"></script>
<script src="jquery.simpleWeather.js" charset="utf-8"></script>

2. Basic Usage

<script type="text/javascript">
        location: 'wichita falls, texas',
        unit: 'f',
        success: function(weather) { ... },
        error: function(error) { ... }

3. Complete Usage

<script type="text/javascript">
        zipcode: '76309',
        unit: 'f',
        success: function(weather) {
                html = '<h2>'', '+weather.region+' ''</h2>';
                html += '<p><strong>Today\'s High</strong>: '+weather.high+'&deg; '+weather.units.temp+' - <strong>Today\'s Low</strong>: '+weather.low+'&deg; '+weather.units.temp+'</p>';
                html += '<p><strong>Current Temp</strong>: '+weather.temp+'&deg; '+weather.units.temp+' ('+weather.tempAlt+'&deg; C)</p>';
                html += '<p><strong>Thumbnail</strong>: <img src="'+weather.thumbnail+'"></p>';
                html += '<p><strong>Wind</strong>: '+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+' <strong>Wind Chill</strong>: '+weather.wind.chill+'</p>';
                html += '<p><strong>Currently</strong>: '+weather.currently+' - <strong>Forecast</strong>: '+weather.forecast+'</p>';
                html += '<p><img src="'+weather.image+'"></p>';
                html += '<p><strong>Humidity</strong>: '+weather.humidity+' <strong>Pressure</strong>: '+weather.pressure+' <strong>Rising</strong>: '+weather.rising+' <strong>Visibility</strong>: '+weather.visibility+'</p>';
                html += '<p><strong>Heat Index</strong>: '+weather.heatindex+'"></p>';
                html += '<p><strong>Sunrise</strong>: '+weather.sunrise+' - <strong>Sunset</strong>: '+weather.sunset+'</p>';
                html += '<p><strong>Tomorrow\'s Date</strong>: '' ''<br /><strong>Tomorrow\'s High/Low</strong>: '+weather.tomorrow.high+'/'+weather.tomorrow.low+'<br /><strong>Tomorrow\'s Forecast</strong>: '+weather.tomorrow.forecast+'<br /> <strong>Tomorrow\'s Image</strong>: '+weather.tomorrow.image+'</p>';
                html += '<p><strong>Last updated</strong>: '+weather.updated+'</p>';
                html += '<p><a href="''">View forecast at Yahoo! Weather</a></p>';

        error: function(error) {

4. The markup

<div id="weather2"></div>
<div id="weather"></div>

5. All default options.

location: '',
woeid: '',
unit: 'f',
success: function(weather){},
error: function(message){}

Change logs:

v3.1.0 (2016-01-30)

  • Removing deprecated geo.placefinder and using geo.places instead.
  • Fixed error callback to correctly return an error message.

v3.0.2 (2014-06-03)

  • Fixed result issue when more than one location was returned.

v3.0.1 (2014-05-23)

  • Fixed bug in forecast thumbnail and images.

v3.0 (2014-05-18)

  • Complete rewrite! Removed over 100 lines of code without losing functionality.
  • Now < 4.0 kB in size.
  • Added forecast thumbnail image.
  • Removed tomorrow in favor of forecast.
  • Fixed http/https issue on API call #79 and images.

v2.7.0 (2014-04-18)

  • Added gulp and a build/release process.
  • Fix for 3200 (not available) condition code and related image.
  • Fixed my assumption of query being present.
  • Some general code cleanup.

v2.6.0 (2014-02-27)

  • Encoding URI for API call.
  • Fixed formatting issues.
  • Fixed alt temps bug.

v2.5.0 (2014-02-05)

  • update

v2.4.0 (2014-01-23)

  • update

v2.0.2 (2013-06-09)

  • Added high and low alt temps, added alt temp unit

This awesome jQuery plugin is developed by monkeecreate. For more Advanced Usages, please check the demo page or visit the official website.