I have very limited Javascript experience (I'm learning it right now) and even less jQuery experience. I found a plugin for adding weather based on the visitors IP address and modified it slightly (the creator didn't know how to convert Celsius to Fahrenheit). It worked great until last week.
Last week it stopped displaying anything except a gray box. There were no changes to my code or the website last week, the weather box just stopped displaying any data. The demo on the source website (http://www.myphpetc.com/2009/11/jquery-weather-widget.html) also doesn't work.
Can someone help me debug it?
<style type="text/css">
#weather_widget * {
margin:0px;
padding:0px;
font-family:inherit,sans-serif;
font-size:14px;
}
#weather_widget {
border:1px solid #444;
background:#EEE;
width:156px;
padding:10px;
overflow:auto;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
margin-bottom: 30px;
border-radius:2px;
}
#weather_img {
float:left;
border-radius: 5px;
padding: 0;
margin-right: 5px;
}
#weather_country {
font-weight:bold;
font-size:13px;
}
#weather_city {
font-size:13px;
font-style:italic;
}
#weather_temp {
margin-top:5px;
font-size:16px;
font-variant: small-caps;
}
#weather_cond {
margin-top:5px;
font-style:italic;
font-size:13px;
font-weight: bold;
}
#weather_conditions {
float:left;
font-size: 13px;
}
#weather_hum {
font-variant: small-caps;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">/**
* jQuery Cookie plugin - https://github.com/carhartl/jquery-cookie
*
* Copyright (c) 2010 Klaus Hartl, @carhartl
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($) {
$.cookie = function(key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
options = $.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var decode = options.raw ? function(s) { return s; } : decodeURIComponent;
var pairs = document.cookie.split('; ');
for (var i = 0, pair; pair = pairs[i] && pairs[i].split('='); i++) {
if (decode(pair[0]) === key) return decode(pair[1] || ''); // IE saves cookies with empty string as "c; ", e.g. without "=" as opposed to EOMB, thus pair[1] may be undefined
}
return null;
};
})(jQuery);</script>
<script type="text/javascript">$("document").ready(function() {
if ($.cookie('loc_longitude') && $.cookie('loc_latitude')) {
getWeather();
} else {
$.getJSON("http://www.geoplugin.net/json.gp?callback=?", function(data) {
eval(data);
});
}
});
function geoPlugin(data) {
$.cookie('loc_latitude', data.geoplugin_latitude, {expires: null});
$.cookie('loc_longitude', data.geoplugin_longitude, {expires: null});
$.cookie('loc_country', data.geoplugin_countryName, {expires: null});
$.cookie('loc_region', data.geoplugin_region, {expires: null});
$.cookie('loc_city', data.geoplugin_city, {expires: null});
$.cookie('loc_country_code', data.geoplugin_countryCode, {expires: null});
getWeather();
}
function getWeather() {
var latitude = $.cookie('loc_latitude');
var longitude = $.cookie('loc_longitude');
var loc_conditions = $.cookie('loc_conditions');
var loc_conditions_img = $.cookie('loc_conditions_img');
var loc_temp = $.cookie('loc_temp');
var loc_humidity = $.cookie('loc_humidity');
if (loc_conditions && loc_conditions_img) {
setConditions(loc_conditions, loc_conditions_img, loc_temp, loc_humidity);
} else {
var url = "http://ws.geonames.org/findNearByWeatherJSON?lat=" + latitude + "&lng=" + longitude + "&callback=?";
$.getJSON(url, function(data) {
var clouds = data.weatherObservation.clouds;
var weather = data.weatherObservation.weatherCondition;
var temp = data.weatherObservation.temperature;
var humidity = data.weatherObservation.humidity;
var conditions_img = getConditions(clouds, weather);
var conditions = '';
if (weather == 'n/a') {
if (clouds == 'n/a') {
conditions = 'clear';
} else {
conditions = clouds;
}
} else {
conditions = weather;
}
$.cookie('loc_conditions', conditions);
$.cookie('loc_conditions_img', conditions_img);
$.cookie('loc_temp', temp);
$.cookie('loc_humidity', humidity);
setConditions(conditions, conditions_img, temp, humidity);
});
}
}
function getConditions(clouds, weather) {
if (weather == 'n/a') {
switch (clouds) {
case 'n/a':
return 'sunny.gif';
case 'clear sky':
return 'sunny.gif';
case 'few clouds':
return 'partly_cloudy.gif';
case 'scattered clouds':
return 'partly_cloudy.gif';
case 'broken clouds':
return 'partly_cloudy.gif';
default:
return 'cloudy.gif';
}
} else {
weather = weather.replace('light ', '').replace('heavy ', '').replace(' in vicinity', '');
switch(weather) {
case 'drizzle':
return 'rain.gif';
case 'rain':
return 'rain.gif';
case 'snow':
return 'snow.gif';
case 'snow grains':
return 'sleet.gif';
case 'ice crystals':
return 'icy.gif';
case 'ice pellets':
return 'icy.gif';
case 'hail':
return 'sleet.gif';
case 'small hail':
return 'sleet.gif';
case 'snow pellets':
return 'sleet.gif';
case 'unknown precipitation':
return 'rain.gif';
case 'mist':
return 'fog.gif';
case 'fog':
return 'fog.gif';
case 'smoke':
return 'smoke.gif';
case 'volcanic ash':
return 'smoke.gif';
case 'sand':
return 'dust.gif';
case 'haze':
return 'haze.gif';
case 'spray':
return 'rain.gif';
case 'widespread dust':
return 'dust.gif';
case 'squall':
return 'flurries.gif';
case 'sandstorm':
return 'dust.gif';
case 'duststorm':
return 'dust.gif';
case 'well developed dust':
return 'dust.gif';
case 'sand whirls':
return 'dust.gif';
case 'funnel cloud':
return 'flurries.gif';
case 'tornado':
return 'storm.gif';
case 'waterspout':
return 'storm.gif';
case 'showers':
return 'storm.gif';
case 'thunderstorm':
return 'thunderstorm.gif';
default:
if (weather.indexOf("rain")) {
return 'rain.gif';
} else if (weather.indexOf("snow")) {
return 'snow.gif';
} else if (weather.indexOf("thunder")) {
return 'thunderstorm.gif';
} else if (weather.indexOf("dust")) {
return 'dust.gif';
} else {
return 'sunny.gif';
}
}
}
}
function setConditions(conditions, conditions_img, temp, humidity) {
var country = $.cookie('loc_country');
var region = $.cookie('loc_region');
var city = $.cookie('loc_city');
var loc_country_code = $.cookie('loc_country_code');
if (loc_country_code == 'US') {
var c = parseInt(temp);
var f = (c * 9/5) + 32;
temp = Math.round(f);
temp_type = "F";
} else {
temp_type = "C";
}
$("#weather_widget").append("<img id='weather_img' src='http://www.google.com/images/weather/" + conditions_img + "' />");
$("#weather_widget").append("<div id='weather_conditions'><p id='weather_country'>" + country + "</p><p id='weather_city'>" + city + ", " + region + "</p><p id='weather_temp'>Temp: " + temp + "° " + temp_type + "</p><p id='weather_hum'>Humidity: " + humidity + "%</p><p id='weather_cond'>" + conditions.substr(0, 1).toUpperCase() + conditions.substr(1) + "</p></div>");
$.cookie('loc_conditions', null);
$.cookie('loc_conditions_img', null);
$.cookie('loc_temp', null);
$.cookie('loc_humidity', null);
}</script>
<div id='weather_widget'></div>
(jQuery also needs to be loaded)