JSFiddle

  • Test Array lookup vs Array seek vs Object lookup

    No-Library (pure JS), HTML, CSS, JavaScript

    function Today(dayDiff) {
    	var todayTmp = new Date();
    	todayTmp.setHours(0,0,0,0);  // reset time to 00:00:00.000 ...
  • Horizontally Center page content container that persists 100% Height #3 is the latest revision

    use jQuery/JavaScript to detect when the page is shown, resized, or if a mobile device's orientation changed. When either of these events fire, check the content container's height. If the content area's height can be expanded so that the page footer becomes flush with the bottom of the viewable area, then expand the height of the content area container so that the footer is pushed down and its bottom matches the maximum height of the viewable area. Content may overflow outside of the viewable area if it is too big.

    var _allowedContentHeight;
    
    $(document).ready(function() {
        SetUpScreenChangeEvents();
    });
    
    function UpdateScreen()
    {
        ForceWrapperToFitWindowHeight();
    }
    
    function SetUpScreenChangeEvents() {  // :Void
        $(window).bind("orientationchange resize pageshow", UpdateScreen);
    }
    
    function ForceWrapperToFitWindowHeight ...
  • Global object

    Store reference to the Global object (DOMWindow object). The new method of doing so, which is cross-environment.. works on ECMA5-strict mode which was breaking past methods.

    // Taken from:  http://www.blog.highub.com/javascript/javascript-pattern-roundup-issue-1/
    
    // cross-environment way to access the "global" object (works on ECMA5-strict mode ...
  • Global object

    Store reference to the Global object (DOMWindow object). The new method of doing so, which is cross-environment.. works on ECMA5-strict mode which was breaking past methods.

    // Taken from:  http://www.blog.highub.com/javascript/javascript-pattern-roundup-issue-1/
    
    // way to access the "global" object that is cross-compatible that past ...
  • JS Decorator Pattern #6 is the latest revision

    Example of Decorator Design Pattern in JavaScript used to "decorate" an instance of a class with method overrides.

    // Detailed explanation of Decorator Pattern in JavaScript can be found here: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#decoratorpatternjavascript
    
    // Adjusted their ...
  • JS Mixin Design Pattern #76 is the latest revision

    Example of using Mixin Design Pattern in JavaScript to augment a Car class with inherited Mixin class methods.

    // Detailed explanation of Mixin Design Pattern in JavaScript can be found here: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript
    
    /* Car ...
  • JS Factory Pattern #8 is the latest revision

    Basic example of the Factory Design Pattern in JavaScript, which can come in useful if the object instantiation process becomes complex (such as heavy reliance on config file properties), or when you need to generate different instances depending on the environment, or when working with many small objects that share the same properties.

    // Detailed explanation of this example can be found here:  http://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript
    
    var Car = (function() {
        var ...
  • JS Factory Pattern #5 is the latest revision

    Basic example of the Factory Design Pattern in JavaScript, which can come in useful if the object instantiation process becomes complex (such as heavy reliance on config file properties)

    var Car = (function() {
        var Car = function (model, year, miles) {
            this.model = model;
            this.year = year;
            this.miles = miles; 
        };
        return function ...
  • JS Command Pattern #35 is the latest revision

    Example of the Command Design Pattern in JavaScript. Car Manager object is decoupled from the program by using an execute method, which accepts any process requests from the CarManager object where the contents of the request include model and carID.

    // Command Pattern (explained in detail here: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#commandpatternjavascript)
    
    $(function(jQuery){
        var CarManager = {
            /* request information */
            requestInfo ...
  • html input dynamic width resizer #162 is the latest revision

    html input element that stretches dynamically as the user types, if text goes beyond the initial width of the element.

    $('input').keyup(function() {
        var $span = $('span');
        var $this = $(this);
        $span.text($this.val()); 
        $this.width($span.width());
    });