Check If HTML5 Local Storage Is Supported Using Modernizr

Here is a simple check that can be run if Modernizr is being used to check and see browser supports HTML5 Local Storage. if (Modernizr.localstorage) { alert(‘localStorage is available!’); // run localStorage code here… } else { // no native support for local storage alert(‘This Browser Doesn\’t Support Local Storage.’); } View Example of Detection […]

HTML5 Local Storage Example

Creating a local storage example using a To Do list. First create an HTML file with an unordered list. The unordered list must have the html5 contenteditable=”true” attribute to allow the content to be modified. Also give the UL an ID so it can be targeted. $(document).ready(function() { var edit = document.getElementById(‘editableList’); $(edit).blur(function() { localStorage.setItem(‘toDoData’, […]

CSS3 Webkit Fade Effect With KeyFrame

Here is an example of a basic fade animation using a CSS3 fade using “-webkit-transition: opacity” property. Please note you need to use a webkit browser to view the animation working. View the example Here. Here is the code used to create the animation: #box { width:500px; height:500px; background:#fff; padding:0; margin:0 auto; /*begin animation properties*/ […]

Expanding a HTML5 search input like Apple.com

Apple recently converted their site to html 5 and introduced a new navigation. The search which has always mirrored aspects of OSX and now acts like the IOS safari search. Once the input is focused the width is animated. Here is a demo I made with jQuery mirroring what they are doing. Here is the […]

Auto Start a Video Element in IOS 4

This is example was to test if it was possible to create a video play list for IOS4 using MP4 video files. The below code will load a video in IOS 4 and/or IOS 3.2. Once the video has ended it will automatically play another video file. Please remember to test on a device that […]

HTML5 Video Event List

The more I play with the html5 video element the more amazing things I discover. While working on a player I have compiled a list of events supported. Video Event List loadstart progress suspend abort error emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange