JSFiddle

  • React Base Fiddle (JSX) #1 is the latest revision

    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>;
      }
    });
    
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );
    
  • Thinking in Backbone

    Backbone implementation of "Thinking in React" example, using ES6.

    class Product extends Backbone.Model {
        get defaults () {
            return {
                category: '',
                price: '',
                stocked: false,
                name: ''
            };
        }
    }
    
    class State extends Backbone.Model {
        get defaults ...
  • Thinking In React Step 5

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

    var ProductCategoryRow = React.createClass({
      render: function() {
        return (<tr><th colSpan="2">{this.props.category}</th></tr>);
      }
    });
    
    var ProductRow = React.createClass({
      render: function() {
        var name = this.props ...
  • Catch js errors when adding a script dynamically

    http://stackoverflow.com/questions/20838067/catch-js-errors-when-adding-a-script-dynamically

    window.onerror = alert;
    
    try {
           var element = document.createElement("script");
            element.language = "javascript";
            element.type = "text/javascript";       
            element.defer = true;
        element ...
  • Pinterest layout

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

    
    <div class="w">
        
    <div class="p">1. Lorem ipsum dolor sit amet.</div>
    
    <div class="p">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui similique velit error ...</div></div>
  • null or delete test #2 is the latest revision

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

    /*
    1. Array, object
    2. 
    */
    
    function test (clear_method) {
        var arr = [],
            d1 = new Date(), 
            d2,
            c = 1000000,
            i;
        
        for (i = 0; i ...
  • Focus div and jump to it

    jQuery 2.0.2, HTML, CSS, JavaScript

    $("#b").click(function () {
        $("#d").focus();
    });
  • Social Share Buttons #2 is the latest revision

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

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s ...</script>
  • ScrollTop test #7 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        $(".m").css("top", st + "px");
        console.log(st);
    });
    
  • Paulund shadow with wrapper #2 is the latest revision

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

    <div class="sheet">
    <div class="box effect2">
    <h3>Effect 2</h3>
    </div>
    </div>