Home > JavaScript > JavaScript – weather

JavaScript – weather

weather
// weather plugin
(function($){
    // Briefcase of variable
    var _css;
    var _html;
    var _tmp;
    var _tmp0;
    var _tags;

    // Ajax Query
    $.fn.shweather = function( param ){
        _root = $(this);
        /*
         * we could have done this in js the file weather.php is just doing this
         * header( "content-type: text/xml" );
         * $html = file_get_contents( 'http://www.google.com/ig/api?weather=Huizingen,Belgium&hell=?' );
         * echo $html;
         *
         */
        $.ajax ({
            type: 'GET',
            url:  'weather.php',
            data: 'q=' + param.caption,
            success: function( msg ){
                // current details
                $(msg).find( 'current_conditions' ).children().each( function(i,v) {
                    //alert ( source );
                    _tags = ( $(v).get(0).tagName ) ;
                    switch(_tags){
                        case 'icon':
                                var source = $(v).attr( 'data' );
                                source = source.replace( '/ig/images/weather/' , 'images/'  );
                                _tmp += '<div><img src="' +  source + '" width="100%" height="100%" /></div>';
                        break;
                        case 'temp_c':
                                var source = $(v).attr( 'data' );
                                //source = source.replace( '/ig/images/weather/' , 'images/'  );
                                _tmp = '<div>' + source  +'&deg;</div>';

                        break;
                    }
                });

                // next day
                $(msg).find( 'forecast_conditions' ).next( 'forecast_conditions' ).children().each( function( i,v ){
                    // var source = $(v).attr( 'data' );
                    // source = source.replace( '/ig/images/weather/' , 'images/'  );
                    // alert the source > replace the text in, to text out
                    // alert ( source );
                    _tags = ( $(v).get(0).tagName ) ;
                    switch(_tags){
                        case 'icon':
                            var source = $(v).attr( 'data' );
                            source = source.replace( '/ig/images/weather/' , 'images/'  );
                            _tmp0 += '<div><img src="' +  source + '" width="100%" height="100%" /></div>';
                        break;
                        case 'day_of_week':
                            var source = $(v).attr( 'data' );
                            //source = source.replace( '/ig/images/weather/' , 'images/'  );
                            _tmp0 = '<div>Morgen</div>';
                        break;
                    }
                });

                // pain the view
                _css  = '<style> .icon { width:60px; height:55px; padding:3px;border:solid 1px #aaaaaa; }  .tempc {color:#5a5a5a; font-weight:bold;  }  </style>';
                _html = '<table width="100%"><tbody><tr><td>' + _tmp +  '</td>\
                         <td>' + _tmp0 + '</td></tr></tbody> <tbody><tr> <td colspan=2 align="center"> <input style="border:solid 1px #cccccc;font-size:10px;width:100%;" name="caption"  /> </td> </tr></tbody> </table>';
                // alert ( _html );
                _root.empty().append( _css + _html );
                _root.find('[name="caption"]').val( param.caption );
                _root.find('[name="caption"]').dblclick( function(){_root.shweather({caption: $(this).val() });  });

            }
        });
    }
})(jQuery);

$('#weather').shweather({caption:'Huizingen,Belgium '});

Download:
http://dpaste.de/gOXE/
Advertisements
Categories: JavaScript Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: