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

This script is a standalone that mean you can use it in both static and dynamic sites.
Currently this script haven't WordPress version but we are working on WordPress version that will release in next weeks.

Features

BetterWeather is a feature rich script!.

  • 10 Unique design for weather states and more are coming...
    Clear Day, Clear Night, Rain, Snow, Sleet, Wind, Fog, Cloudy, Partly Cloudy Day and Partly Cloudy Night
  • Automatically determine sunrise and sunset times and design uniquely will change
  • Smart responsive design! layout will adopted automatically from 40 pixel width to 2000 pixel width!
  • Auto detect user location via IP and fallback default location
  • Animated and static icons for weather types
  • Inline style for using in texts
  • 2 type of element design ( Normal and Modern )
  • Showing current weather and next four days weather forecast ( Can be disabled )
  • Static color for background
  • Option to show temperature in Celsius and Fahrenheit units
  • Fully translation & Retina ready!
  • Use AJAX technology
  • Inner cache for better speed
  • and more...!

Requirements

BetterWeather developed on javascript jQuery plugin.

  • jQuery ( Work with all versions )
  • jQuery elementQuery plugin ( Attached )
  • Skycons ( Attached )
BetterWeather uses Forecast.io API. You can get a free API key with a simple sign up to the site ( Sing up tutorial ).

Browser Support

  • Mozilla Firefox 3+
  • Google Chrome 10+
  • Safari 3+
  • iOS Safari
  • Opera 10+
  • Internet Explorer 8+

Please note, that the following source codes are in HTML 5 markup. If you are using xHTML, please be aware of the differences.

Setup

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>
                            
                        
If in your page jQuery included before you can delete jQuery include line.

Loading the 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 change "..." with your own API key for Forecast.io!. see: Getting your own API key

How to find an location value

You must specify location ( latitude and longitude ) value for where you will show weather status. For finding this value just go to following url:

http://forecast.io/

In opened page type the location name:

type location

After typing and hitting enter copy the number that highlighted in following picture from url:

Forecast.io API key is free for 1000 requests per day! but BetterWeather have inner cache that save each location data for 30 minute.
You can use 20 BetterWeather widget for different static location for 1 day just with 1 API key without any payment and Without worrying about visitors count!.
But if you want show visitors location status then for over 1000 unique visitors then you must pay for extra visitors!.

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 )

Getting your own API key

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

Forecast.io sign up page

After you can see your API Key in bottom of page

Forecast.io sign up page

This options are for advance settings, for setup script see Quick Setup section.

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
bgColor : "#4f4f4f"
naturalBackground : false



"normal" style




Optional

Default: #e0e0e0
style

BetterWidget have 2 different type of design: Normal and Modern!
Example:


"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
mode : "widget"



Inline style
mode : "inline"




Optional

Default: widget
inlineSize For changing inline size:



Inline Large size
inlineSize: "large"




Inline Medium size
inlineSize: "medium"




Inline Small size
inlineSize: "small"



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>

Images used:

If you think your photos is good for BetterWeather, contact us :) we will be glad to use them in next updates!.

jQuery Plugins