Submit your widget

simple jQuery Weather

Created 11 years ago   Views 13838   downloads 2787    Author monkeecreate
simple jQuery Weather
View DemoDownload
Share |

This demo shows how easy it is to display a simple weather widget that is clean and customizable. This is the basic usage showing only the current weather and an image. simpleWeather does not return any html or css classes which lets you do with the data as you please. There is much more available weather data which is detailed below. There are two examples in the download for more usage.

Basic Usage

            location: 'wichita falls, texas',
            unit: 'f',
            success: function(weather) { ... },
            error: function(error) { ... }

Complete Usage

            zipcode: '76309',
            unit: 'f',
            success: function(weather) {
                    html = '<h2>'', '+weather.region+' ''</h2>';
                    html += '<p><strong>Today\'s High</strong>: '+weather.high+'&deg; '+weather.units.temp+' - <strong>Today\'s Low</strong>: '+weather.low+'&deg; '+weather.units.temp+'</p>';
                    html += '<p><strong>Current Temp</strong>: '+weather.temp+'&deg; '+weather.units.temp+' ('+weather.tempAlt+'&deg; C)</p>';
                    html += '<p><strong>Thumbnail</strong>: <img src="'+weather.thumbnail+'"></p>';
                    html += '<p><strong>Wind</strong>: '+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+' <strong>Wind Chill</strong>: '+weather.wind.chill+'</p>';
                    html += '<p><strong>Currently</strong>: '+weather.currently+' - <strong>Forecast</strong>: '+weather.forecast+'</p>';
                    html += '<p><img src="'+weather.image+'"></p>';
                    html += '<p><strong>Humidity</strong>: '+weather.humidity+' <strong>Pressure</strong>: '+weather.pressure+' <strong>Rising</strong>: '+weather.rising+' <strong>Visibility</strong>: '+weather.visibility+'</p>';
                    html += '<p><strong>Heat Index</strong>: '+weather.heatindex+'"></p>';
                    html += '<p><strong>Sunrise</strong>: '+weather.sunrise+' - <strong>Sunset</strong>: '+weather.sunset+'</p>';
                    html += '<p><strong>Tomorrow\'s Date</strong>: '' ''<br /><strong>Tomorrow\'s High/Low</strong>: '+weather.tomorrow.high+'/'+weather.tomorrow.low+'<br /><strong>Tomorrow\'s Forecast</strong>: '+weather.tomorrow.forecast+'<br /> <strong>Tomorrow\'s Image</strong>: '+weather.tomorrow.image+'</p>';
                    html += '<p><strong>Last updated</strong>: '+weather.updated+'</p>';
                    html += '<p><a href="''">View forecast at Yahoo! Weather</a></p>';

            error: function(error) {

Read more:

Tag: weather