J.P. McGarrity.com Focusing on the Front End

• About
• About

1. Paul Irish on HTML5 Boilerplate Build Script

   April 30, 2011 by J.P.

   If you’re familiar with html5 boilerplate check it out here.

   Category: html5Comments (0)

   ---

2. Check If HTML5 Local Storage Is Supported Using Modernizr

   March 15, 2011 by J.P.

   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

   If you’re not familar with Modernizer download and read up on it here.

   Category: html5Tags: localstorage | Comments (0)

   ---

3. HTML5 Local Storage Example

   March 14, 2011 by J.P.

   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.

   Here is the JS needed. Please note jQuery is needed for the following:
   $(document).ready(function() {
var edit = document.getElementById('editableList');
$(edit).blur(function() {
localStorage.setItem('toDoData', this.innerHTML);
});
//when the page loads
if(localStorage.getItem('toDoData')){
edit.innerHTML = localStorage.getItem('toDoData');
}
});

   View the Example

   In the inspector you can deleted the stored data. Note the data is stored per browser.
   

   A Little More About Local Storage

   HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded. – http://diveintohtml5.org/

   Checkout my HTML5 Textmate Bundle, localStorage Snippets just added.

   Category: html5Tags: localstorage | Comments (0)

   ---

4. Create Links to Call and SMS From iPhone On the Web

   March 13, 2011 by J.P.

   Here are two key code snippets to add to your mobile website so users can contact you directly with their iPhone.
   Format for a Phone Call.
href="tel:+1-212-555-1212"
Format for SMS Message.
href="sms:+1-212-555-1212"

   Category: IOS, html5Comments (0)

   ---

5. CSS3 Webkit Fade Effect With KeyFrame

   March 12, 2011 by J.P.

   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*/
-webkit-animation-name: Navfade;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes Navfade {
from {
opacity: 0;
-webkit-transition: opacity;
}
to {
opacity: 1;
}
}

   Here is a link to another CSS3 animation post I created using the rotate with mask.

   Category: CSS 3, IOS, html5Tags: css3, fade, webkit animation | Comments (0)

   ---

6. Expanding a HTML5 search input like Apple.com

   March 6, 2011 by J.P.

   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 jQuery for the search box
   var inputWdith = '200px';
var inputWdithReturn = '140px';
$(document).ready(function() {
$('input').focus(function(){
//clear the text in the box.
$(this).val(function() {
$(this).val('');
});
//animate the box
$(this).animate({
width: inputWdith
}, 500 )
});
$('input').blur(function(){
$(this).val('Enter Search Value');
$(this).animate({
width: inputWdithReturn
}, 800 )
});
});

   Category: JavaScript, html5, jqueryComments (0)

   ---

7. Auto Start a Video Element in IOS 4

   November 1, 2010 by J.P.

   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 supports html5 with MP4 video support.
   window.onload = function()
{
var videoPlayer = document.getElementById("video");
videoPlayer.load();
videoPlayer.play();
document.getElementById("video").addEventListener('ended',myEventHandler,false);
function myEventHandler(e) {
alert('ended');
if(!e) { e = window.event; }
var moduleVideo = './video/sintel-trailer.mp4';
videoPlayer.src = moduleVideo;
videoPlayer.load()
videoPlayer.play();
}
}

   Here is a working example

   Category: html5Tags: html5, ios4, Mobile Safari, video tag | Comments (0)

   ---

8. Adobe Creates HTML5 Editing Tool

   October 26, 2010 by J.P.

   Category: html5Comments (0)

   ---

9. HTML5 Video Event List

   September 26, 2010 by J.P.

   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

   Category: html5Comments (1)

   ---

10. CSS3 Gradient Code Generator

    September 11, 2010 by J.P.

    

    Checkout the CCS gradient code generator I created this morning.

    Click Here

    Category: CSS 3, coding tool, css/html, html5Comments (0)

    ---