1. JavaScript: The Good Parts

    March 14, 2011 by J.P.

    Required watching for all JS developers.

    Category: JavaScript, videoComments (0)

  2. JavaScript Event Listener with CSS3 Webkit Animations

    March 13, 2011 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. Basic Javascript Closure

    March 9, 2011 by J.P.

    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 passed in
    function myNameIs(){ // define the inner function so garbage collection won't remove it.
    alert('hello: '+name);
    }
    return myNameIs; //return the function
    }
    $(document).ready(function() {
    var nameToPass = 'Johnny Quest'; // create the name for the function
    var myWhoAmI = whoAmI(nameToPass); //create var for the class and pass the name in.
    myWhoAmI(); // run instance of the class. Note:Passing name here will be undifined based on scope.
    });

    View Example Page Here

    Category: JavaScript, coding, jqueryComments (0)

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

  5. JS Closure Video

    February 28, 2011 by J.P.

    Stuart Langridge: Secrets of JavaScript Closures, part 1 from Ilja van den Berg on Vimeo.

    Category: JavaScript, codingComments (0)

  6. Difference between == and === Comparison Operators

    February 2, 2011 by J.P.

    Recently I was asked the difference between the “==” and “===” comparison operators so I thought I do a quick post since I few of my coworkers wanted to see a demo of the differences.

    == is equal to.

    === is exactly equal to (value and type).

    For example:

    var test1 = 1;

    var test2 = “1″;

    var test1 is equal to 1 and ‘1′ both number and string value.

    var test2 is also equal to 1 and ‘1′ both number and string value.

    var test1 is exactly equal to 1 since its a number but isn’t exactly equal to ‘1′ since its a string.

    The opposite can be said for var test2 since it’s a string and exactly equal to that string and is NaN.

    Here is sample code running through a series of alerts display what is equal to and exactly equal to.

    == is equal to.
    === is exactly equal to (value and type).
    Example:
    var test1 = 1;
    var test2 = “1″;
    var test1 is equal to 1 and ‘1′ both number and string value.
    var test2 is also equal to 1 and ‘1′ both number and string value.
    var test1 is exactly equal to 1 since its a number but isn’t exactly equal to ‘1′ since its a string.
    The opposite can be said for var test2 since it’s a string and exactly equal to that string and is NaN.
    Here is sample code running through a series of alerts display what is equal to and exactly equal to.

    Category: JavaScriptComments (0)