jQuery Plugin To Embed A Nice Weather Widget In Webpage - Weather Widget
File Size: | 446 KB |
---|---|
Views Total: | 10526 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny jQuery weather plugin for generating a weather widget on your webpage that shows the forecast for the current day by city name.
Features:
- Allows to search for local weather by city name.
- Shows min/max temperatures, wind, humidity based on your location.
- City name autocomplete.
- Based on openweathermap.org's Weather API.
- Allows to specify the city name.
- Auto update the background image based on the current weather conditions.
How to use it:
1. Include both jQuery library and the jQuery Weather Widget's script on your webpage.
<script src='//code.jquery.com/jquery-latest.min.js'></script> <script src='app.js'></script>
2. Create a DIV container to place the weather widget.
<script src='//code.jquery.com/jquery-latest.min.js'></script> <script src='app.js'></script>
3. Initialize the plugin and specify the city name. If there's no city name specified, it will grab your location and show the weather.
$('.weather').weather({ city: 'New York, UA' });
4. Customization options.
$('.weather').weather({ // language lang: 'en', // city name city: null, // 'C' or 'F' tempUnit: 'C', // min length of autocomplete autocompleteMinLength: 3, // shows description displayDescription: true, // shows min/max temperature displayMinMaxTemp: true, // shows wind displayWind: false, // shows humidity displayHumidity: false, // fix location fixLocation: false, // API url: 'http://api.openweathermap.org/data/2.5/forecast?appid=2de143494c0b295cca9337e1e96b00e0&cnt=1&units=metric' });
Change log:
2016-01-26
- changed api key for openweathermap.org
2016-01-20
- fixed error up & down keys on the empty list
- added reset of selectedIndex
- fixed city with "spaces" name
- corrected expression in arguments of functions
- corrected long expression convert to a variable
- added focus to input
- moved autocomplete to the plugin
- code refactoring
This awesome jQuery plugin is developed by ggevgg. For more Advanced Usages, please check the demo page or visit the official website.