JSFiddle

  • Fancy Form by Roko CB

    Form that preserves nicely the field label text

    $("input, textarea").on("input", function(){
      $(this).toggleClass("hasVal",!!$.trim(this.value));
    }).first().focus();
  • Responsive CSS Grid - by Roko CB #2 is the latest revision

    Create a simple Grid using CSS

    <div class="content">
        <h1>Simple Grid example by Roko CB</h1>
    </div>
    
    <div class="grid">
    
        <div class="cell">
            <div class="content">
                <img src="//placehold.it/178x178"/>
                <p>Test</p>
            </div>
        </div>
    
        <div class="cell">
            <div class="content">
                <img src="//placehold.it/178x178"/>
                <p>Test<br/>foo<br/>bar</p>
            </div>
        </div>
        <div class="cell">
            <div class="content">
                <img src="//placehold.it/178x178"/>
                <p>Test</p>
            </div>
        </div>
        <div class="cell">
            <div class="content">
                <img src="//placehold.it/178x178"/>
                <p>Test</p>
            </div>
        </div>
    </div>
    
    <div class="content">
        <h2>Other page stuff</h2>
        <p>Lorem ipsum...</p>
    </div>
  • Circle progress bar

    Mootools 1.3.1 (compat), HTML, CSS, JavaScript

    // SVG stuff
    var range = document.id('range');
    var bg = document.id('counter');
    var ctx = ctx = bg.getContext('2d');
    var imd ...
  • Form validation #100 is the latest revision

    jQuery 1.6.3, HTML, CSS, JavaScript

    var hoveredImgSrc = 'http://www.gravatar.com/avatar/434d338f14f6f363354b51338ac715dd?s=128&d=identicon&r=PG';
    
    var img_real_width=0,
        img_real_height=0;
    
    $("<img/>")
        .attr("src", hoveredImgSrc)
        .load(function ...</img/>
  • Form validation #1 is the latest revision

    jQuery 1.6.3, HTML, CSS, JavaScript

    $('body').append('<div id="testing" />')
    
        if( $("#testing").length  ){
            
            alert("YEEE there it is!");
            
        }
    
    
    
  • Stackoverflow - text-overflow: ellipsis doesn't appear to be working #1 is the latest revision

    http://stackoverflow.com/q/11387481/918414

    
    
  • CSS GALLERY ELS POSITIONS #5 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    
    
  • jQ-PAINT !

    paint with jQuery

    var clicking = false;
    
    $('#paper').mousedown(function(){
        clicking = true;
    });
    
    $(document).mouseup(function(){
        clicking = false;
    })
    
    $('#paper').mousemove(function(e){
        if(clicking == false ...
  • particles #4 is the latest revision

    jQuery 1.7.1, HTML, CSS, JavaScript

    // jQparticles @roXon 2011 //
    $(document).ready(function(){
        ////// SET DESIRED NUBER OF PARTICLES //////////
        var particleNumber = 50;
        ////////////////////////////////////////////////
        var realNofParticles = particleNumber/($('#space').children().length ...
  • Custom scrollbar by roXon #1045 is the latest revision

    custom scrollbar using jQuery UI

    var parH = $('.parent').outerHeight(true);
    var areaH = $('.scrollable').outerHeight(true);
    var scrH = parH / (areaH/parH);
    
    function dragging(){     
        var scrPos = $('.scrollbar ...