Friday, September 28, 2012

Jquery cross domain AJAX requests and HTML parsing list of image src using JQUERY MAP

Recently I have been working with Wikipedia, Wikimedia and had to do AJAX requests and parsing the returned HTML.

Javascript and JQUERY have problems when you try an AJAX query to cross-domain sites. I read the following article by Micahs

Making Cross Domain jQuery AJAX Calls and followed the method suggested using YQL and seems to work fine. I have repeated below the code mentioned in the article for reference.

//feel free to add querystring vars to this
var myurl="";
//make the call to YQL
//this data.results[0] is the return object you work with,
//if you actually want to do something with the returned json
} else {
var errormsg = '
Error: could not load the page.
//output to firebug's console
//use alert() for other browsers/setups

I have given below an example of parsing all the image source in a list of images.

The list item code snippet is given below

    <div class="thumb" style="width: 150px;"><div style="margin:15px auto;"><a href="//" class="image"><img alt="Adrien Ysenbrandt - Virgin and Child with Two Angels in a Landscape - Walters 37266.jpg" src="//" width="102" height="120" /></a></div></div>

After alert(data.results[0]); you can do something like the following to get the  thumb html in the list:

 var thumb_array_img = $(('.thumb img'), result);

To get all the src links in an array use the JQUERY map function like the following code:

image_thumb_array = [];

image_thumb_array = $(thumb_array_img).map(function ()

                   { return $(this).attr("src"); });

Wikimedia Wikipedia parsing data and machine readable code useful links

The Wikipedia, Wikimedia API has lot of information but not well documented. I have been working with that to get some data and parse it. I found the following links very helpful.

  1. API:Main page
  2. MediaWiki API documentation page
  3. API sandbox
  4. Commons:Machine-readable data
  5. Category:Infobox templates
  6. What is the Full URL of the images returned by a wikipedia query...
  7. API:Query
  8. Call Wikipedia API using jQuery
  9. Manual:Parameters to index.php
  10. Template:Information
  11. API:Properties
  12. API:Lists

Wikipedida Wikimedia query returns 403 forbidden

I had the following webclient request 
 WebClient serviceRequest = new WebClient();
var JsonResponse = serviceRequest.DownloadString(new Uri(urselected));

Where urselected was the REST query string. The query worked fine in my browser but returned 403 forbidden error. I found the following post which addresses the problem:

Wikipedia query returns error 403

Modified my code as follows and it worked find:

WebClient serviceRequest = new WebClient();
           serviceRequest.Headers.Add("user-agent", "Silver Azure");

           var JsonResponse = serviceRequest.DownloadString(new Uri(urselected));

Friday, September 7, 2012

Wikipedia and Wikimedia commons html content

Wikipedia and Wikimedia Commons have excellent information. I am building a few applications using the information from these sites. I wanted to get some portions of the html markup, for example the image source, title, thumbnail etc. I tried the Media Wiki API and was able to get the file names by a query like this.

This produced the following output

<?xml version="1.0"?>
-<api>-<query>-<categorymembers><cm title="File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Obverse.jpg" ns="6" pageid="18842729"/><cm title="File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Reverse.jpg" ns="6" pageid="18842732"/><cm title="File:Ethiopian - One of Two Coins Depicting Ousanas and an Anonymous King - Walters 59794.jpg" ns="6" pageid="18809697"/><cm title="File:Greek - Apollo - Walters 59533.jpg" ns="6" pageid="18787772"/><cm title="File:Greek - Athena - Walters 59519 - Obverse.jpg" ns="6" pageid="18801612"/><cm title="File:Greek - Athena - Walters 59519 - Reverse.jpg" ns="6" pageid="18801616"/><cm title="File:Greek - Athena - Walters 59702 - Back.jpg" ns="6" pageid="18787788"/><cm title="File:Greek - Persephone - Walters 59693.jpg" ns="6" pageid="18787786"/><cm title="File:Greek - Tetradrachme with King Nicodemus II - Walters 59723 - Back.jpg" ns="6" pageid="18787795"/><cm title="File:Matthes Gebel - Medal of Arnold and Nicholas Wenck - Walters 59480 - Obverse.jpg" ns="6" pageid="18839416"/></categorymembers></query>-<query-continue><categorymembers cmcontinue="file|7e524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a50470a524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a5047|18787799"/></query-continue></api>

You can use the file name to build a url like the following to get the image info

However I wanted to get the title, thumbnail url etc. After some research I hit on this discussion How to get HTML content text of a Wikipedia Page (via Wikipedia API)? and then this page Manual:Parameters to index.php.

This led to the following query which gives all the relevant html markup:

Sunday, September 2, 2012

Wikimedia Commons queries to get image data

I am developing application to get images from Wikimedia Commons which is a big repository of excellent images. The query API is not well documented. I researched and came up with the following queries to get the file locations of images.

Suppose I want to get the images in the Category Flags of United States, I will do the following:

which produces the following XML output for the first 10 items.

<?xml version="1.0"?>
-<api>-<query>-<categorymembers><cm title="Category:Porifera" ns="14" pageid="13371"/><cm title="Category:Riftia pachyptila" ns="14" pageid="8805563"/><cm title="File:1991 benthos-achtern02 hg.jpg" ns="6" pageid="3321991"/><cm title="File:Abra alba.jpg" ns="6" pageid="333239"/><cm title="File:Ammonia tepida.jpg" ns="6" pageid="706636"/><cm title="File:Aonides paucibranchiata.jpg" ns="6" pageid="396315"/><cm title="File:Aphrodita aculeata (Sea mouse).jpg" ns="6" pageid="3610614"/><cm title="File:Aphrodita aculeata.jpg" ns="6" pageid="1525478"/><cm title="File:Arenicole système.jpg" ns="6" pageid="4258545"/><cm title="File:Asterias rubens.jpg" ns="6" pageid="364648"/></categorymembers></query>-<query-continue><categorymembers cmcontinue="file|42454e5448494320464f52414d494e4946455241532e4a5047|2080936"/></query-continue></api>

to  get an image you have to use the will take you to the Aonides paucibranchiata image!

if you query|42454e5448494320464f52414d494e4946455241532e4a5047|2080936

you get the following output  which are the next 10 items, and so on

<?xml version="1.0"?>
-<api>-<query>-<categorymembers><cm title="File:Benthic foraminiferas.jpg" ns="6" pageid="2080936"/><cm title="File:Benthic GLERL 1.jpg" ns="6" pageid="2143998"/><cm title="File:Bentos kasarek.jpg" ns="6" pageid="16992357"/><cm title="File:Borstenwurmer des Meeres.png" ns="6" pageid="5229875"/><cm title="File:Branchiostoma lanceolatum.jpg" ns="6" pageid="5712836"/><cm title="File:Capitella capitata.jpg" ns="6" pageid="398359"/><cm title="File:Cirratulus cirratus.jpg" ns="6" pageid="398775"/><cm title="File:Crabmuss 600.jpg" ns="6" pageid="292191"/><cm title="File:Crangon crangon (dorsal).jpg" ns="6" pageid="10320338"/><cm title="File:Crangon crangon.jpg" ns="6" pageid="470098"/></categorymembers></query>-<query-continue><categorymembers cmcontinue="file|4352494252494e4f50534953204645524e414c44492e4a5047|3307271"/></query-continue></api>

Other useful formats


format=jsonfm produces a html output of json format.


  1. API reference

  2. API:Main page

  3. API:Tutorial

Tuesday, August 28, 2012

visual studio express 2012 for web installation experience or frustration !

I thought I would share my experience in installing visual studio express for web installation. The indication regarding installation was not very good in the beginning of the installation. So I thought I will outline my experience which might be useful for some one!

  1. Downloaded the ISO file from Visual Studio 2012 downloads
  2. Double clicked on the file in Explorer. It prompted me to  burn   a disk which I did.
  3. 9:40 Am: Started installation from disk.
  4. Progress bar was stuck-up in installing .net 4.5
  5. Thought of canceling, but went and had a coffee
  6. 10:17 Am: Progress bar was still stuck, no indication and suddenly finished and prompted for  restart
  7. After restart, seemed to be showing progress bar with meaningful indication
  8. 10:35 Am Microsoft Visual Studio Express 2012 for web-ENU takes a long time: progress bar struck about 1/3rd
  9. 10:40 AM: progress bar moved to 1/2!
    the bottom assembly installation names started changing faster!
  10. 10:45AM: Setup Successful !
  11. When you open the Visual Studio Express it prompts you to get a key which I did.

My system
gateway NE56R13u
Celeron 1.7 GHz, 64 bit, 4 GB RAM,
Windows 7 ultimate service pack 1

CSS3 transitionend event with cross browser compatability using Javascript

I had 2 animations, the first one would last 10 seconds and the second one had to start from the time the first one ends. After some research I found the following solution:

First animation:

canvas1 =  document.getElementById("myCanvas") ;

canvas1.addEventListener('transitionend',     spin_finished, false);

---Start First animation

Second animation:

function spin_finished() {

       canvas1.removeEventListener('transitionend', spin_finished, false);

         - start second animation


The removeEventListener is required to make sure the transitionend event happens only once.

Then I ran into cross browser naming convention problem because each browser calls the transitionend event differently. Then I ran into this elegant solution by NeilJS


var transEndEventNames = {

    'WebkitTransition': 'webkitTransitionEnd',

    'MozTransition': 'transitionend',

    'OTransition': 'oTransitionEnd',

    'msTransition': 'MSTransitionEnd',

    'transition': 'transitionend'


transEndEventName = transEndEventNames[Modernizr.prefixed('transition')]; // bind event listener to transEndEventName eg:


So the revised code looks like this after inserting the previous snippet:

First animation:

canvas1 =  document.getElementById("myCanvas") ;


---Start animation

Second animation:

function spin_finished() {

canvas1.canvas.removeEventListener(transEndEventName, spin_finished, false);

- start second animation


Works great on Firefox, Safari, Opera and Chrome!


  1. Cross-browser CSS3 transitionend event for event listeners by NeilJS

  2. Css3 Transitions Tutorial : Javascript

  3. Quick Tip: CSS3 Transition End Event

Friday, August 24, 2012

How to resolve IPhone 3 HTML5 canvas fillText not working

I am writing a HTML5 canvas applications which has some text in it to be written by the fillText command. This worked well in Safari, Firefox, Ipad but would not work in Iphone 3. Then I found the solution in this discussion:

iPhone/iPad HTML5 Canvas fillText problem.

Downloaded  strokeText.js and implemented with success as per instructions given in the downloaded document. It works now in Iphone 3 along with Safari, Firefox, Opera and even IE9!


<script src="js/strokeText.js" type="text/javascript"></script>



if (check_textRenderContext(context)) {
context.strokeText(text, text_xoffset, text_yoffset, font_size);

Thursday, August 23, 2012

Jquery Mobile gradient background for content

I have given below the HTML snippet and the CSS file I used for adding a gradient to the Content div.

I  used the gradient CSS code from this excellent site:

Ultimate CSS Gradient Generator by ColorZilla.



<div data-role="content"  class="main_div_blue" style="overflow:hidden;"  >  


.main_div_blue {

background: rgb(208,228,247); /* Old browsers */

background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */


jquerymobile dynamically changing button text and multiple buttons in Header

Couple of interesting discussions.

I had a button which had to toggle between Spin Start and   Spin Stop text. When I implemented this in JQuery Mobile after the first press the button and text sizes became smaller. Then I came across this fix given in

 jquerymobile dynamically changing text for button issue.

I did the fix suggested by Hexagonal

$('#svbutton .ui-btn-text').text(currentTimeString); which worked like a charm.

I wanted to have the title, Spin, Info and Settings button in the header. Unfortunately this is not possible as described in this discussion

Adding more buttons to header

So I had to move the Spin button to the Content section.

Tuesday, August 21, 2012

HTML Javascript IDE for development and Tips for Developing with Visual Studio Express

When I have a web page development project or issue, I try to divide the project into smaller tasks and do experimental web pages to try out new ideas or resolve bugs.

So I needed a development IDE for HTML, Javascript and CSS. Tried Aptana Studio, Microsoft Expression Web 4 and Visual Studio Express, netbeans.

Found Visual Studio 2010 Express Products to be  the best. I have to warn you that I am little bit prejudiced because I am very familiar with Visual Studio because of my C#, .net, Silverlight development experience.

What I like about the IDE is it has some Intellisense, you can collapse divs in HTML . For example if you want to add a reference like the following

<script src="js/triangle_1.js" type="text/javascript"></script>

you can just drag the file from the folder view and drop it in your html file.

I did not want to create a web site for the small files I work with. I already had a few HTML files and associated folders with Javascript and CSS files in a folder with name JQM1. I asked the Visual Studio Express to start a new empty C# web solution and pointed to the JQM1 folder. It said you already have a project, I said yes and the folders showed up.

You can also look at the html pages using the File Web browser option. Since I work a lot with CSS3, I have designated Safari as my default browser and it works fine!

Try it , you may like it. One warning though the installation process took more than an hour and there is a registration process for Visual Studio Express using windows live id, but it is free!

Excellent reference Visual Studio shortcut keys

Sunday, August 19, 2012

CSS prefix issue and Modernizr Prefixed

If you are doing any CSS development using Javascript you must be aware of prefixes like -moz-transform, -webkit-transform, -o-transform required by Firefox, Safari and Opera. Safari and Chrome use the same –webkit- prefix.

You can use  Modernizr to simplify the task.

the article Modernizr Prefixed by Andi Smith is a definite read.

In this article Andi explains how you can use Modernizr to simplify your life.

Typical usage:

In HTML page

<script src="js/modernizr.js"></script>

In the Javascript

var car_cont=document.getElementById('carousel_container') ;[Modernizr.prefixed('perspective')]  = '1100px';

This is equivalent to the CSS statement

-webkit-perspective: 1100px;
moz-perspective: 1100px;
-o-perspective: 1100px; ----and so on.

Some more references from W3Schools

  1. CSS3 Browser Support Reference
  2. CSS Reference
  3. example: CSS3 perspective Property

CSS 3d Transforms for Safari, Chrome and Firefox

I am now developing a 3d Carousel for use in different browsers. It uses 3d transforms available in Safari, Chrome and Firefox. Unfortunately IE 9 and Opera do not seem to support it.

The following references are excellent resources.

  1. Using 2D and 3D Transforms is an excellent place to start
  2. CSS3 Transitions, Transforms and Animation Tutorial has excellent tutorial.
  3. Intro to CSS 3D transforms has very good step by step approach which explains the fundamentals of transforms and how to implement it with CSS3.
  4. Cloud Carousel - A 3d Carousel in Javascript does not use CSS 3d and done in Javascript
  5. CSS Infos is an excellent reference site.
  6. Ceaser CSS EASING ANIMATION TOOL is worth visiting.
  7. CSS3 tools is also worth visiting.
  8. Rotating Image Using JQuery has also some introductory information.

JQuery Mobile Interesting Links to get started

If you are looking for a good platform to design applications for Iphone, Ipad, Android and Windows phone, you should definitely consider a browser based approach using JQuery Mobile. Jquery Mobile has very good user interface and page transition mechanisms.

Jquery Mobile 1.2. 0 Alpha has been released.

Jquery Mobile Docs has excellent documentation

Quick start guide is a good place to start.

Eric Sarrion has an excellent  The jQuery Mobile tutorial which has lot of useful information about how to construct basic pages, buttons, sliders etc.

10 handy jQuery mobile tips and snippets to get you started has excellent tips.

You can also look at 50 jQuery Mobile Development Tips.

Monday, August 6, 2012

Moved To RTP

Moved to North Carolina, RTP area. Have been busy with the move and other projects, hence could not write the blog. Now working on HTML5 and JQuery Mobile. Stay tuned for new blogs.

Android emulator installing Google APIs

Tried installing google APIs with the Android SDK manager  and got permission denied message.

Run the Android SDK manager by right clicking on the context menu and it works.


Installing Android SDK packages