4 Replies Latest reply on Nov 15, 2012 12:05 PM by resdesign

    Weather Plugin

    haywoodandrew

      Hi all,

       

      I'd like to know how to add this simpleWeather plugin inside Edge Animate. I'm not strong on the code side of things, so any help would be much appreciated. Thanks in advance.

       

      - Andrew

       

      http://monkeecreate.github.com/jquery.simpleWeather/

        • 1. Re: Weather Plugin
          resdesign Adobe Community Professional & MVP

          Use as below. Container is a text box named container.

          yepnope(

          {

              nope:[

                  'js/jquery-ui-1.9.1.custom.min.js',

                  'js/jquery.simpleWeather-2.0.1.min.js',

               ],

              complete: init

          }

          );

           

           

          function init() {

                              var container = sym.$("container");

                                  $.simpleWeather({

                      zipcode: '76309',

                      unit: 'f',

                      success: function(weather) {

                              html = '<h2>'+weather.city+', '+weather.region+' '+weather.country+'</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>: '+weather.tomorrow.day+' '+weather.tomorrow.date+'<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="'+weather.link+'">View forecast at Yahoo! Weather</a></p>';

           

           

                              $("#weather").html(html);

                             container.html(html);

                      },

                      error: function(error) {

                             container.html("<p>"+error+"</p>");

                      }

              });

          }

          • 2. Re: Weather Plugin
            resdesign Adobe Community Professional & MVP

            Note: it takes a little time to load.

            For example, your text could say: Loading weather data.

            You could also add some interactivity where the user enter their zipcode and then it will load according to that.

            • 3. Re: Weather Plugin
              haywoodandrew Level 1

              Thank you so much. I've got it showing up. I'll just have to tweak the settings. Thanks again!

              • 4. Re: Weather Plugin
                resdesign Adobe Community Professional & MVP

                Here is complete code with input button for the zipcode. button is named btn, textfield is named container, input field is named zipcodetxt.

                You do not need jqueryUI.

                 

                yepnope(

                {

                    nope:[

                            'js/jquery.simpleWeather-2.0.1.min.js',

                     ],

                    complete: init

                }

                );

                 

                 

                 

                 

                function init() {

                                                        var Azipcode = sym.$("zipcodeTxt")

                          Azipcode.html("Enter your zipcode: ");

                          inputzipcode = $('<input />').attr({'type':'text', 'value':'', 'id':'zipcode'});

                          inputzipcode .css ('font-size', 14);

                          inputzipcode .css ('width', 350);

                          inputzipcode .css ('background-color', '#0a81fb');

                          inputzipcode .appendTo(Azipcode);

                          sym.$("btn").click(function(){

                                    var Newzipcode = inputzipcode.attr("value");

                                              var Newzipcode = inputzipcode.attr("value");

                                              var container = sym.$("container");

                                        $.simpleWeather({

                            zipcode: Newzipcode,

                            unit: 'f',

                            success: function(weather) {

                                    html = '<h2>'+weather.city+', '+weather.region+' '+weather.country+'</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>: '+weather.tomorrow.day+' '+weather.tomorrow.date+'<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="'+weather.link+'">View forecast at Yahoo! Weather</a></p>';

                 

                 

                                    $("#weather").html(html);

                                   container.html(html);

                            },

                            error: function(error) {

                                   container.html("<p>"+error+"</p>");

                            }

                    });

                          });

                 

                 

                }

                1 person found this helpful