Script Diaries: November 2009

Thursday, November 5, 2009

Lesson 4 - Advanced Twitter Widget Using Multiple Calls

This tutorial has moved back to Code Diaries.

You can view it there at Funky Twitter Thoughts Widget Using Yahoo and Twitter JSON APIs

Lesson 3 - Search Widget that Displays Images and Related Keywords

Summary
This is lesson 3 of 4. In this lesson we will use Yahoo's image search API to display images in a circle. We will then use Yahoo's "context" API to extract relevant keywords. This widget makes two seperate calles to the Yahoo API. This is done by loading itself into an "iframe" and then using the "parent" object like parent.callAFunction() to deliver the results. Back to the Lesson Index.

Explanation
First let us have a quick look at the code.

You can download a zipped version of all the lessons here

Back to the Lesson Index

Lesson 2 - Weather and News Widget Using RSS Reader

Summary
This is lesson 2 of 4. For this example we will use Google's RSS feed API to decode rss feeds and display them on a site. This widget will display weather taken from Yahoo's weather RSS feed and local news taken from two selected newspaper RSS feeds. View this Widget !!!

Explanation
First let us have a quick look at the code. First let's have a look at the weather.js file.

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 3.         Free to use and modify.*/
 4.         
 5. google.load("feeds", "1");
 6. var YW_ContainerOk=false;
 7. function YW_GetWeatherResults(result){
 8.     if (!result.error){
 9.         s="<table  style=\"border-width:1px;border-collapse:collapse;border-style:solid; "+
10.             "border-color:#6D7B8D;width:1px;height:1px\" bgcolor=\"#ffffff\"><tbody><tr><td>"+
11.             result.feed.entries[0].content.match(/<img .*?>/)+"</td></tr></tbody></table>";
12.         document.getElementById("YW_weather_container").innerHTML="<b>"+result.feed.entries[0].title+
13.             "</b><br/>"+result.feed.entries[0].content.replace(/<img .*?>/,s);
14.     }
15. }
16. function YW_CallWeather(hrf){
17.     if(!YW_ContainerOk){
18.         document.write("<div id=\"YW_weather_container\">There is no weather information available "+
19.         " for this location at this time</div>");
20.         YW_ContainerOk=true;
21.     }
22.     (new google.feeds.Feed(hrf)).load(YW_GetWeatherResults);
23. }

Hide line numbers

Now let's have a look at the newsreader.js file

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 3.         Free to use and modify.*/
 4.         
 5. google.load("feeds", "1");
 6. var NWS_ContainerOk = false;  
 7. function NWS_GetNewsResults(result){
 8.     if (!result.error){
 9.         for(i=0;i<result.feed.entries.length;i++){
10.             tmprs = result.feed.entries[i];
11.             document.getElementById("gansyman").innerHTML+="<a href=\""+tmprs.link+"\">"+
12.                 tmprs.title+"</a><br/>"+tmprs.content.substring(0,100)+"<br/>";
13.         }
14.     }
15.     else
16.         alert(result.error.message);
17. }
18. function NWS_CallNews(hrf, num){
19.     if(!NWS_ContainerOk){
20.         document.write("<div id=\"gansyman\"></div>");
21.         NWS_ContainerOk= true;
22.     }
23.     var feed = new google.feeds.Feed(hrf)
24.     feed.setNumEntries(num);
25.     feed.load(NWS_GetNewsResults);
26. }

Hide line numbers

Finally let us have a look at how you can embed this in an html page.

 1. <html>
 2.         <!--    
 3.         scriptdiaries.blogspot.com 
 4.         Righteous Ninja aka Ping Ching.
 5.         Free to use and modify.-->
 6. <head>
 7. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA40MrnqI6U_ttOMK0wTpPSRQD6263AO_J-cN-o5MVlTXsf8kbcBRDZ3IoIMGa4lhUHoT28Z8OHamBhA"></script>
 8. <script type="text/javascript" src="weather.js"></script>
 9. <script type="text/javascript" src="newsreader.js"></script>
10. </head>
11. 
12. <body>
13. <h2>Weather</h2>
14. <table width="100%">
15.     <tbody>
16.     <tr>
17.         <td>
18.         <select onChange="YW_CallWeather(this.options[this.selectedIndex].value)">
19.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c">Colombo</option>
20.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0002&u=c">Moratuwa</option>
21.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0003&u=c">Negombo</option>
22.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0004&u=c">Sri Jayawardenepura</option>
23.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0005&u=c">Katunayake</option>
24.         </select>
25.         </td>
26.     </tr>
27.     <tr>
28.         <td>
29.             <script>
30.             YW_CallWeather("http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c");
31.             </script>
32.         </td>
33.     </tr>
34.     </tbody>
35. </table>
36. 
37. <h2>News</h2>
38. <script>
39. NWS_CallNews("http://www.dailymirror.lk/DM_BLOG/RSS/FrontPageRSS.xml",3);
40. NWS_CallNews("http://www.lankanewspapers.com/news/rss.xml",3);
41. </script>
42. 
43. </body>
44. </html>

Hide line numbers

