JSFiddle

  • Infinite Carousel

    A simple infinte carousel

    /*
     * TODO: check if reusing item is in the visible viewport
     */
    var Carousel = function(){
    	this.carousel = document.querySelector('.carousel');
      this.container ...
  • frontenddraft #9 is the latest revision

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

    window.addEventListener('load', function transpileLess(){
    	Array.prototype.forEach.call(
      	document.querySelectorAll('head style[type="text/css"]'),
        function(styleElement) {
        	styleElement.setAttribute ...
  • campare items within a list

    compare-manager keeps track of the comparable items list and syncs all registered components which can vary.

    /*
     rename comare-item to compareItem
     Note: one-way-binding does not exactly behave as expected. itmes passed to comparePreview are one-way-bound but act ...
  • Stage Skeleton

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

    var Stage = function( sel ){
        console.clear();
    		this.canvas = document.querySelector(sel);
        this.ctx = this.canvas.getContext('2d');
        this.w = 0 ...
  • Stage Skeleton

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

    var Stage = function( sel ){
        console.clear();
    		this.canvas = document.querySelector(sel);
        this.ctx = this.canvas.getContext('2d');
        this.w = 0 ...
  • Stage Skeleton

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

    var Stage = function( sel ){
        console.clear();
    		this.canvas = document.querySelector(sel);
        this.ctx = this.canvas.getContext('2d');
        this.w = 0 ...
  • Implementation Of a Model View Binding

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

    console.clear();
    
    /*
     * Commons
     */
    var nivo = {};
    
    /**
     * Retreive a deep node in an object by using the dot-syntax
     * @param  {object} obj     The ...
  • JS Event Delegation

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

    var on = function(node, evtName, nodeName, callback){
    	node.addEventListener(evtName, function(e){
      	var target = e.target;
        while(target !== null){
          if ...
  • Building And Sorting A Tree

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

    console.clear();
    
    /**
     * Common Helper
     */
    var nivo = {};
    
    // Event Delegation Wrapper
    nivo.on = function(node, evtName, nodeName, callback){
      var args = [].slice.call ...
  • Youtube Api

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

    (function(){ "use strict";
    	window.nivo = window.nivo || {};
    
    	window.nivo.YoutubeAPI = (function(){
    		var
    			isInitialized = false, // indicates if api was loaded
    			isAPIReady ...