Current Local Weather Plugin With jQuery - Weather.js

A jQuery based local weather widget that will show a small modal of left side corner with current weather report and it will access current location by browser. Based on OpenWeatherMap's weather API.

How to use it:

1. Download the plugin and include the weather.js script after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="weather.js"></script>

2. Create a DIV container with the data-type="plugin" attribute for the local weather widget.

<div data-type="plugin"></div>

3. That's it. Let's start to style and position the weather widget.

div[data-type='plugin'] {
  height: 150px;
  width: 150px;
  margin-left: 80%;
  padding: 5px 5px 5px 5px;
  position: fixed;
  z-index: 999;
  -webkit-box-shadow: 9px 9px 72px -2px rgba(107,101,107,0.82);
  -moz-box-shadow: 9px 9px 72px -2px rgba(107,101,107,0.82);
  box-shadow: 9px 9px 72px -2px rgba(107,101,107,0.82);
  border-radius: 30px;
  background: url(../weather-plugin/_images/bg.gif);
}

.text {
  text-align: center;
  font-size: medium;
  margin: 5px 0px 0px 1px;
  color: #ff6600;
}

#icon {
  margin-left: 40%;
  margin-top: 0px;
  margin-bottom: 0px;
}

#temp { font-size: 45px; }

#desc { font-variant: small-caps; }

#close {
  display: block;
  height: 30px;
  width: 30px;
  z-index: 1;
  top: -5px;
  margin-left: 80%;
}

About Author:

Author: jaskaranjit singh

Website: https://github.com/iamsingh/weather-plugin

---

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