JSFiddle

  • CSS3 Pink Button with Pacifico font #1950 is the latest revision

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

    document.getElementById('button').onclick = (function() {
        document.getElementsByTagName('audio')[0].play();
        document.getElementsByTagName('span')[0].innerHTML = 'Hello bitchception!';
        return false;
    });
  • PX vs EM with images

    jQuery 1.5.2, HTML, CSS, JavaScript

    $('button').click(function() {
        $('#test').css('font-size', '200%');
    });
  • $.fn.data() vs el.dataset #5 is the latest revision

    jQuery 1.5, HTML, CSS, JavaScript

    var $h1 = $('h1').data(),
        h1 = document.getElementsByTagName('h1')[0].dataset,
        $log = $('#log');
    
    $log.append('<b>Test boolean</b><br>');
    $log.append('jQuery: ');
    $h1 ...
  • Konami Code #36 is the latest revision

    jQuery 1.4.4, HTML, CSS, JavaScript

    var konamiCodeArray = [],
        konamiCodeKey = '38,38,40,40,37,39,37,39,66,65';
    $(document).keydown(function(e) {
        konamiCodeArray.push(e ...
  • Ribbon generator #8 is the latest revision

    Finished on soiheardyouliekribbon.com

    var $section = $('section'),
        $d = $('#d'),
        $before = $('#before'),
        $after = $('#after'),
        $val = $('span'),
        ratio = $('#ratio-range').val();
    
    $('input[type="range"]').change(function(e ...
  • Spriting test

    jQuery 1.4.4, HTML, CSS, JavaScript

    var $d = $('#d');
    $('button').click(function() {
        if ($(this).text() === 'auto') {
            setInterval(function() {
                $d.css('background-position-x', parseInt($d.css('background-position-x')) + parseInt ...
  • SNIGLETIFY !

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

    <link href="http://fonts.googleapis.com/css?family=Sniglet:800" rel="stylesheet" />
    
    <h1>For a better world...</h1>
    
    <a href='javascript:(function(){var a=document.all,b=document.getElementsByTagName("head")[0],c=document.createElement("link");c.href="http://fonts.googleapis.com/css?family=Sniglet:800";c.rel="stylesheet";b.appendChild(c);for(x in a)a[x].style.fontFamily="Sniglet";})();'>
        <strong>SNIGLETIFY !</strong>
    </a>
        <em>Drag this to yout bookmark bar and make a better world</em>
  • Flipped corner in CSS #23 is the latest revision

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

    <div id="d">
        <h3>Flipped corner in CSS</h3>
        <p>
            EASY
        </p>
    </div>