You can download a zipped version of all the lessons here

Back to the Lesson Index

Lesson 1 - Sexy Widget That Displays a Sexy Quote and a Sexy Picture

Summary
This is lesson 1 of 4. It is the simplest form of widget possible. For this widget we will create some simple javascript that will randomly display an image and a quote. The images and quotes will be held in two arrays. The javascript Math.random function will be used to select an image. View this Widget !!!

Explanation
First let us have a quick look at the code. This is the simplest example so the code is very straigntforward.

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 3.         Free to use and modify.*/
 4.         
 5. var SXY_cutegirls = new Array("http://codediaries.com/widgets/cutelnka/wid_cutelnka_anarkalli.jpg",
 6.                         "http://codediaries.com/widgets/cutelnka/wid_cutelnka_nadeeka.jpg",
 7.                         "http://codediaries.com/widgets/cutelnka/wid_cutelnka_derana.jpg");
 8. 
 9. var SXY_cutequotes = new Array(
10.     "Sex without love is an empty experience, but as empty experiences go, it's one of the best.",
11.     "Sex is not the answer. Sex is the question. Yes is the answer.",
12.     "Sex without love is an empty experience, but as empty experiences go, it's one of the best.",
13.     "The sex was so good that even the neighbors had a cigarette.",
14.     "The difference between pornography and erotica is lighting.",
15.     "Sex is like a bridge game; if you don't have a good partner, you better have a good hand."
16. );
17. 
18. function SXY_DoSexyWidget(){
19.     document.getElementById('cutelankapanel').innerHTML=
20.         "<center>"+
21.         "<img src=\""+SXY_cutegirls[Math.round((SXY_cutegirls.length-1)*Math.random())]+"\"/>"+
22.         "<br/>"+
23.         SXY_cutequotes[Math.round((SXY_cutequotes.length-1)*Math.random())]+
24.         "</center>";
25. }

Hide line numbers

Now let us look at how you would embed this in a web page

 1. <html>
 2.         <!--    
 3.         scriptdiaries.blogspot.com 
 4.         Righteous Ninja aka Ping Ching.
 5.         Free to use and modify.-->
 6. <head>
 7. 
 8. <style  TYPE="text/css">
 9. .cutelanka_quotes{font-family:arial;font-size:11px;color:#ffffff;}
10. </style>
11. 
12. <script type="text/javascript" src="sexywidget.js"></script>
13. 
14. </head>
15. <body>
16. 
17.     <table border="0" cellpadding="0" cellspacing="0" width="190px">
18.         <tbody>
19.             <tr><td background="frame_top.gif" height="10px"></td></tr>
20.             <tr><td bgcolor="#000000" class="cutelanka_quotes"><div id="cutelankapanel" width="100%"></div></td>
21.             </tr><tr><td background="frame_bottom.gif" height="10px"></td></tr>
22.         </tbody>
23.     </table>
24. <script>
25. SXY_DoSexyWidget();
26. </script>     
27. </body>
28. </html>

Hide line numbers

You can download a zipped version of all the lessons here

Back to the Lesson Index

Sexy Random Image and Quote Widget

Learn more about this Widget
Super sexy widget that displays a random hot girl with a sexy and funny quote. Refresh page for a different quote and image. This can be easily changed to include any images and any number of quotes. Pure javascript only.

Wednesday, November 4, 2009

News and Weather Widget - Sri Lanka

Sri Lanka Weather

Sri Lanka News

Learn more about this widget
A RSS feed widget that displays the news and weather in Sri Lanka. This uses Google's feed API, Yahoo's weather RSS feed and the feeds from two Sri Lankan Newspapers. This widget can be easily adapted to display news and weather from any country or a combination of countries.

What is on Kim Kardashians Mind? Twitter Thoughts Widget

Learn more about this widget
A twiter widget that displays what has been on Kim Kardashian's mind for the past week. This widget can be easily adapted to display any celebrity or entity on twittter.

Sunday, November 1, 2009

What is on Paris Hilton's Mind? Twitter Thoughts Widget

Learn more about this widget
A twiter widget that displays what has been on Paris Hilton's mind for the past week. This widget can be easily adapted to display any celebrity or entity on Twittter. Pure Javascript only. Using Twitter and Yahoo APIs.

scriptdiaries and sister sites
Perl basics & faq	Javascript need to know	DIY Widgets!

Script Diaries

Thursday, November 5, 2009

Lesson 4 - Advanced Twitter Widget Using Multiple Calls

Lesson 3 - Search Widget that Displays Images and Related Keywords

Lesson 2 - Weather and News Widget Using RSS Reader

Lesson 1 - Sexy Widget That Displays a Sexy Quote and a Sexy Picture

Sexy Random Image and Quote Widget

Wednesday, November 4, 2009

News and Weather Widget - Sri Lanka

Sri Lanka Weather

Sri Lanka News

What is on Kim Kardashians Mind? Twitter Thoughts Widget

Sunday, November 1, 2009

What is on Paris Hilton's Mind? Twitter Thoughts Widget

Search Script Diaries

Blog Archive

My Favourite Blogs