Sunday, 16 September 2012

Yahoo Weather

Yahoo feed using to show the weather details


<script type="text/javascript" language="javascript">

    $(function weather() {

 

        var city = document.getElementById("<%= TxtCity.ClientID %>").value;

 

        if (city != null && city != "") {

 

            var locationQuery = 'SELECT id FROM xml WHERE url="http://xoap.weather.com/search/search?where=' + city + ' " AND itemPath="search.loc"'

 

            var locationUrl = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(locationQuery) + '&format=json';

 

            $.getJSON(locationUrl + '&callback=?', function (data) {

                if (data.query != null && data.query != "" && data.query.results != null && data.query.results != "") {

 

                    var locationId = data.query.results.loc.id;

                    $('#weatherData .weather-location').append('Weather for ' + city + ' (' + locationId + ')');

                    var weatherUnit = 'c'; //c for Celcius, f for Fahrenheit     

                    var weatherQuery = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + locationId + '_' + weatherUnit + '.xml"';

                    var weatherUrl = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(weatherQuery) + '&format=json';

                    $.getJSON(weatherUrl + '&callback=?', function (data) {

                        var weatherForecasts = data.query.results.item.forecast;

 

                        if (weatherForecasts != null) {

                            var code = weatherForecasts[0].code;

                            $('input:textbox[id$=txtlocation]').val(city);

                            $('input:textbox[id$=txthigh]').val(weatherForecasts[0].high + '°C');

                            $('input:textbox[id$=txtlow]').val(weatherForecasts[0].low + '°C');

                            $('input:textbox[id$=txtfeelslike]').val(weatherForecasts[0].text);

                            //$('input:image[id$=imgicon]').attr('src','<TD><DIV title="' + weatherForecasts[0].text + '" /></TD>').find('DIV:last').css('background-position', '-' + (61 * code) + 'px 0px');

                            //                           $('divIcon').css({backgroundImage:'url(http://l.yimg.com/a/lib/ywc/img/wicons.png)',backgroundRepeat:'no-repeat',backgroundPosition:'+(61 * code)+'px 0px'});;

                            $('#divIcon').css({ backgroundImage: 'url(http://l.yimg.com/a/lib/ywc/img/wicons.png)', backgroundRepeat: 'no-repeat', backgroundPosition: '-1830px 0px', width: '61px', height: '45px' }); ;

 

                        }

                        else {

                            $('input:textbox[id$=txtlocation]').val('City not available');

                            $('input:textbox[id$=txthigh]').val('N/A');

                            $('input:textbox[id$=txtlow]').val('N/A');

                            $('input:textbox[id$=txtfeelslike]').val('N/A');

                        }

                    });

                }

                else {

 

                    $('input:textbox[id$=txtlocation]').val('City not available');

                    $('input:textbox[id$=txthigh]').val('N/A');

                    $('input:textbox[id$=txtlow]').val('N/A');

                    $('input:textbox[id$=txtfeelslike]').val('N/A');

                }

            });

        }

        else {

            var city = "Deland,FL";

 

            var locationQuery = 'SELECT id FROM xml WHERE url="http://xoap.weather.com/search/search?where=' + city + ' " AND itemPath="search.loc"'

 

            var locationUrl = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(locationQuery) + '&format=json';                       

               

                $.getJSON(locationUrl + '&callback=?', function (data) {

 

                    if (data.query != null && data.query != "" && data.query.results != null && data.query.results != "") {

 

                        var locationId = data.query.results.loc.id;

                        $('#weatherData .weather-location').append('Weather for ' + city + ' (' + locationId + ')');

                        var weatherUnit = 'c'; //c for Celcius, f for Fahrenheit     

                        var weatherQuery = 'SELECT * FROM rss WHERE url="http://xml.weather.yahoo.com/forecastrss/' + locationId + '_' + weatherUnit + '.xml"';

                        var weatherUrl = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(weatherQuery) + '&format=json';

                        $.getJSON(weatherUrl + '&callback=?', function (data) {

                            var weatherForecasts = data.query.results.item.forecast;

 

                            if (weatherForecasts != null) {

                                var code = weatherForecasts[0].code;

                                $('input:textbox[id$=txtlocation]').val(city);

                                $('input:textbox[id$=txthigh]').val(weatherForecasts[0].high + '°C');

                                $('input:textbox[id$=txtlow]').val(weatherForecasts[0].low + '°C');

                                $('input:textbox[id$=txtfeelslike]').val(weatherForecasts[0].text);

                                $('#divIcon').css({ backgroundImage: 'url(http://l.yimg.com/a/lib/ywc/img/wicons.png)', backgroundRepeat: 'no-repeat', backgroundPosition: '-1830px 0px', width: '61px', height: '45px' }); ;

                            }

                            else {

                                $('input:textbox[id$=txtlocation]').val('City not available');

                                $('input:textbox[id$=txthigh]').val('N/A');

                                $('input:textbox[id$=txtlow]').val('N/A');

                                $('input:textbox[id$=txtfeelslike]').val('N/A');

                            }

                        });

                    }

                    else {

                        $('input:textbox[id$=txtlocation]').val('City not available');

                        $('input:textbox[id$=txthigh]').val('N/A');

                        $('input:textbox[id$=txtlow]').val('N/A');

                        $('input:textbox[id$=txtfeelslike]').val('N/A');

                    }

                });

           

        }

    });

   

