tag:blogger.com,1999:blog-20330770740693774272024-03-08T14:13:36.840-08:00Code CollectionRosina Joseph Abihttp://www.blogger.com/profile/05552157408903614218noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-2033077074069377427.post-7588231269185113892010-04-20T19:02:00.000-07:002010-04-20T19:07:46.499-07:00JQUERY - Weather Widget for Your WebsiteThis code fetches data from a xml provided by google APIs, it requires jQuery and very little code of PHP/ASP. Actually i already done a project to put <span style="font-weight: bold;">State Weather</span> into website. I found the Simple PHP coding but here i show you how i convert the PHP coding to ASP.<br /><br /><span style="font-weight: bold;">If you have any comment or ways to improve it, just leave me a comment!</span><br /><br /><span style="font-weight: bold; color: rgb(0, 0, 153);">Write Some PHP</span><br /><br /><span style="font-size:85%;"><?php<br />header("content-type: text/xml");<br />$where = $_GET['where'];<br />$xmlData = file_get_contents("http://www.google.com/ig/api?weather=$where");<br />echo $xmlData;<br />?></span><br /><br /><span style="color: rgb(153, 0, 0); font-weight: bold;">OR..</span><br /><br /><span style="font-weight: bold; color: rgb(0, 0, 153);">Write Some ASP</span><br /><br /><span style="font-size:85%;"><%where = Request("where")<br /><br />url="http://www.google.com/ig/api?weather="&where<br />set Http = server.CreateObject("Msxml2.ServerXMLHTTP.3.0")<br />Http.Open "GET", url, False<br />Http.Send<br />Dim wxasmly<br />wxasmly = Http.responseText<br />response.write (wxasmly)<br />Set Http = nothing<br />%></span><br /><br />YES, that’s it, you only have to do this much PHP/ASP.<br />Save it as <span style="color: rgb(0, 0, 153); font-weight: bold;">google-weather.php</span> / <span style="color: rgb(0, 0, 153); font-weight: bold;">google-weather.asp</span><br /><br /><span style="color: rgb(0, 0, 153); font-weight: bold;">HTML and CSS – Whatever</span><br /><br /><span style="font-size:85%;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br /><title>Weather Widget</title><br /><style type="text/css"><br />body{font-family:Georgia,"Times New Roman",Times,serif;color:#FFFFFF;font-size:12px;margin:20px 0px 0px 80px;}<br />.rbroundbox { background: url(images/nt.gif) repeat; }<br />.rbtop div { background: url(images/tl.gif) no-repeat top left; }<br />.rbtop { background: url(images/tr.gif) no-repeat top right; }<br />.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }<br />.rbbot { background: url(images/br.gif) no-repeat bottom right; }<br /><br />/* height and width stuff, width not really nessisary. */<br />.rbtop div, .rbtop, .rbbot div, .rbbot {<br />width: 100%;<br />height: 7px;<br />font-size: 1px;<br />}<br />.rbcontent { margin: 6px; display:none;}<br />.rbroundbox { float:left; margin: 1em auto; }<br />.tag{font-size:9px;<br />font-weight:bold;<br />letter-spacing:0.2em;<br />text-transform:uppercase;}<br />.data{color:#CCCCCC; font-weight:normal;margin-left:10px}<br />#error{color:crimson;}<br />.small{font-size:9px;color:#999;margin-left:10px;}<br />#loading{display:none;color:#000;margin-left:10px;font-weight:bold}<br /></style><br /><script src="jquery-1.3.2.min.js"></script><br /><script type="text/javascript"><br />$(document).ready(function()<br />{<br />var childData = function(selector, arg)<br />{<br />return selector.find(arg).attr('data');<br />}<br />var sendAjax =function(where){$('#data, #error').stop().hide('fast'); $.ajax({<br />type: "GET",<br />data:"where="+where,<br />url: "<span style="font-weight: bold; color: rgb(0, 0, 153);">google-weather.php</span>",<br />success: function(data){<br /><br />forecast = $(data).find('forecast_information');<br />cCondition = $(data).find('current_conditions');<br /><br />city = childData(forecast, 'city');<br />if(city!=undefined)<br />{<br /> date = childData(forecast, 'forecast_date');<br /> condition = childData(cCondition, 'condition');<br /> tempC = childData(cCondition, 'temp_c');<br /> humidity = childData(cCondition, 'humidity');<br /> icon = childData(cCondition, 'icon');<br /> $('#city').text(city);<br /> $('#date').text(date);<br /> $('#condition').text(condition);<br /> $('#tempC').text(tempC+' C');<br /> $('#humidity').text(humidity);<br /> $('#icon').attr({'src':'http://www.google.com'+icon})<br /> $('#data').stop().show('fast');<br />}<br />else<br />{<br /> $('#error').stop().show('fast');<br />}<br />$('#loading').fadeOut();<br />}<br />});<br />}<br />$('#submit').click(function()<br />{<br />where = $('#place').val();<br />$('#loading').fadeIn();<br />sendAjax(where);<br />})<br />})<br /></script><br /></head><br /><body><br /><input name="where" type="text" id="where" /><input type="button" value="Weather Search" id="submit" /><span id="loading">Loading</span><p class="small">ex "kota kinabalu", "ranau sabah", "kota belud"</p><br /><div class="rbroundbox"><br /><div class="rbtop"><div></div></div><br /><div class="rbcontent tag" id="error">Sorry No Data Found!</div><br /> <div class="rbcontent tag" id="data"><br /> <span><img src="" id="icon" /></span><br /><br /><span>City -</span><span class="data" id="city"></span>&ltbr /><br /><span>Date -</span><span class="data" id="date"></span>&ltbr /><br /><span>Condition -</span><span class="data" id="condition"></span><br /><br /><span>Temperature -</span><span class="data" id="tempC"></span><br /><br /><span>Humidity -</span><span class="data" id="humidity"></span><br /><br /> </div><!-- /rbcontent --><br /><div class="rbbot"><div></div></div><br /></div><br /></body><br /></html></span><br /><br /><br /><br />You can save this html code as <span style="color: rgb(0, 0, 153);">index.html</span><br /><br /><span style="color: rgb(153, 0, 0);">ATTENTION!!!</span><br />You must to change your PHP/ASP link code inside your index.html<br /><br /><span style="color: rgb(153, 0, 0);">Example:</span><br />url: "<span style="font-weight: bold; color: rgb(0, 0, 153);">google-weather.php</span>", (if you used PHP code)<br />url: "<span style="font-weight: bold; color: rgb(0, 0, 153);">google-weather.asp</span>", (if you used ASP code)<br /><br /><span style="font-size:85%;">Hope can help,</span> <span style="font-weight: bold;">Let's Try..</span>Rosina Joseph Abihttp://www.blogger.com/profile/05552157408903614218noreply@blogger.com3