JSFiddle

  • CSS grid with inline-blocks #67 is the latest revision

    Mootools 1.3 (compat), HTML, CSS, JavaScript

    <ul>
        <li><img src="lalala.png" alt=""><span>Lalalala  Lalalala</span></li>
        <li><img src="lalala.png" alt=""><span>asdasdasad </span></li>
        <li><img src="lalala.png" alt=""><span>Lalalala asd asd </span></li>
        <li><img src="lalala.png" alt=""><span>Lala lala</span></li>
        <li><img src="lalala.png" alt=""><span>Lalalala</span></li>
    </ul>
  • jquery.disableTextSelection plugin #37 is the latest revision

    simple disable text selection plugin

    (function($){
        var methods = {
                enable: function() {
                  return $(this)
                    .removeAttr('unselectable')
                    .css({
                       '-webkit-user-select': 'auto',
                       '-khtml-user-select': 'auto',
                       '-moz-user-select': 'auto',
                       '-o-user-select': 'auto',
                       '-user-select': 'auto ...
  • Simple tabs with back button support #136 is the latest revision

    Hashchange event + chikuyonok tabs: http://chikuyonok.ru/2009/04/dl-tabs/ http://benalman.com/projects/jquery-hashchange-plugin/

    /* 
    dependencies:
        jquery.1.4.4 <http://jquery.com>
        jquery.hashchange.js <http://benalman.com/projects/jquery-hashchange-plugin/>
    */
    
    $(function(){
        $(window).bind('hashchange', function() {
            $('a[href=' + location.hash + ']')
                .parent()
                .siblings().removeClass ...</http://benalman.com/projects/jquery-hashchange-plugin/></http://jquery.com>
  • width expanding list without specifying width #1 is the latest revision

    x-axis expanding list without specifying width

    <ul>
        <li>LONGSTRINGLONGLONGSTRING</li>
        <li>LONGSTRINGLONGLONGSTRING</li>
        <li>LONGSTRINGLONGLONGSTRING</li>
        <li>LONGSTRINGLONGLONGSTRING</li>
    </ul>
  • jan tschihold typography proportions

    Mootools 1.3 (compat), HTML, CSS, JavaScript

    <div id="layout">
        <div id="page">
            <div id="content">
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros ...</p></div></div></div>
  • css timeout #162 is the latest revision

    proof of concept for css timeout and a tooltip

    <span>↓</span><div>whoa</div>
  • Arrow using borders #21 is the latest revision

    Arrow without images (for use with bubbles/tooltips), by using borders, transparent borders and absolute positioning.

    <span class="arrow-bg"></span>
    <span class="arrow"></span>
  • css columns when supported, javascript for non-capable #10 is the latest revision

    yet another css columns with javascript to rescue older browsers

    (function($){    
      // from modernizr 
      function columnCountSupported() {
        var elem = document.createElement('ch'),
            elemStyle = document.createElement('ch').style,
            domPrefixes = 'Webkit Moz O ms ...
  • inline-block vertical centering css #248 is the latest revision

    css inline-block fixed height container unknown height content centering

    <div class="container">
        <div class="content">Wheee</div>
        <div class="magic">&nbsp;</div>
    </div>