</script>

 

<style type="text/css">

    #weatherData TD

    {

        text-align: center;

        padding-left: 15px;

        padding-right: 15px;

    }

    #weatherData CAPTION

    {

        font-style: italic;

        font-weight: bold;

    }

    .weather-icon DIV

    {

        background-image: url(http://l.yimg.com/a/lib/ywc/img/wicons.png);

      

        width: 61px;

        height: 34px;

    }  

   

</style>

 

<div id="weatherData">

 

    <asp:Panel ID="pnlWeather1" DefaultButton="ImgBtnGo" runat="server">

        <div class="menu_bg_sd">

            <div class="menu_left_sd">

            </div>

            <div class="menu_right_sd">

            </div>

            <h4>

                Weather & Local Info</h4>

        </div>

        <div class="menu_bg_sd_ind">

            <div class="menu_left_sd_ind">

            </div>

            <div class="menu_right_sd_ind">

            </div>

            <div class="box_inner_m2">

                <table width="100%" border="0" cellspacing="2" cellpadding="1" style="background-color: #ffffff;">

                    <tr>

                        <td align="left" valign="middle" style="color: Red; font-size: 14px; height: 25px;

                            font-weight: bold;" colspan="2">

                            <asp:TextBox ID="txtlocation" Font-Bold="true" Height="25px" Font-Size="14px" ForeColor="#FF6600" BorderStyle="None" ReadOnly="true" runat="server"></asp:TextBox><br />

                        </td>

                    </tr>

                    <tr>

                        <td align="right" style="height:50px;">

 

                            <div id="divIcon" >

                            </div>

                        </td>

                       

                    </tr>

                    <tr>

                    <td align="right" valign="middle">Maximum:

                        </td>

                   <td  align="left" valign="middle">

                                <asp:TextBox ID="txthigh" BorderStyle="None" Font-Size="11px" ReadOnly="true" Width="50px" runat="server"></asp:TextBox>

                        </td>

                    </tr>

                     <tr>

                     <td align="right" valign="middle">Minimum:

                        </td>

                   <td  align="left" valign="middle">

                            <asp:TextBox ID="txtlow"  BorderStyle="None" Font-Size="11px" ReadOnly="true" Width="50px" runat="server"></asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                        <td align="right" valign="middle">

                            Feels Like:

                        </td>

                        <td>

                            <asp:TextBox ID="txtfeelslike" Width="110px" Font-Size="11px" BorderStyle="None" ReadOnly="true" runat="server"></asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                    <td>

                    &nbsp;

                    </td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center" valign="middle">

                            <asp:TextBox ID="TxtCity" ValidationGroup="weather1" MaxLength="50" Width="130px"

                                Height="15px" runat="server"></asp:TextBox>

                            <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TxtCity"

                                WatermarkText="City or Zipcode" WatermarkCssClass="watercolor" runat="server">

                            </cc1:TextBoxWatermarkExtender>

                            <asp:ImageButton ID="ImgBtnGo" ToolTip="Go" runat="server" CausesValidation="false"

                                ValidationGroup="weather1" OnClientClick="weather();" ImageAlign="AbsMiddle"

                                ImageUrl="/_layouts/Images/VCSB/weather_go.jpg" Width="31" Height="21" />

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2" id="imgicons">

                            &nbsp;

                        </td>

                    </tr>

                </table>

            </div>

        </div>

        <div class="menu_bg_sd_bot">

            <div class="menu_left_sd_bot">

            </div>

            <div class="menu_right_sd_bot">

            </div>

        </div>

    </asp:Panel>

</div>

 

 
 

No comments:

Post a Comment

SharePoint online - Get List-item attachments and Display to div

Step 1 : Create a List ex: TestList and attach few images Step 2 : Copy and Pastet the below coding in App.js var  Items =  null ; ...