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.

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.