Dynamically set dropdown value using jQuery

In this post I am going to explain, how we can dynamically set dropdown value using jQuery based on a checkbox. To explain how this work I am using a very simple example, so that everyone can understand the core concept behind it. Let’s say we have a HTML markup like this:
Read the rest of this entry

Drag Drop Functionality in HTML5 and Canvas

First of all I assume you know basic of canvas. If not, don’t worry it is very easy and simple. Please learn from W3schools.  Look at the picture. Here we want to drag a rectangular object and drop any where in the canvas.

Drag Me

Drag Me

So we need to create canvas container, create draggable rectangular object. Now I assume you are familiar with object oriented JavaScript. If not, don’t worry it is very easy and simple. Please learn from here(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript). I will also use simple jquery API for dom manipulation.

Read the rest of this entry

Play Audio with HTML5

The new <audio> tag in HTML5 allows users to embed music(s) to their website applications. In this post we will discuss about <audio> tags and its APIs.

Currently <audio> element supports only three formats of audio files. i.e. MP3, wav and ogg. And also not all browsers support all of the three formats.

Browser MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES YES NO
Opera 10+ NO YES YES

Before we proceed further we should know the MIME type of these three supported audio format. Because MIME helps browser in identifying the media.

Read the rest of this entry

Explore Flex, Flash, HTML5, CSS3 and Responsive Website Design

We often impressed by looking the outer beauty of any product that may be tangible or intangible. The same thing can happen with a website as well. An application or Website will reveal its beauty from its aesthetic design. Now days we adopt different framework to design a website. In ancient years, near about 8 to 10 years before, websites were designed in simple HTML static page. But later on revolutions started and some browser came to extend their hands to support and give life to the webpages and introduced the concept of dynamic webpages. Earlier it was difficult to design a graphics in simple HTML tag. Some format was not supported. So Adobe Inc. took one step ahead and introduced Flash and Flex to the graphics world. By the help of Flash we can design different animation in a shorter span of time. Some game application we can design quickly.

Read the rest of this entry