JSFiddle

  • sibling selector test

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

    <input type="checkbox" id="trigger">
    <nav>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </nav>
  • css counter-increment demo

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

    <ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Cras finibus urna a ipsum pulvinar fringilla ut ut leo.
      <ol>
      <li>Lorem ipsum ...</li></ol></li></ol>
  • TypeScript + CreateJS Sample

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

    /// <reference path="https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/createjs/createjs.d.ts" />
    
    let stage: createjs.Stage = new createjs.Stage("demo");
    let particles = [];
    
    for (let i = 0; i < 20; i++) {
      let particle: createjs ...</reference>
  • TypeScirpt+CreateJS - Factory Pattern

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

    /// <reference path="https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/createjs/createjs.d.ts" />
    
    //パーティクル作る抽象
    abstract class ParticleFactory {
      
      constructor() {
      }
      
    	// must be implemented in derived classes
      abstract createOne(): void; 
      
      create (max = 0) {
      	if (max > 0 ...</reference>
  • React Base Fiddle (JSX)

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

    var Hello = React.createClass({
        render: function() {
            return <div>Hello {this.props.name}</div>;
        }
    });
     
    React.render(<Hello name="World" />, document.getElementById('container'));
    
    
  • jQuery.checkAgent v2 #6 is the latest revision

    jQuery 2.1.0, HTML, CSS, JavaScript

    'use strict';
    
    /**
     * User-Agent check Plugin
     * User: Tenderfeel
     * Date: 11/06/20
     * LastModified: 14/12/24
     *
     */
    
    
    ;(function ( $, window, document, undefined ) {
    
      /**
       * jQuery ...
  • iScroll4 Carousel #12 is the latest revision

    ベース

    $(function(){
        //div#wrapper
        var $wrapper = $('#wrapper');
        
        //div#scroller
        var $scroller = $('#scroller');
        
        //div#prev(arrow)
        var $prev = $('#prev');
        
        //div#next(arrow ...
  • iScroll4 Carousel #2 is the latest revision

    ベース

    $(function(){
        //div#wrapper
        var $wrapper = $('#wrapper');
        
        //div#scroller
        var $scroller = $('#scroller');
        
        //div#prev(arrow)
        var $prev = $('#prev');
        
        //div#next(arrow ...
  • bootstrap-alerts.js MooTools version

    Mootools 1.4.2 (compat), HTML, CSS, JavaScript

    var Alerts = new Class({
        
        Implements:[Options, Events],
        options:{
            selector: '.close',
            blockMessage:false,
            singleton:false,
            autoClose:true
        },
                        
        initialize:function(element, options ...
  • DataURL Converter

    Drag&Dropで画像をまとめてDataURLに変換する

    Element.NativeEvents['drop'] = 2;
    Element.NativeEvents['dragover'] = 2;
    Element.NativeEvents['dragleave'] = 2;
    
    
    var dataURL = new Class({
        Implements: [Options, Events],
        options ...