Today,

Weather widget template 01

SPECIAL NOTE

This example with the weather widget is not a ready to use one, it's just a template as starting point for your further customization. The support doesn't include any help/advice/workflow with that.

Description: The weather widget template for a customization with fake data. This examples uses additional JavaScript code for work.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Weather widget template 01 -->
<div class="container">
    <div class="row">
        <div class="weather-01 col-lg-6 col-md-6 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <form class="form-horizontal" action="javascript:">
                        <div class="input-group">
                            <input id="location" type="text" class="form-control" value="Denver, Colorado" placeholder="Enter your location">
                            <span class="input-group-btn">
                                <button id="search-location" class="btn btn-default" type="submit">
                                    <div class="livicon-evo" data-options="
                                        name: search.svg;
                                        style: lines;
                                        size: 30px;
                                        strokeColor: #fff;
                                        strokeWidth: 2;
                                        eventOn: parent">
                                    </div>
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row main-holder">
                <div class="col-sm-4 col-xs-12">
                    <div id="main-icon" data-options="
                        size: 100%;
                        style: lines;
                        strokeColor: #fff;
                        eventType: none;
                        autoPlay: true;
                        duration: 7;
                        repeat: loop;
                        repeatDelay:0">
                    </div>
                </div>
                <div class="col-sm-4 col-xs-6">
                    <p id="temperature" class="text-right"></p>
                </div>
                <div class="col-sm-4 col-xs-6 cel-far">
                    <div id="cel-far-main" class="livicon-evo" data-options="
                        name: morph-celsius-fahrenheit.svg;
                        morphState: end;
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: 3;
                        eventType: none">
                    </div>
                    <div id="cel-far-switch" class="livicon-evo" data-options="
                        name: morph-celsius-fahrenheit.svg;
                        morphState: start;
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: original;
                        eventType: click">
                    </div>
                </div>
            </div>
            <div class="row info-holder">
                <div class="col-sm-4 col-xs-12">
                    <p id="condition" class="text-capitalize text-center"></p>
                </div>
                <div class="col-sm-4 col-xs-6">
                    <p id="wind">
                        <div id="wind-icon" data-options="
                            name: wind-south.svg;
                            style: lines;
                            size: 30px;
                            strokeColor: #fff;
                            strokeWidth: 2;
                            eventOn: parent">
                        </div>
                        <span id="wind-value"></span>
                    </p>
                </div>
                <div class="col-sm-4 col-xs-6">
                    <p id="humidity">
                        <div id="humidity-icon" class="livicon-evo" data-options="
                            name: drop.svg;
                            style: lines;
                            size: 30px;
                            strokeColor: #fff;
                            strokeWidth: 2;
                            eventOn: parent">
                        </div>
                        <span id="humidity-value"></span>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div id="navigation">
                        <div>
                            <div data-daytime="morning" class="livicon-evo nav-icon active" data-options="
                                name: morph-circle-square2.svg;
                                morphState: end;
                                style: solid;
                                size: 14px;
                                solidColor: #fff;
                                strokeWidth: 0;
                                eventType: click">
                            </div>
                            <div data-daytime="afternoon" class="livicon-evo nav-icon" data-options="
                                name: morph-circle-square2.svg;
                                morphState: start;
                                style: solid;
                                size: 14px;
                                solidColor: #fff;
                                strokeWidth: 0;
                                eventType: click">
                            </div>
                            <div data-daytime="evening" class="livicon-evo nav-icon" data-options="
                                name: morph-circle-square2.svg;
                                morphState: start;
                                style: solid;
                                size: 14px;
                                solidColor: #fff;
                                strokeWidth: 0;
                                eventType: click">
                            </div>
                            <div data-daytime="night" class="livicon-evo nav-icon" data-options="
                                name: morph-circle-square2.svg;
                                morphState: start;
                                style: solid;
                                size: 14px;
                                solidColor: #fff;
                                strokeWidth: 0;
                                eventType: click">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row info-bottom">
                <div class="col-xs-7">
                    <p id="day-time">
                        Today, <span class="text-capitalize"></span>
                    </p>
                </div>
                <div class="col-xs-5 text-right">
                    <p>
                        <a href="javascript:">Next Day</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
