This article is written to provide introductory information about mobile web pages and ajax.

In this part IV, we will create a simple mobile web page that uses Ajax/DHTML.If you need basic information about Ajax/DHTML, read the following links

• Wikipedia - Ajax programming
• W3schools JavaScript and DHTML
• DynamicDrive code sample

 We will create a page that allows users to view a series of photo images, in a light-box manner. We will use lightbox2, code written by Lokesh Dhakar. Only a few lines of code is added to create this example.

We can use a web-based iPhone simulator to view this page. It is at http://www.iphonetester.com/.To view the example, enter http://www.it21inc.org/mobile/gallery at the address bar of the iPhone. We will see the page as follows:

As we click one of the image link, we can see the light-box as follows:

As we click the upper left part of the image, we can view the next photo of the set. We can go to previous image by move the mouse to the upper right of the image. 

The html code of index.html is as follows:

Area number 1 has code related to specifying Mobile Profile. Please refer to Mobil Web Page Development Tutorial part I about the mobile profile. Area number 2 has code necessary to use the light box. More information about this can be read at lightbox2 website. Area number 3 has html code for this example.

 We can also use the Opera Mini simulator to view this example. However, we will see that the Opera Mini 2.0 does not give us a pleasant view of this page. This is one of the time-consuming area of DHTML web pages, we have to optimize the code for it to work for various mobile web-browser.

Click here to download the source code of this example.

In part V, we will try to view this example in an Android phone emulator. Please visit this site again soon.