JSFiddle

  • Dynamic Load Music/Sound HTML5 Framework #4 is the latest revision

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

    var audio = {
        //Defaults and init
        sfx: {},
        music: {},
        path: 'http://www.unlok.ca/ld27/sound/',
        musicPlaylist: ['jump', 'jetpack', 'jump', 'hurt'],
        musicTrack ...
  • Accordion

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

    <details>
        <summary>Heading #1</summary>
        <nav>
            <a href="#">Link A</a>
            <a href="#">Link B</a>
            <a href="#">Link C</a>
        </nav>
    </details>
  • button:after Wat? #26 is the latest revision

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

    <button>test</button>
  • Fading A Background Image In #57 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    $(document).ready(function() {
        $('#back').animate({opacity: 0}, 0).css({'background-image': 'url(http://vaughnroyko.com/jsfiddle/back.png)'}).animate({opacity: 1 ...
  • Horizontal Menu with a Dynamic Number of Elements Fit As 100% Evenly #45 is the latest revision

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

    <p>Horizontal menu with a dynamic number of elements fit as 100% evenly</p>
    <p>AKA Return of the Table... Styles!</p><br />
    
    <div id="menu">
        <ul>
            <li><a href="#">Menu 1 ...</a></li></ul></div>
  • CSS Based Image Dropdown

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

    <div class="imagedrop"><img src="http://vaughnroyko.com/jsfiddle/avatar.png" /></div>
  • Vertically Aligning Content in a Floated Element #170 is the latest revision

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

    Vertically aligning content in a floated div/element.<br /><br />
    
    <div class="floated">
        <div class="inside">
            <a href="#">THING</a>
        </div>
    </div>
    
    <div class="floated">
        <div class="inside">
            <a href="#">THING</a>
        </div>
    </div>
    
    <div class="floated">
        <div class="inside">
            <a href="#">THING</a>
        </div>
    </div>
    
  • Bare Bones CSS-based Drop-down

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

    <ul id="nav">
        <li><a href="#">Test</a></li>
        <li><a href="#">Test Dropdown</a>
            <ul>   
                <li><a href="#">Test Drop</a></li>
                <li><a href="#">Test Dropdown #2</a>
                    <ul>
                        <li><a href="#">Test Drop</a></li>
                        <li><a href="#">Test Drop</a></li>
                        <li><a href="#">Test Drop</a></li>
                    </ul>
                </li>        
                <li><a href="#">Test Drop</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>