weather-icon

Day time

°

condition

Wind:

Humidity:

Pressure:

weather-icon

Day time

°

condition

Wind:

Humidity:

Pressure:

weather-icon

Day time

°

condition

Wind:

Humidity:

Pressure:

weather-icon

Day time

°

condition

Wind:

Humidity:

Pressure:

Weather widget template 02

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 second 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 02 -->
<div class="container">
    <div class="row">
        <div class="weather-02 col-lg-4 col-md-5 col-sm-6 col-xs-12">
            <div class="row search-form">
                <div class="col-xs-12">
                    <form class="form-horizontal" action="javascript:">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <div class="livicon-evo" data-options="
                                    name: location.svg;
                                    size: 30px;
                                    style: lines;
                                    strokeColor: #000;
                                    strokeWidth: 2;
                                    animated: false;
                                    drawOnViewport: false;
                                    colorsOnHover: none">
                                </div>
                            </span>
                            <input type="text" class="form-control" placeholder="Type and hit Enter" value="Bern, Switzerland">
                        </div>
                        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1">
                    </form>
                </div>
            </div>
            <div class="row morning active" data-order="1">
                <div class="col-xs-6">
                    <div class="weather-icon" data-options="
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: original;
                        eventType: none;
                        drawOnViewport: false;
                        autoPlay: true;
                        duration: 7;
                        repeat: loop;
                        repeatDelay:0;
                        colorsOnHover: none">
                        weather-icon
                    </div>
                </div>
                <div class="col-xs-6">
                    <p class="day-time text-uppercase">Day time</p>
                    <p class="temperature"><span class="value"></span> °</p>
                    <p class="condition text-capitalize">condition</p>
                    <p class="wind">Wind: <span class="value"></span></p>
                    <p class="humidity">Humidity: <span class="value"></span></p>
                    <p class="pressure">Pressure: <span class="value"></span></p>
                </div>
            </div>

            <div class="row afternoon" data-order="2">
                <div class="col-xs-6">
                    <div class="weather-icon" data-options="
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: original;
                        eventType: none;
                        drawOnViewport: false;
                        duration: 7;
                        repeat: loop;
                        repeatDelay:0;
                        colorsOnHover: none">
                        weather-icon
                    </div>
                </div>
                <div class="col-xs-6">
                    <p class="day-time text-uppercase">Day time</p>
                    <p class="temperature"><span class="value"></span> °</p>
                    <p class="condition text-capitalize">condition</p>
                    <p class="wind">Wind: <span class="value"></span></p>
                    <p class="humidity">Humidity: <span class="value"></span></p>
                    <p class="pressure">Pressure: <span class="value"></span></p>
                </div>
            </div>
            
            <div class="row evening" data-order="3">
                <div class="col-xs-6">
                    <div class="weather-icon" data-options="
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: original;
                        eventType: none;
                        drawOnViewport: false;
                        duration: 7;
                        repeat: loop;
                        repeatDelay:0;
                        colorsOnHover: none">
                        weather-icon
                    </div>
                </div>
                <div class="col-xs-6">
                    <p class="day-time text-uppercase">Day time</p>
                    <p class="temperature"><span class="value"></span> °</p>
                    <p class="condition text-capitalize">condition</p>
                    <p class="wind">Wind: <span class="value"></span></p>
                    <p class="humidity">Humidity: <span class="value"></span></p>
                    <p class="pressure">Pressure: <span class="value"></span></p>
                </div>
            </div>

            <div class="row night" data-order="4">
                <div class="col-xs-6">
                    <div class="weather-icon" data-options="
                        style: lines;
                        strokeColor: #fff;
                        strokeWidth: original;
                        eventType: none;
                        drawOnViewport: false;
                        duration: 7;
                        repeat: loop;
                        repeatDelay:0;
                        colorsOnHover: none">
                        weather-icon
                    </div>
                </div>
                <div class="col-xs-6">
                    <p class="day-time text-uppercase">Day time</p>
                    <p class="temperature"><span class="value"></span> °</p>
                    <p class="condition text-capitalize">condition</p>
                    <p class="wind">Wind: <span class="value"></span></p>
                    <p class="humidity">Humidity: <span class="value"></span></p>
                    <p class="pressure">Pressure: <span class="value"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>
