JSFiddle

  • Drag & drop #83 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    function makeDraggable(draggable, container){
        // In case you don't want to have a container
        var container = container || window;
        // So we ...
  • Add an element to the jQuery selection

    jQuery 1.8.3, HTML, CSS, JavaScript

    $('div').click(function(){
        $(this).add('span').css('background','yellow')
    })
  • WebWorker scoping test #13 is the latest revision

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

    var worker = new Worker((window.URL || window.webkitURL).createObjectURL(new Blob(['self.onmessage = function alertMessage(e){alert("Worker received message ...
  • Float & clear in CSS #553 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <hgroup class="case1">
        <h2>Floating boxes</h2>
        <whatever>
            <div class="box1">
                Box 1!
            </div>
            <div class="box2">
                Box 2!
            </div>
        </whatever>
    </hgroup>
    <hgroup class="case2">
        <h2>Non-floating boxes</h2>
        <whatever>
            <div class="box1">
                Box 1!
            </div>
            <div class="box2">
                Box 2!
            </div>
        </whatever>
    </hgroup>
    <hgroup class="case3">
        <h2>Floating &amp; cleared boxes</h2>
        <whatever>
            <div class="box1">
                Box 1!
            </div>
            <div class="box2">
                Box 2!
            </div>
        </whatever>
    </hgroup>
  • WebKit screws table cells' horizontal dimensions #2 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    
    
  • CSS3 sliding tabs (w/ translate — for Android) #5 is the latest revision

    Sliding tabs mechanism with attribute modification as the only script dependency

    $('.tabLinks a').on('click', function(e){
        e.preventDefault();
        
        var index = $(this).index();
    
        $('.tabs').attr('data-tab', index);
    });
  • CSS3 sliding tabs (w/ left) #174 is the latest revision

    Sliding tabs mechanism with attribute modification as the only script dependency

    $('.tabLinks a').on('click', function(e){
        e.preventDefault();
        
        var index = $(this).index();
    
        $('.tabs').attr('data-tab', index);
    });
  • CSS3 sliding tabs (w/ translate) #109 is the latest revision

    Sliding tabs mechanism with attribute modification as the only script dependency

    $('.tabLinks a').on('click', function(e){
        e.preventDefault();
        
        var index = $(this).index();
    
        $('.tabs').attr('data-tab', index);
    });
  • Floor plan #133 is the latest revision

    In response to the question at http://stackoverflow.com/questions/12690104/adding-a-hoverstatus-to-small-parts-of-an-image/12691090

    <div class="floorplan">
        <a class="room" href="#" id="room1018">
            1018
        </a>
        <a class="room" href="#" id="room1025">
            1025
        </a>
    </div>
  • Fill remaining height #6 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div class="container">
        <div class="a">
            "What d'ye think o' this - ain't never see the like hereabouts, eh? When I see this I telled ...</div></div>