"Metro style dynamic Tiles with dynamic weather"
Bootstrap 3.2.0 Snippet by bktz

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script> <style> .dynamicTile .col-sm-2.col-xs-4{ padding:5px; } .dynamicTile .col-sm-4.col-xs-8{ padding:5px; } #tile1{ background: rgb(0,172,238); } #tile2{ background: rgb(243,243,243); } #tile3{ background: rgb(71,193,228); } #tile4{ background-image: url('http://handsontek.net/demoimages/tiles/facebook.png'); background-size: cover; } #tile5{ background: rgb(175,26,63); } #tile6{ background: rgb(62,157,215); } #tile7{ background: white; } #tile8{ background: rgb(209,70,37); } #tile9{ background: rgb(0,142,0); } #tile10{ background: rgb(0,93,233); } .tilecaption{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin:0!important; text-align: center; color:white; font-family: Segoe UI; font-weight: lighter; } </style> <div class="container dynamicTile"> <div class="row "> <div class="col-sm-2 col-xs-4"> <div id="tile1" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/twitter1.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/twitter2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile2" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/hot2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/hot3.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile3" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/weather.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile4" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile5" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/neews2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile6" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/skype.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/skype2.png" class="img-responsive"/> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-8"> <div id="tile7" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile8" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/music.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/music2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile9" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/calendar.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/calendar2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-8"> <div id="tile10" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3 class="tilecaption" id="weather"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/loader.gif" alt="Loading..." class="loading"><br />Loading...</h3> </div> <div class="item"> <h3 class="tilecaption"><i class="fa fa-child fa-4x"></i></h3> </div> <div class="item"> <h3 class="tilecaption">Text, Icons, Images</h3> </div> <div class="item"> <h3 class="tilecaption">Combine them and create your metro style</h3> </div> </div> </div> </div> </div> </div> </div> <script> $( document ).ready(function() { $(".tile").height($("#tile1").width()); $(".carousel").height($("#tile1").width()); $(".item").height($("#tile1").width()); $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 10); }); $(window).bind('resizeEnd', function() { $(".tile").height($("#tile1").width()); $(".carousel").height($("#tile1").width()); $(".item").height($("#tile1").width()); }); getWeather(); //Get the initial weather. setInterval(getWeather, 300000); //Update the weather every 5 minutes. /** * Setup last.fm rss feed scraper */ $.ajax({ url : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://ws.audioscrobbler.com/1.0/user/bktz/recenttracks.rss'), dataType : 'json', success : function (data) { if (data.responseData.feed && data.responseData.feed.entries) { $.each(data.responseData.feed.entries, function (i, e) { console.log("------------------------"); console.log("title : " + e.title); console.log("published date : " + e.publishedDate); }); } }, error : function () { } }); }); function getWeather() { $.simpleWeather({ location: 'Toronto, ON', woeid: '', unit: 'c', success: function (weather) { html = '<p>' + weather.temp + '°' + weather.units.temp + '</p>'; $("#weather").html(html); }, error: function (error) { $("#weather").html('<p>' + error + '</p>'); } }); }; </script>

Similar snippets: See More


Comments:

Commenting will be back soon.