JSFiddle

  • Conditional extra form fields with CSS #104 is the latest revision

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

    <form>
        <input type="checkbox" id="moo" /><label for="moo">Condition</label>
        <label>
            value for condition: 
            <input type="text" value="20">
         </label>
    </form>
  • Collapsing TOC

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

        var toclist = document.querySelector('nav ul');
        var toc = document.querySelector('#toclink');
        toclist.classList.add('hidden');
        toc.classList.add('active');
        toc ...
  • Image rotation in Canvas #10 is the latest revision

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

      var sourceimage = document.querySelector('img');
      var button = document.querySelector('button');
      var canvas = document.querySelector('canvas');
      canvas.height = canvas.width = 0 ...
  • Battenberg chart

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

    <div id="lie"></div>
    <ul>
        <li>Batten</li>
        <li>Berg</li>
    </ul>
  • Styling ordered lists #82 is the latest revision

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

    <h1>Simple things: styling ordered lists</h1>
    
    
    <section>
      <h2>No CSS</h2>
      <ol>
        <li>Collect underpants</li>
        <li>???</li>
        <li>Profit</li>
      </ol>
    </section>
    
    <section>
      <h2>Element padded</h2>
      <ol class="oldschool">
        <li><span>Collect underpants</span></li>
        <li><span>???</span></li>
        <li><span>Profit</span></li>
      </ol>
    </section>
    
    <section>
      <h2>Using Counter</h2>
      <ol class="counter">
        <li>Collect underpants</li>
        <li>???</li>
        <li>Profit ...</li></ol></section>
  • CSS animation timing driven slideshow #4 is the latest revision

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

    var progressbar = document.querySelector('output');
    var evt = (progressbar.style.animation === undefined) ? 
              'webkitAnimationEnd' : 'animationend';
    var imgs = document.querySelectorAll('img');
    var counter ...
  • OnChange for color not firing in firefox. #6 is the latest revision

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

    var f = document.querySelector('form');
    var out = document.querySelector('output');
    var i = document.querySelector('input');
    f.addEventListener('change', function(ev ...
  • closure explanations with loops

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

    var links = document.getElementsByTagName('a');
    var alllinks = links.length;
    
    function withoutclosure() {
      for (var i=0; i<alllinks; i++) {
        links[i ...
  • BOLD #2 is the latest revision

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

    No code. How about adding some?
  • Animated demo #656 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    // grab the canvas element, get the context for API access and 
    // preset some variables
    var canvas = document.querySelector( 'canvas' ),
        c ...