JSFiddle

  • Video editor scrubber #4 is the latest revision

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

    <svg style="display:none;">
      <defs>
        <g id="handle" viewBox="0 0 9 9">
          <polygon points="5.03 1.84 5.03 0 3.97 0 3.97 1.84 0 4.92 0 9 9 9 9 4.92 5.03 1.84"/>
        </g>
      </defs>
    </svg>
    
    <div class="video_trimmer">
      <div class="trimmed"></div>
      <div class="handle left">
        <svg><use x="0" y="0" href="#handle" /></svg>
      </div>
      <div class="handle right">
        <svg><use x="0" y="0" href="#handle" /></svg>
      </div>
    </div>
    
    
    
    
  • overlapping gradients

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

    <div class="gr gr1">
      <div class="gr gr2">
        <div class="gr gr3">
          <div class="gr gr4">
    
          </div>
        </div>
      </div>
    </div>
  • array unique

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

    var unique1 = function(arr) {
      var result = [];
      for (var i = 0, length = arr.length; i < length; i++) {
        if (result.indexOf(arr ...
  • intersection #1 is the latest revision

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

    // Find the intersection of 2 sorted arrays
    var A = [1,2,3,4];
    var B = [3,4,5,6,7 ...
  • islands #4 is the latest revision

    Find clusters (islands) in a 2 dimensional array using a little recursion.

    function countIslands (gameboard) {
      var islandCount = 0;
      var colLength = gameboard[0].length;
      var rowLength = gameboard.length;
      function sinkNeighbors(row, col) { //r ...
  • timeline algo

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

    var inputData = [
     	 {'s': 0, 'e': 10},
       {'s': 11, 'e': 20},
       {'s': 8, 'e': 999999 },
       {'s': 3, 'e': 7 },
       {'s': 14 ...
  • queued timers

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

    // Assumed constants / inputs from some external config or params
    var MAX_ACTIVE_ANIMATIONS = 3; // Specified requirement, total concurrent animations
    var TOTAL_ANIMATION_TIME_IN_MS = 3000 ...
  • Additive color transparencies

    optimizing for fewer layers

    // [R,G,B]
    function hexToRGB(hex,opacity){
        hex = hex.replace('#','');
        r = parseInt(hex.substring(0,2), 16);
        g = parseInt(hex ...
  • Color brightness

    Utility function for determining whether or not a color is bright or not

    var colors = ['#999999', '#AAAAAA','#CCCCCC','#FFFFFF','#77FFFF', '#FFFF77', '#FF77FF',,
    '#7777FF', '#77FF77', '#FF7777'];
    /**
     utility function for determining whether or not a ...
  • dynamic js image preloader

    Preload an array of image urls

    /* Input: Array of image urls. Go ahead and break one of these to see the fallback mechnism work for a ...