Suppose you want to make a quiz app. In it, if you click the wrong option, an audio will be played in the background saying “wrong answer”. But if you click two or more options simultaneously which are wrong, you won’t be able to hear the sound as many times wrong answer is clicked at the same time. So, how to resolve this issue. In this article, you will see if you can play the same sound more than once at the same time with HTML5 or not. The answer is Yes!!! There are two methods for doing so. Let ... Read More

If you want to add a date picker which includes the year, month and day, in your webpage, then HTML5 facilitates a “date” field for you. It is a type in element. It works well in various web browsers like Google chrome, Internet Explorer and Firefox. Here we are going to learn about how it works in Safari which is also a web browser. First let’s see about Safari. Safari Safari is a graphical web browser developed by Apple for its users. It is basically an open source software, specifically designed for all Apple devices. It runs on ... Read More

In a thermometer, as the temperature increases, the mercury in it rises up too. Vice versa is the case for lowering the temperature. Similarly, if you want to create such effect on a webpage, it is done by the range type of input element in HTML5. This is known as range for vertical orientation. The most common use of the slider input is when we know the lower and higher margins. For instance, if we are developing a website that records the temperature of different places. You can have the temperatures as a sliding input range. It was possible to ... Read More

Content caching is an effective way for fast and smooth user experience. Every URL in a web page can be linked to a single cache manifest section. However, there are certain large and rarely used files which decreases the overall speed of the Cache. Since they do not need to be changed but still gets re-downloaded every time the Cache gets updated, it is better to have such files in different cache with same URL. This will increase its speed and performance. So, how to spilt HTML cache? Before that, let’s understand what an HTML cache is. What is an ... Read More

Resizing an image is one of the cumbersome tasks since it affects the performance of your website. In case of online photos, size is of great importance. Generally, users prefer small size images since it takes less time to load even with moderate internet connections. If the image is too big, your page may become unresponsive for some time. Web pages with uniformly sized images are attractive and appealing. Hence, it is essential to upload images of appropriate size to your website. Resizing VS Resampling Changing the size that is, height and width, of an image to be printed ... Read More

The only access to camera device is not possible in iOS. The official specification suggests the following −A User Agent implementation of this specification is advised to seek user consent before initiating capture of content by microphone or camera. This may be necessary to meet regulatory, legal and best practice requirements related to the privacy of user data. In addition, the User Agent implementation is advised to provide an indication to the user when an input device is enabled and make it possible for the user to terminate such capture.Similarly, the User Agent is advised to offer user control, such ... Read More

Use the following method to create a pattern with HTML5 Canvas: createPattern(image, repetition)− This method will use an image to create the pattern. The second argument could be a string with one of the following values: repeat, repeat-x, repeat-y, and no-repeat. If the empty string or null is specified, repeat will be assumed.ExampleYou can try to run the following code to learn how to create a pattern −                    #test {             width:100px;             height:100px;           ... Read More

In this article we are going to learn about is it possible to have an HTML canvas element in the background of my page. You might try adding a CSS style with a position: fixed (or absolute, if applicable) to the canvas so that any material that comes after it will sit on top of it. To get better understanding on is it possible to have an HTML canvas element in the background of my page, let’s look into the following examples… Example 1 In the following example we are using the position: absolute to apply CSS style to the ... Read More

In this article we are going to learn is how can I invoke encode URI component from angularjs template in HTML. Each time a certain character appears in a URI, the encodeURIComponent() function replaces it with one, two, three, or four escape sequences that represent the character's UTF-8 encoding (will only be four escape sequences for characters composed of two "surrogate" characters). Syntax Following is the syntax for encodeURIComponent encodeURIComponent(uriComponent) Uricomponent Any object, including a string, number, boolean, null, or undefined. The uriComponent is transformed to a string before encoding. Let’s look into the following example for getting better ... Read More

The task we are going to perform in this article is about I need a client side browser database in HTML5 what are my options. Before diving into the article let’s have a look. HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side. The two storages are session storage and local storage and they would be used to handle different situations. You can use local storage in HTML5 for this purpose. The Local Storage is designed for storage that spans multiple windows and lasts beyond the current session. Local Storage The Web ... Read More