JSFiddle

  • Gestureevents test

    Zepto 1.0rc1, HTML, CSS, JavaScript

    var dom   = document.body,
        width = parseInt($('#square').css('width')),
        vel   = 5.0,
        min   = 100,
        max   = 400,
        scale;
    
    function gestureChange( e ...
  • Multiple versions of jQuery for plugins

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

    <!--
    Our markup, to test the plugins
    -->
    <p class="plugin1">
        Test plugin 1
    </p>
    <p class="plugin2">
        Test plugin 2
    </p>
    <!--
    jQuery 1.9.1 
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--
    Plugin requiring jQuery 1.9.1
    -->
    <script>
        (function($){
            $('.plugin1').click(function(){
                if( $().jquery === '1.9.1' ){
                    alert( 'Plugin 1 (requiring jQuery ...</script></!--
    plugin></!--
    jquery></!--
    our>
  • Fixed position using position: absolute

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

    <div class="test">
        This div is fixed without using position fixed!
    </div>
    <div class="content">
        <h1 class="author">GEORGE ORWELL</h1>
        <h1 class="title">THE ROAD TO WIGAN PIER</h1>
        <div class="t_txt">
            <div class="chapter_head">
                <h2>PART ONE
                </h2>
                <h2><a class="ie_aname" name="ch1">1</a>
                </h2>
            </div>
            <p class="ie_f-letter">The first ...</p></div></div>
  • Editable table #21 is the latest revision

    jQuery 1.10.1, HTML, CSS, JavaScript

    $(function () {
        $( 'tr' ).each( function editAndSave( index, tr ){
            var $tr = $( tr );
            
            $tr.find( 'input[type=button]' ).on( 'click', function( e ){            
                var ...
  • Proof of concept: modular code for ToCs, scrolling page & accordions

    jQuery (edge), HTML, CSS, JavaScript

    // Create a table of contents, and nothing else
    void function buildToC(){
        var $ToC = $( '<ul>' );
        
        $( '[id]' ).each( function createToCEntry(){
            var $el   = $(this ...</ul>
  • Transparent background images #70 is the latest revision

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

    <div class="ima">
        <div class="txt">
            This doesn't have opacity. Neither does its parent.
        </div>
        <div class="ima__transparency"></div>
    </div>
  • How do link clicks, hashchanges and history events work together?

    Attempts to strip down a test case to explain why NDA'd application code won't fire `hashchange` events resulting from captured `click` events.

    $(function(){
        function updateURI(){
            $('#URI').text(window.location);
        }
        
        var logEvent = (function logEventScope(){
            var count = 0;
            var $log  = $('#log');
            var log   = $log ...
  • Line-clamped text with ellipsis without pseudo elements #1202 is the latest revision

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

    <p class="clamped clamped-2">
        <span class="text">
            There's a bit of text here.
            <span class="ellipsis">
                &#133;
            </span>
            <span class="fill"></span>
        </span>
    </p><p class="clamped clamped-2">
        <span class="text">
            But more text here (the same markup structure though): if the text overflows ...</span></p>
  • Line-clamped text with ellipsis without pseudo elements #319 is the latest revision

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

    <p class="clamped clamped-2">
        <span class="text">
            There's a bit of text here.
            <span class="ellipsis">
                &#133;
            </span>
            <span class="fill"></span>
        </span>
    </p><p class="clamped clamped-2">
        <span class="text">
            But more text here (the same markup structure though): if the text overflows ...</span></p>
  • IE8 won't upload files with long names

    jQuery (edge), HTML, CSS, JavaScript

    $('input').on('change', function(){
        setTimeout(function(){
            $('label').text($('input')[0].value);
        }, 0);
    });