/********* Weather Widget 02 **********/
.weather-02 {
  background-color: transparent;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.weather-02 .search-form {
  border-radius: 4px 4px 0 0;
  padding: 20px 0 15px;
  background-color: #f8e1e5;
}
.weather-02 .form-control {
  border: none!important;
  background-color: transparent!important;
  color: rgba(0,0,0,0.4);
  font-size: 18px;
  font-weight: 500;
  height: 40px;
  letter-spacing: 1px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.weather-02 .form-horizontal .livicon-evo {
  opacity: 0.4;
}
.weather-02 .form-control:focus {
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.weather-02 .form-control::-moz-placeholder {
  color: rgba(0,0,0,0.2);
  opacity: 1;
}
.weather-02 .form-control:-ms-input-placeholder {
  color: rgba(0,0,0,0.2);
}
.weather-02 .form-control::-webkit-input-placeholder {
  color: rgba(0,0,0,0.2);
}
.weather-02 .input-group-addon {
  padding: 0 0 0 5px;
  background-color: transparent!important;
  border: none;
  border-radius: 0;
}
.weather-02 .weather-icon {
  opacity: 0.4;
  position: absolute;
  top: 0;
  right: 20px;
  width: 140px!important;
}
.weather-02 .morning {
  padding: 20px 0;
  background-color: #bc6d4f;
  height:250px;
  overflow: hidden;
  cursor: pointer;
}
.weather-02 .afternoon .weather-icon,
.weather-02 .evening .weather-icon,
.weather-02 .night .weather-icon {
  top: -160px;
}
.weather-02 .afternoon {
  padding: 20px 0;
  background-color: #9d331f;
  height:95px;
  overflow: hidden;
  cursor: pointer;
}
.weather-02 .evening {
  padding: 20px 0;
  background-color: #500805;
  height:95px;
  overflow: hidden;
  cursor: pointer;
}
.weather-02 .night {
  padding: 20px 0;
  background-color: #1e0000;
  border-radius: 0 0 4px 4px;
  height:95px;
  overflow: hidden;
  cursor: pointer;
}
.weather-02 .day-time {
  color: rgba(255,255,255,0.5);
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.weather-02 .temperature {
  color: rgba(255,255,255,0.9);
  font-size: 24px;
  margin-bottom: 20px;
}
.weather-02 .condition {
  color: rgba(255,255,255,0.9);
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.weather-02 .wind,
.weather-02 .humidity,
.weather-02 .pressure {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0px;
  letter-spacing: 1px;
}
//Weather Widget Template 02
$(document).ready(function () {
    var data = {
        "location": "Bern, Switzerland",
        "morning": {
            "condition": "sunny",
            "icon": "weather-sun",
            "temperature": "6",
            "wind": "NE 2 mph",
            "humidity": "76%",
            "pressure": "1031 mb"
        },
        "afternoon": {
            "condition": "clouds",
            "icon": "weather-cloud",
            "temperature": "10",
            "wind": "NW 5 mph",
            "humidity": "83%",
            "pressure": "1029 mb"
        },
        "evening": {
            "condition": "rain",
            "icon": "weather-rain",
            "temperature": "3",
            "wind": "W 7 mph",
            "humidity": "93%",
            "pressure": "1028 mb"
        },
        "night": {
            "condition": "snow",
            "icon": "weather-snow",
            "temperature": "-4",
            "wind": "NW 3 mph",
            "humidity": "87%",
            "pressure": "1026 mb"
        }
    };
    
    $('.weather-02 .row:not(.search-form)').each(function () {
        var that = $(this),
                day_time = that.attr('class').split(' ')[1],
                cur_data = data[day_time];
        that.find('.weather-icon').addLiviconEvo({name: cur_data.icon});
        that.find('.day-time').text(day_time);
        that.find('.temperature .value').text(cur_data.temperature);
        that.find('.condition').text(cur_data.condition);
        that.find('.wind .value').text(cur_data.wind);
        that.find('.humidity .value').text(cur_data.humidity);
        that.find('.pressure .value').text(cur_data.pressure);
    });

    $('.weather-02 .row:not(.search-form)').on('click', function () {
        var target = $(this),
                target_order = target.data('order'),
                active = $('.weather-02 .row.active'),
                active_order = active.data('order'),
                target_icon = target.find('.weather-icon'),
                active_icon = active.find('.weather-icon'),
                time = 0.8,
                ease = Power1.easeInOut;
        
        if (!target.hasClass('active')) {
            TweenLite.to(active, time, {height: '95px', ease: ease, onComplete: function () {
                active_icon.stopLiviconEvo();
            }});
            if (target_order > active_order) {
                var top = target_icon.css('top');
                if (top === '160px') {
                    target_icon.css('top', '-160px');
                };
                TweenLite.to(active_icon, time, {top: '160px', ease: ease});
            } else if (target_order < active_order) {
                var top = target_icon.css('top');
                if (top === '-160px') {
                    target_icon.css('top', '160px');
                };
                TweenLite.to(active_icon, time, {top: '-160px', ease: ease});
            };
            active.removeClass('active');
            
            TweenLite.to(target, time, {height: '250px', ease: ease});
            TweenLite.to(target_icon, time, {top: '0px', ease: ease, onComplete: function () {
                target_icon.playLiviconEvo();
            }});
            target.addClass('active');
        };
    });
});

Categories

Weather Widgets

Share