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’, […]

JavaScript Event Listener with CSS3 Webkit Animations

CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript. function cssAnimationEnd() { //looks for the ID box from the css and fires the event listen when the animation is complete. box.addEventListener( ‘webkitAnimationEnd’, function( event ){ alert( “Finished animation!” ); }, false ); } Working with event listers like […]

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*/ […]

Sync Textmate Bundles Across All your Macs With DropBox

If you’re a heavy lifter with Textmate and create and customize bundles all the time this post is for you. Copying bundles from one machine to another is cumbersome and easily forgotten. I always find myself adding one command to a custom bundle at the office and then forgetting to add it to one of […]

Basic Javascript Closure

Here is an example of a basic use of Javascript closure. A benefit of using a closure is it will not get cleaned up by garbage collection and cab be reused. function whoAmI(param){ // create the outer function and pass in the name var name = param; // name is equal to the param you […]

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 […]

Basic Webkit Animation

This is the first part of a series of CSS webkit animations. #spinner { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -256px; height: 256px; width: 256px; text-indent: -999em; white-space: nowrap; overflow: hidden; -webkit-mask-image: url(‘../images/spinner.png’); -webkit-animation-name: spinnerRotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; background:#ccc; } @-webkit-keyframes spinnerRotate { from { -webkit-transform:rotate(0deg); } to […]