JSFiddle

  • confirmDelete.js

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

    var confirmableActions = document.querySelectorAll('[data-confirm]');
    
    for (i = 0; i < confirmableActions.length; ++i) {
      confirmableActions[i].addEventListener('click', function(event) {
        event.preventDefault ...
  • Custom radio button controls

    Mootools 1.3.1 (compat), HTML, CSS, JavaScript

    <div>
       <label class="control control--radio">
           <input type="radio" name="radio" />
           <span>Radio number one</span>
        </label>
    </div>
    <div>
       <label class="control control--radio">
           <input type="radio" name="radio" checked="checked" />
           <span>Radio number two</span>
        </label>
    </div>
  • Tiny Notification module

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

    
    function Notification(msg) {
    	var el = document.createElement('div');
      el.setAttribute('class', 'alert');
    
    	var closeIcon = document.createElement('div');
      closeIcon.setAttribute('class ...
  • Stamping out DOM templates

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

    document.getElementById('addItem').addEventListener('click', addItem);
    
    function addItem() {
      var itemContent = document.querySelector('#item-template').content;
    
    	// Update ID in the template.
      var ...
  • SVG text on a circle

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

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="220px" height="220px">
    
      <defs>
        <path id="circlepath" 
                d="
                M 100, 100
                m -75, 0
                a 75,75 0 1,1 150,0
                a 75,75 0 1,1 -150,0
                "
          />
      </defs>
    
      <use xlink:href="#circlepath" fill="none" stroke="red"  />
    
      <text font-family="Verdana" font-size="13">
        <textPath xlink:href="#circlepath">
         We hold these truths to be self evident
        </textPath>
      </text>
    
    </svg>
    
  • Inflating box

    using svg morphing (CSS) to make a box appear to inflate on hover.

    <h1>SVG inflating box with CSS (Chrome only?)</h1>
    
    <svg class="box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
      <path class="shape" d="M540 540c-160 1.6-320 1.6-480 0 -1.6-160-1.6-320 0-480 160-1.6 320-1.6 480 0C541.6 220 541.6 380 540 540z"/>
    </svg>
    
  • Responsive Table

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

    <h1>
    Responsive Table - Jorge-style!
    </h1>
    
    <table class="responsive-table">
    	<thead>
    	<tr>
    		<th>First Name</th>
    		<th>Last Name</th>
    		<th>Job Title</th>
    	</tr>
    	</thead>
    	<tbody>
    	<tr>
    		<td data-label="First Name">Etta</td>
    		<td data-label="Last Name">James</td>
    		<td data-label="Job Title">ALL THE HoFS</td>
    	</tr>
    	<tr>
    		<td data-label="First Name">Prince</td>
    		<td data-label="Last Name">Nelson</td>
    		<td data-label="Job Title">Legend</td>
    	</tr>
    	<tr>
    		<td data-label="First Name">Nice "And"</td>
    		<td data-label="Last Name">Simple ...</td></tr></tbody></table>
  • 3D transform w perspective

    nice way to show horizontal layers or levels

    <div id="container">
    
      <div class="level level1">
        <div class="floor"></div>
      </div>
    
      <div class="level level2">
        <div class="floor"></div>
      </div>
    
      <div class="level level3">
        <div class="floor"></div>
      </div>
    
    </div>
    
  • simple background videos

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

    var videos = document.querySelectorAll('video');
    var video_to = setTimeout(function() {
      videos.forEach( function(vid) {
        if(vid.paused) {
          vid.play();
        } else {
          vid ...
  • pulsing button

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

    <p>
      <i>We want to hear from you!</i>
    </p>
    
    <div class="pulse-button-container">
        <button class="pulse-button">Call In</button>
    </div>