jQuery Plugin To Embed A Nice Weather Widget In Webpage - Weather Widget

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

A tiny jQuery weather plugin for generating a weather widget on your webpage that shows the forecast for the current day by city name.


  • 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.

  city: 'New York, UA'

4. Customization options.


  // 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:


  • changed api key for openweathermap.org


  • 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.