Filling a select box using javascript and jQuery

innerHTML is commonly used property for setting html content of elements. Though it is not a standard property, even then all browsers support it. It is faster then using DOM methods like createElement and appendChild.

You can use it to set html for almost all elements. In internet explorer there are some exceptions. You cannot set innerHTML for elements of a table and select box.

Recently a reader asked me the workaround for setting options inside a select box with the help of javascript or jQuery. In this post I will explain some methods which you can use as an alternate to innerHTML.

View Demo

Here is a html select box.

Now let us look at various options available to us.

Continue reading Filling a select box using javascript and jQuery

Working with JSON in PHP and jQuery

I mentioned in a previous post that I was writing a book on PHP and jQuery. Well, after a labor of around 7 months the book is out now. It is available on Packt website as well as Amazon.

Meanwhile, to help you make a decision, a sample chapter from the book is available on Packt website. The chapter is Working with JSON in PHP and jQuery and it contains 4 articles that explain creating, reading and writing JSON in PHP as well as jQuery.

Below are the topics that this chapter covers:

  • Creating JSON in PHP
  • Reading JSON in PHP
  • Catching JSON parsing errors
  • Accessing data from a JSON in jQuery

To read the full chapter, just follow this link

8 blogs you must read if you are a web developer


AjaxianAjaxian covers all news related to javascript, libraries, AJAX related news, technologies, libraries, browsers quirks etc.


Definitive resource for AJAX whether you use it with PHP, Perl, NET(argh!) or whatever else. This blog should not be missed.

A List Apart

This is a classic one. 2-alistapartThe creators of this web magazine call it “For people who make websites”.

A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.


If you want to know all about building websites including design, code, writing compelling content and project management, this is the place.

Cats Who Code

Cats Who CodeCats Who Code is a blog by Jean-Baptiste Jung who is a web developer and professional blogger.


For lots of helpful code snippets, lists and hacks on PHP, jQuery and definitive information on a variety of wordpress topics.


4-csstricksCSS-Tricks is a website by renowned design ninja Chris Coyer where he shares his CSS secrets.


For detailed articles on how css works, browser hacks, cross browser compatibility and HTML 5.


5-nettutsA part of Tuts+ Network, this site contains tutorials and screencasts on HTML, CSS, Javascript/jQuery, PHP, Ruby on Rails etc.Though most of the articles are free, it also publishes premium tutorials which are available for a small fee.

High quality articles that explain each topic step by step in detail and are very easy to follow even for a beginner.

Continue reading 8 blogs you must read if you are a web developer

Creating a text rotator with jQuery


jQuery is appropriately described as the “write less, do more” library. Few lines of code, if written appropriately, can produce wonderful tools or utilities.

In this article we will create a simple text rotator (or banner rotator whatever you want to call it). Simply put, there will be a placeholder which will have multiple quotations written inside it. These quotations will be displayed one by one with a fading effect. Have a look at the demo to see how it will look like.

View Demo

Now that you have seen the demo and you find it interesting enough, here is how to create it.

Write the following html which will create a container div with id quotes. Inside this div, create multiple divs, each of which will hold a quotation and assign a css class textItem to them.

Except for 2 things, you can style the elements as per your wish. First, div with id quotes should have position as relative and each textItem should have position set to absolute. Absolute positioning for quotations will ensure that they are stacked on top of each other. This way if we fade out a quotation and fade in the next one, it will give desired effect.

Continue reading Creating a text rotator with jQuery