JSFiddle

  • Image to Base64

    jQuery 2.0.2, HTML, CSS, JavaScript

    function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
        var canvas = document.createElement('CANVAS ...
  • React SVG Path Study #20 is the latest revision

    Messing with control points

    var Icon = function(props) {
      return ( <svg 
      	style = {{ width: '600px', height: '600px', verticalAlign: 'bottom'}} viewBox = "0 0 600 600" >
        <path stroke = {  props.color || "#000000" } fill = "none" d = { props.d }/>
        {props.c}
        </svg>
      );
    };
    
    var Slider = function(props) {
    	return(
      		<div>
      		<label htmlFor="len">{props.label}:</label>
          <br/>
        	<input  id="len"
                  className="pointer"
          				style={{width:props.width}} 
                  type="range" 
                  min={props.min} 
                  max={props.max} 
                  step={props.step}
                  value={props.value}
                  onChange={props.change}
                  />
          </div>
          )
    }
    
    function addCoords(a,b){
      return {x ...
  • React Base Fiddle (JSX) #4 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    const Hello = React.createClass({
    	getInitialState(){
      	return {lastClicked:2}
      },
    	handleClick:function(e){
          let clickedVal = e.target.getAttribute('id');
         // console.log(clickedVal ...
  • Simple Physics Engine :: Bouncing Ball Inside Circle #6 is the latest revision

    Uses Minkovski sum technique to properly bounce a 2D ball off a circular wall. For more information, see: http://gamedev.stackexchange.com/q/29650

    /*
     * Simple Physics Engine :: Bouncing Ball Inside Circle
     * http://jsfiddle.net/user/klenwell/fiddles/
     */
    var Physics = {
        
        bounce_ball_off_world: function(ball, world) {        
            /*
             * translate ...
  • Indeterminate Checkbox Directive #74 is the latest revision

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

    var app = angular.module('combo', []);
    
    app.controller('MainCtrl', ['$scope', function($scope) {
        $scope.model = {
            allEaten: false,
            people: [
                {
                    name: "Bob",
                    fruits: [
                        { type ...
  • D3.js and AngularJS directives

    AngularJs + d3Js + bar chart example usign directives

    angular.module('myApp', []).
       //camel cased directive name
       //in your HTML, this will be named as bars-chart
       directive('barsChart', function ($parse ...
  • autogenerating replace for old behavior of escape()

    jQuery 2.1.0, HTML, CSS, JavaScript

    // Note: this will not run in FF v28.0 and above as escape is broken 
    
    var nonAlphaChars = "~`!@#$%^&*()_+-={}|[]\\  :;\"'<>?,./";
    var arr = nonAlphaChars ...
  • Shadow DOM! #1 is the latest revision

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

    var shadowHost = document.querySelector("#welcomeMessage");
    var shadowRoot = shadowHost.webkitCreateShadowRoot();
    shadowRoot.innerHTML = ["<style> li{ color: red} </style>",
                            "<div class='shadowChild'>",
                            "Shadow DOM offers us Encapsulation from ...</div>
  • Angular UI Validate Test

    testing validation...

    var app = angular.module('myApp', ['ui']);
    app.controller('MainCtrl', function($scope) {
        $scope.title = 'Angular UI Validation';
        $.extend($scope, {
    
            agreed: false ...
  • D3.js and AngularJS directives #32 is the latest revision

    AngularJs + d3Js + bar chart example usign directives

    angular.module('myApp', []).
       //camel cased directive name
       //in your HTML, this will be named as bars-chart
       directive('barsChart', function ($parse ...