HTML5 Web Storage - What is HTML5 Web Storage? - localStorage and sessionStorage - localStorage Object - sessionStorage Object

HTML5 web storage, a better local storage than cookies. What is HTML5 Web Storage? With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The...

[Read More...]

HTML5 Geolocation - Locate the User's Position - Handling Errors and Rejections

Locate the User's Position The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it. Browser Support Internet Explorer 9, Firefox, Chrome, Safari and Opera support Geolocation. Note: Geolocation is much more accurate for devices with GPS, like iPhone HTML5 - Using Geolocation Use the getCurrentPosition()...

[Read More...]

HTML5 Canvas vs. SVG - SVG - Canvas - Comparison of Canvas and SVG

Both canvas and SVG allow you to create graphics inside the browser, but they are fundamentally different. SVG SVG is a language for describing 2D graphics in XML. SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically...

[Read More...]

HTML5 Inline SVG - What is SVG? - SVG Advantag - Browser Supportes - Embed SVG Directly Into HTML Pages - Example - SVG Elements

What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG Advantages Advantages of using SVG over other image formats (like JPEG and GIF) are: SVG images can be created...

[Read More...]

HTML5 Drag and Drop - Drag and Drop

Drag and Drop Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be draggable. Browser Support Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop. Note: Drag and drop does not work in Safari 5.1.2. HTML5 Drag and Drop Example The example below is a simple drag and drop...

[Read More...]

HTML5 Audio - Audio on the Web

Audio on the Web Until now, there has not been a standard for playing audio files on a web page. Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. Browser Support Internet Explorer 9, Firefox, Opera, Chrome, and Safari support...

[Read More...]

HTML5 Video DOM

HTML5 <video> - Take Control Using the DOM The HTML5 <video> element also has methods, properties, and events. There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc. The examples below...

[Read More...]

HTML5 VIDEO

Many modern websites show videos. HTML5 provides a standard for showing them. Video on the Web Until now, there has not been a standard for showing a video/movie on a web page. Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. Browser...

[Read More...]