First of all a huge THANK YOU for purchasing BetterWeather stand-alone version at Codecanyon. If you have any questions that are beyond the scope of this help file, please contact us from our Codecanyon profile contact form. You can also follow we on Codecanyon to keep track of all our plugin updates and future plugins and themes. Thanks so much!
Purchase page: BetterWeather
Current version: 1.3
Updated: 2014/5/22
By: BetterStudio
Email: betterstudio.net@gmail.com
Codecanyon Profile: BetterStudio
This is a beautiful and feature rich weather widget with powerful responsive design! just put that in anywhere with any width in your site and magic happens!.
BetterWeather is a feature rich script!.
BetterWeather developed on javascript jQuery plugin.
Please note, that the following source codes are in HTML 5 markup. If you are using xHTML, please be aware of the differences.
At first copy and put better-weather folder in anywhere in your server/project and Include the following lines into the head section of your page.
Of course the path can be different, depending where is better-weather folder on your server.
<!-- BetterWeather styles -->
<link href="better-weather/css/bw-style.min.css" rel="stylesheet">
and copy following code to bottom of your page before </body>
tag.
<!-- jQuery, plugins and BetterWeather script-->
<script src="better-weather/js/jquery.min.js" type="text/javascript"></script>
<script src="better-weather/js/skycons.js"></script>
<script src="better-weather/js/elementQuery.min.js"></script>
<script src="better-weather/js/betterweather.min.js"></script>
You have to run this plugin like any other jQuery plugin:
$(selector).betterWeather({options});
For example: if you want create a BetterWeather widget just create an empty div and set an id named betterweather or anything you want, and call BetterWeather:
<div id="betterweather"></div>
<script type='text/javascript'>
(function($){
$('#betterweather').betterWeather({
apiKey : '...',
location : '51.5171,-0.1062'
});
})(jQuery);
</script>
You must specify location ( latitude and longitude ) value for where you will show weather status. For finding this value just go to following url:
In opened page type the location name:
After typing and hitting enter copy the number that highlighted in following picture from url:
The script uses weather API of Forecast.io. You can get a free API key with a simple sign up to the site.
( Another sites/services API support will be added soon )
You can get your own Forecast.io API key by clicking the following url.
https://developer.forecast.io/register
In opened page enter your email and password and click on "Create an account".
After you can see your API Key in bottom of page
You can use the following settings which are applied to the BetterWeather widget. You can have different settings to each of BetterWeather widget.
$('#betterweather').betterWeather({
apiKey : "...",
location : "",
locationName: "",
showLocation: true,
showDate : true,
visitorLocation: false,
fontColor : "#fff",
bgColor : "#4f4f4f",
style : "normal", // Modern
nextDays : true,
animatedIcons: true,
naturalBackground: true,
url : "better-weather/ajax/ajax.php",
unit : "C" ,// F
showUnit : false,
mode : "widget" , // inline
inlineSize : "medium" // small, medium, large
});
Parameter | Description and example if need |
---|---|
apiKey |
API Key for Forecast.io.
see Forecast.io API Required Default: empty |
location |
Specify location ( latitude and longitude ) value for where you will show weather status.
see How to find location!? Required Default: 51.5171,-0.1062
|
visitorLocation |
Show forecast for visitors location! before using this you must read this note. You must set a default location for when visitors location not founded from their IP address. Optional Default: false
|
locationName |
You can set location name of location for everything you want! if this field not specified location name retrieved from Forecast.io.
Optional Default: Location name retried from Forecast.io |
showLocation |
You can hide showing location name with setting this option with false value.
Optional Default: true
|
showLocation |
You can hide location name with setting this option with false value.
Optional Default: true
|
showDate |
You can hide date with setting this option with false value.
Optional Default: true
|
fontColor |
Color of fonts and icons in BetterWeather.
Optional Default: #fff
|
bgColor |
Color of widget background. Note, if naturalBackground value is true then bdColor not worked because this colored will override with natural style for widget!!.
Static background color
"normal" style Optional Default: #e0e0e0
|
style |
BetterWidget have 2 different type of design: Normal and Modern!
"modern" style "normal" style Optional Default: normal
|
nextDays |
For Showing/Hiding next days forecast. Optional Default: true
|
animatedIcons |
with true value animated icons will shown and with false static icons without animation will shown.
Animated Icons Static Icons Optional Default: true
|
naturalBackground |
If value set to true each state will have uniquely background and if set to false background color will be value of bgColor or default.
Optional Default: true
Examples in bgColor
|
unit |
You can show temperatures in two unit: Fahrenheit and Celsius
"C" for Celsius unite "F" for Fahrenheit unite Optional Default: C
|
showUnit |
You can show temperatures unit in BetterWeather with setting true value to this option.
Showing Celsius unit Showing Fahrenheit unit Optional Default: C
|
mode |
For changing mode between inline and widget!
Widget mode
Inline style Optional Default: widget
|
inlineSize |
For changing inline size:
Inline Large size
Inline Medium size
Inline Small size Optional Default: medium
|
url |
the URL of ajax.php file that is a wrapper between BetterWeather and Forecast.io for cache functionality.
Note, currently that file available only for PHP and another programing languages will be added in next weeks. Optional Default: /better-weather/ajax/ajax.php
|
You can change the language both of the weather types and the UI.
For changing just put following code to your page and change value for each parameter in your local language.
<script type='text/javascript'>
var BW_Localized = {
monthList: {
January : 'January',
February : 'February',
March : 'March',
April : 'April',
May : 'May',
June : 'June',
July : 'July',
August : 'August',
September : 'September',
October : 'October',
November : 'November',
December : 'December'
},
daysList: {
Sat : 'Sat',
Sun : 'Sun',
Mon : 'Mon',
Tue : 'Tue',
Wed : 'Wed',
Thu : 'Thu',
Fri : 'Fri'
},
stateList: {
clear : 'Clear',
rain : 'Rain',
snow : 'Snow',
sleet : 'Sleet',
wind : 'Wind',
foggy : 'Foggy',
cloudy : 'Cloudy',
mostly_cloudy : 'Mostly Cloudy',
partly_cloudy : 'Partly Cloudy',
thunderstorm : 'Thunderstorm',
drizzle : 'Drizzle',
light_Rain : 'Light Rain',
overcast : 'Overcast',
breezy_and_Partly_Cloudy: 'Breezy and Partly Cloudy'
}
} ;
</script>