1. 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)

  2. JavaScript Event Listener with CSS3 Webkit Animations

    by J.P.

    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 this it is possible to chain CSS animations. This is a great method to use on IOS devices to improve animation frames compared to only working wth JavaScript.

    Category: CSS 3, IOS, JavaScript, coding, css/htmlComments (0)

  3. 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: , , | Comments (0)