JSFiddle

  • show hide blocks

    Animation to show and hide a list of blocks.

     var listItems = $('[data-container] li');
    
     $('[data-show]').click(function () {
         
         var list = new Iterator(listItems, true);
    
         function showListItem(li) {
             $(li).css({
                 visibility: "visible ...
  • deferred image using native promises #3 is the latest revision

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

    var promise = new Promise(function(resolve, reject) {
      // do a thing, possibly async, then…
    
      if (/* everything turned out fine */) {
        resolve("Stuff ...
  • deferred image function #4 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    var image1 = document.querySelector('#image1');
    var image2 = document.querySelector('#image2');
    var image3 = document.querySelector('#image3');
    
    var imageDeferred = function (image) {
        return ...
  • custom binding example

    Knockout.js 3.0.0, HTML, CSS, JavaScript

    var model = {
        dizzy : "it's just that mean ol' Texas sun.."
    };
    
    ko.bindingHandlers.mycustom = {
    
        init : function (element, valueAccessor, allBindings, viewModel ...
  • css_wizardry simplified

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

    <h1>
    Grid base system
    </h1>
    <p>
    The key concepts here are that a grid is an element which contains grid items. Grid items ...</p>
  • Command Pattern #4 is the latest revision

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

    var outputList = document.querySelector('[data-output]');
    
    /**
    *  commands is a map of command objects.
    */
    var commands = {
    
        Undo: function () {
            commandManager.invokeCommand(this);
        },
    
        Redo ...
  • Composite pattern example #3 is the latest revision

    A simple example of the composite pattern.

    //  composite pattern example. (Firefox only)
    var filesize1 = 24;
    var filesize2 = 56;
    var filesize3 = 13;
    
    function extend(Parent, Child) {
    
        function F ...
  • requestAnimationFrame hello world

    jQuery (edge), HTML, CSS, JavaScript

    function Foo(el) {
    
        this.el = $(el);
        this.left = 0;
        this.direction = "ltr";
    }
    
    Foo.prototype = {
    
        move: function () {
    
            if (this.direction === 'ltr ...
  • book reader #2 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    (function ($) {
    
        var $citations = $('[data-citation]');
        var $citationsContainer = $('#citations-container');
    
        $citations.each(function (index, citation) {
    
            var $citation = $(citation);
    
            var title = $citation.data('title ...
  • Input fields with labels

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

    <div class="container">
        <label class="foo-label"> <span class="foo-label-text">this is my label:</span>
    
            <input class="foo-input" type="text" />
        </label>
        
            <label class="foo-label"> <span class="foo-label-text">this is my label:</span>
    
            <input class="foo-input" type="text" />
        </label>
        
        
    </div>