JSFiddle

  • negative margin collapse #96 is the latest revision

    simple example of two divs with negative margins applied

    <div></div>
    <div></div>
  • simple example of telescopic text, made with jQuery #18 is the latest revision

    Inspired by http://www.telescopictext.com/

    // attach event handlers to all expanders
    $('.expander').bind('click', function () {
        // find all sections with class name
        // corresponding to expander's ...
  • jQuery.Event Constructor #27 is the latest revision

    An Event object created with $.Event() doesn't match the actual jQuery Event object created on keydown (an event created with $.Event() doesn't have "which" property)

    llog = function(t) {
        $('#logger > ul').append('<li>' + t + '</li>');
    };
    
    $('#logger > h1').text("jQuery Version " + $().jquery);
    
    $(document)
      .bind('keypress', function(e) {
        llog( "e ...
  • Opera translate font-rendering bug #15 is the latest revision

    In Opera, applying CSS translate changes the way font is rendered (tested on Mac OS X 10.6.7

    <h1>No translates</h1>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
    </ul>
    <hr>
    <h1>CSS translate applied</h1>
    <ul class="transformed">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
    </ul>
    <hr>
    <h1>CSS translate applied on a:active</h1>
    <ul class="screenshots">
        <li>
            <h1>Firefox 4.0 ...</h1></li></ul>
  • simple drop-down menu #160 is the latest revision

    Mootools 1.3.1 (compat), HTML, CSS, JavaScript

    <ul>
        <li>
            <a href="#">Lorem</a>
            <ul>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Dolor Set</a></li>
                <li><a href="#">Dolor Set Lorem Ipsum</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Whoa</a>
        </li>
    </ul>
        
  • a lousy way to simulate columnCoun #154 is the latest revision

    https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

    (function($){    
      // from modernizr 
      function columnCountSupported() {
        var elem = document.createElement('ch'),
            elemStyle = document.createElement('ch').style,
            domPrefixes = 'Webkit Moz O ms ...
  • <sup> with CSS #15 is the latest revision

    Mootools 1.3 (compat), HTML, CSS, JavaScript

    $ <span class="price">9.<span class="cents">99</span></span>
  • array serialization with JSON2 #21 is the latest revision

    jQuery 1.5, HTML, CSS, JavaScript

    var foo = [1, 2, 3, 'test', [1, 2, 3], 'test2']
        bar = JSON.stringify(foo),
        baz = JSON.parse(bar);
    
    console.log ...
  • Pie charts with -webkit-gradient #1 is the latest revision

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

    <span class="pie-chart p10"></span>
    <span class="pie-chart p25"></span>
    <span class="pie-chart p33"></span>
    <span class="pie-chart p50"></span>
  • List Reorder (sortable) - modified #18 is the latest revision

    A modified and renewed version of "list reorder" plugin to provide support not only to "lis" but for all block-line elements and to support parents with position-relative. unfinished

    /*
    List Reorder     <http://www.utdallas.edu/~jrb048000/ListReorder/>
    
    Enables drag-and-drop reordering of list items for any simple ordered <ol> or unordered <li> list.
    
    Author: Jordan Bach
    Version: 0 ...</li></ol></http://www.utdallas.edu/~jrb048000/listreorder/>