Last active
February 9, 2018 23:36
-
-
Save devfred/2884662 to your computer and use it in GitHub Desktop.
javascript: Weather forecast jquery plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Weather Forecast Plugin | |
* Author: Frederick King | |
* | |
**/ | |
(function(window, document, $, undefined) { | |
var api = { | |
load: function(zip, $elem) { | |
var self = this; | |
// XDomain Request for IE8/IE9 :( | |
if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) { | |
// console.log('Microsoft IE version #' + $.browser.version); | |
// Use Microsoft XDR :( | |
var xdr = new XDomainRequest(); | |
xdr.open("get", "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Fxml.weather.yahoo.com%2Fforecastrss%2F" + zip + "_f.xml'&format=json"); | |
xdr.onload = function() { | |
json = 'json = ' + xdr.responseText; // the string now looks like.. json = { ... }; | |
eval(json); // json is now a regular JSON object | |
self.draw(json.query.results.item.forecast, $elem); // parse using same function as for jQuery's success event | |
} | |
xdr.send(); | |
} else { | |
$.ajax({ | |
url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D'http%3A%2F%2Fxml.weather.yahoo.com%2Fforecastrss%2F" + zip + "_f.xml'&format=json", | |
dataType: 'json', | |
success: function(data) { | |
self.draw(data.query.results.item.forecast, $elem); | |
} | |
}); | |
} | |
}, | |
draw: function(data, $elem) { /* Iterate through each forecast item */ | |
$.each(data, function() { | |
var data = this, | |
code = data.code, | |
date = data.date, | |
day = data.day, | |
high = data.high, | |
low = data.low, | |
text = data.text, | |
markup = '' + '<div class="weatherItem ' + text + '" >' + '<div class="weatherDay">' + day + '</div>' + '<div class="weatherDate">' + new Date(date).format('MM/dd') + '</div>' + '<div class="weatherImage"></div>' + '<div class="weatherRange">' + '<div class="high" >Hi: ' + high + '</div>' + '<div class="low" >Lo: ' + low + '</div>' + '</div>' + '</div>'; | |
$elem.append(markup); | |
}); | |
} | |
}; /* jQuery Entry Point */ | |
$.fn.forecast = function(options) { | |
var opts = {}, | |
$elem = this; | |
$.extend(opts, options, {}); | |
$elem.each(function() { | |
var $elem = $(this); | |
api.load(opts.zip, $elem); | |
}); | |
return this; | |
}; | |
$(document).ready(function() { | |
$('#forecast').forecast({ | |
'zip': '28215' | |
}); | |
}); | |
})(window, document, jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
could this be used in something like wallpaper engine and how would you got about it ( also would it be possable to set it for diffrent areas so londen, ny e.g)