Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (53 sloc) 2.21 KB
<title>Weather Example</title>
<script src=""
.weather { display: none; margin: 1em; border: 2px solid black; width: 100px; text-align: center; border-radius: 4px; }
.weather_date { background-color: #000; color: #fff; height: 1.2em; padding: 0.1em; }
.weather_temp { display: table; width:100%; height: 1.2em; border-bottom: 1px solid black; }
.weather_temp_min { display: table-cell; background-color: #efe; width: 50%; padding: 0.1em; }
.weather_temp_max { display: table-cell; background-color: #fee; width: 50%; padding: 0.1em; }
.weather_text { font-size: 80%; color: #999; padding: 0.5em; }
var url = '';
var yql = 'select title, units.temperature, item.forecast from weather.forecast where woeid in (select woeid from geo.places where text="Brisbane, Australia") and u = "C" limit 5 | sort(field="", descending="false");';
var iconUrl = '';
$.ajax({url: url, data: {format: 'json', q: yql}, method: 'GET', dataType: 'json'})
.success(function(data) {
if (data.query.count > 0) {
jQuery.each(, function(idx, result) {
var f = result.item.forecast;
var u = result.units.temperature;
var c = $('#weather').clone();
c.find('.weather_temp_min').text(f.low + u);
c.find('.weather_temp_max').text(f.high + u);
c.find('.weather_icon').attr('src', iconUrl + f.code + '.gif');
c.css('display', 'inline-block');
<!-- Used as a template -->
<div id="weather" class="weather">
<div class="weather_date">DATE</div>
<div class="weather_temp">
<div class="weather_temp_min">MIN</div>
<div class="weather_temp_max">MAX</div>
<img class="weather_icon">
<div class="weather_text"></div>
You can’t perform that action at this time.