/********* Weather Widget 01 **********/
.weather-01 {
  background-color: #fff;
  padding: 25px 40px 25px;
  color: #fff;
  border-radius: 4px;
}
.weather-01 form {
  height: 80px;
  border-bottom: 2px solid rgba(255,255,255,0.3);
}
.weather-01 p {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}
.weather-01 #location {
  border: none!important;
  background-color: transparent!important;
  color: #fff;
  font-size: 26px;
  padding: 0;
  height: 60px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.weather-01 #location:focus {
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.weather-01 #location::-moz-placeholder {
  color: rgba(255,255,255,0.3);
  opacity: 1;
}
.weather-01 #location:-ms-input-placeholder {
  color: rgba(255,255,255,0.3);
}
.weather-01 #location::-webkit-input-placeholder {
  color: rgba(255,255,255,0.3);
}
.weather-01 #search-location {
  padding: 10px 10px 10px 11px;
  border: none;
  border-radius: 0;
  background-color: rgba(0,0,0,0.1);
  opacity: 0.8;
}
.weather-01 #search-location:active,
.weather-01 #search-location:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.weather-01 .main-holder {
  padding-top: 30px;
  position: relative;
}
.weather-01 #main-icon {
  opacity: 0.3;
}
.weather-01 .cel-far {
  position: relative;
  margin-top: 10px;
  padding-left: 0;
}
.weather-01 #temperature {
  color: rgba(255,255,255,0.9);
  font-size: 130px;
  font-weight: 100;
  line-height: 1;
  margin-top: 10px;
  margin-left: -15px;
}
.weather-01 #cel-far-main {
  position: absolute;
  top: -27px;
  right: 40px;
  width: 180px!important;
  opacity: 0.9;
}
.weather-01 #cel-far-switch {
  position: absolute;
  top: 17px;
  right: 0;
  width: 60px!important;
  opacity: 0.3;
  cursor: pointer;
}
.weather-01 #cel-far-switch svg {
  border-left: 2px solid #fff;
}
.weather-01 .info-holder {
  margin-top: 25px;
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  font-weight: 500;
}
.weather-01 .info-holder p {
  margin: 0;
}
.weather-01 #wind-icon,
.weather-01 #humidity-icon {
  float: left;
  margin: -5px 5px 0 10px;
  opacity: 0.3;
}
.weather-01 #navigation {
  margin-top: 30px;
  margin-bottom: 40px;
  height: 20px;
}
.weather-01 #navigation > div {
  width: 80px;
  margin: 0 auto;
}
.weather-01 #navigation .livicon-evo {
  opacity: 0.3;
  float: left;
  margin: 3px;
  cursor: pointer;
  -webkit-transition: opacity .2s linear;
  -ms-transition: opacity .2s linear;
  transition: opacity .2s linear;
}
.weather-01 #navigation .livicon-evo.active {
  opacity: 0.9;
}
.weather-01 #navigation .livicon-evo:hover {
  opacity: 0.9;
}
.weather-01 .info-bottom {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.weather-01 .info-bottom a {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.weather-01 .info-bottom a:hover {
  color: rgba(255,255,255,0.9);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .weather-01 #temperature {
    font-size: 90px;
  }
  .weather-01 #cel-far-main {
    width: 120px!important;
    top: -17px;
  }
  .weather-01 #cel-far-switch {
    top: 0;
    right: 0;
    width: 60px!important;
  }
  .weather-01 #cel-far-switch svg {
    border-left: none;
  }
}
@media (max-width: 767px) {
  .weather-01 {
    padding: 25px 20px 25px;
  }
  .weather-01 #main-icon {
    width: 62%!important;
    margin: 0 auto 30px;
  }
  .weather-01 #temperature {
    font-size: 90px;
  }
  .weather-01 #cel-far-main {
    width: 120px!important;
    top: -17px;
    left: 0;
    right: none;
  }
  .weather-01 #cel-far-switch {
    top: 0;
    right: none;
    left: 100px;
    width: 60px!important;
  }
  .weather-01 #cel-far-switch svg {
    border-left: none;
  }
}
//Weather Widget Template 01
$(document).ready(function () {
    var data = {
        "location": "Denver, Colorado",
        "morning": {
            "icon": "weather-rain-thunder",
            "condition": "thunderstorm",
            "temp_cel": "17",
            "temp_far": "63",
            "wind_direction": "se",
            "wind_metric": "18 km/h",
            "wind_british": "11 mph",
            "humidity": "93%"
        },
        "afternoon": {
            "icon": "weather-rain",
            "condition": "rain",
            "temp_cel": "12",
            "temp_far": "54",
            "wind_direction": "n",
            "wind_metric": "23 km/h",
            "wind_british": "14 mph",
            "humidity": "78%"
        },
        "evening": {
            "icon": "weather-cloud",
            "condition": "overcast",
            "temp_cel": "4",
            "temp_far": "39",
            "wind_direction": "w",
            "wind_metric": "17 km/h",
            "wind_british": "10 mph",
            "humidity": "69%"
        },
        "night": {
            "icon": "weather-snow",
            "condition": "snow",
            "temp_cel": "-3",
            "temp_far": "25",
            "wind_direction": "nw",
            "wind_metric": "8 km/h",
            "wind_british": "5 mph",
            "humidity": "75%"
        }
    };
    var colors = {
            morning: '#4C627B',
            afternoon: '#68829e',
            evening: '#336b87',
            night: '#003b46',
        },
        daytime = 'morning',
        cur_data = data[daytime];

    $('.weather-01').css('background-color', '#4C627B');
    $('.weather-01 #location').val(data.location);
    $('.weather-01 #main-icon').addLiviconEvo({name: cur_data.icon});
    $('.weather-01 #temperature').text(cur_data.temp_far);
    $('.weather-01 #condition').text(cur_data.condition);
    function windDir (val) {
        var rotate;
        switch (val) {
            case "n":
                rotate = 180;
                break;
            case "w":
                rotate = 90;
                break;
            case "e":
                rotate = 270;
                break;
            case "nw":
                rotate = 135;
                break;
            case "ne":
                rotate = -135;
                break;
            case "sw":
                rotate = 45;
                break;
            case "se":
                rotate = -45;
                break;
            default: //south (no icon rotation)
                break;
        };
        return rotate;
    }
    $('.weather-01 #wind-icon').addLiviconEvo({rotate: windDir(cur_data.wind_direction)});
    $('.weather-01 #wind-value').text(cur_data.wind_british);
    $('.weather-01 #humidity-value').text(cur_data.humidity);
    $('.weather-01 #day-time > span').text(daytime);

    $('.weather-01 #cel-far-switch').on('click', function () {
        var that = $(this),//switch icon
                state = that.liviconEvoState();
        $('.weather-01 #cel-far-main').playLiviconEvo();
        if (state === 'start') {
            var tl = new TimelineLite();
            tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:0});
            tl.call(function () {
                $('.weather-01 #temperature').text(cur_data.temp_cel);
                $('.weather-01 #wind-value').text(cur_data.wind_metric);
            });
            tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:1});
        } else {
            var tl = new TimelineLite();
            tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:0});
            tl.call(function () {
                $('.weather-01 #temperature').text(cur_data.temp_far);
                $('.weather-01 #wind-value').text(cur_data.wind_british);
            });
            tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:1});
        };
    });

    $('.weather-01 .nav-icon:not(active)').on('click', function () {
        function change (elem, val) {
            var tl = new TimelineLite();
            tl.to(elem, 0.5, {autoAlpha:0, paddingLeft:'+=5px'});
            tl.call(function () {
                $(elem).text(val);
            });
            tl.to(elem, 0.5, {autoAlpha:1, paddingLeft:'-=5px'});
        }
        
        var that = $(this);//switch icon
        daytime = that.data('daytime');
        cur_data = data[daytime];
        
        that.siblings('.active').removeClass('active').playLiviconEvo();
        if (!that.hasClass('active')) {
            $('#main-icon').updateLiviconEvo({name: cur_data.icon, afterUpdate: function () {
                    $('#main-icon').drawLiviconEvo(true);
                }
            });
        };
        that.addClass('active');
        
        TweenLite.to('.weather-01', 1, {backgroundColor: colors[daytime]});
        change('.weather-01 #condition', cur_data.condition);
        change('.weather-01 #humidity-value', cur_data.humidity);
        change('.weather-01 #day-time > span', daytime);
        
        var state = $('.weather-01 #cel-far-switch').liviconEvoState();
        if (state === 'start') {
            change('.weather-01 #temperature', cur_data.temp_far);
            change('.weather-01 #wind-value', cur_data.wind_british);
        } else {
            change('.weather-01 #temperature', cur_data.temp_cel);
            change('.weather-01 #wind-value', cur_data.wind_metric);
        };
        $('.weather-01 #wind-icon').addLiviconEvo({rotate: windDir(cur_data.wind_direction), drawTime:0.8, drawOnViewport: true});
        $('.weather-01 #humidity-icon').playLiviconEvo({duration: 1});
    });
});

Categories

Weather Widgets

Share