JSFiddle

  • Animated CSS Youtube button

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

    var state = false;
    var button = document.querySelector('.youtube')
    
    button.onclick = function() {
      button.classList[state ? 'remove' : 'add']('playing')
      state = !state
    }
  • Animated CSS Youtube button

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

    var state = false;
    var button = document.querySelector('.youtube')
    
    button.onclick = function() {
      button.classList[state ? 'remove' : 'add']('playing')
      state = !state
    }
  • Add remove shadow on scroll start/stop instead of every scroll event

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

    
    function createStartStopScrollEvent(scrollContainer) {
      var scrollStart = new Event("scrollStart", {"bubbles":false})
      var scrollStop = new Event("scrollStop", {"bubbles":false})
    
      var timer = null ...
  • Scroll start and stop events

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

    
    function createStartStopScrollEvent(scrollContainer) {
      var scrollStart = new Event("scrollStart", {"bubbles":false})
      var scrollStop = new Event("scrollStop", {"bubbles":false})
    
      var timer = null ...
  • Debounce and throttle combined

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

    var all = document.querySelector('.all'),
        reg = document.querySelector('.regular'),
        deb = document.querySelector('.debounce'),
        thr = document.querySelector('.throttle'),
        com = document.querySelector ...
  • Remember last N items

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

    
    
    function rememberLastN(N) {
    	var items = [];
      
      function push(item) {
      	// Remove item from items if it exists from before (to push it ...
  • Check that all rows in a table has same amount of columns

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

    
    
    $('table').each(function() {
    
      var table = []
    
      var $rows = $(this).children('tbody, tfoot').children('tr');
      var table = new Array($rows.length).fill ...
  • MDL timepicker

    A quick-and-dirty timepicker for MDL. Need more sophisticated initialization-code, and isn't implemented as part of the mdl framework.

    $('.tmdl-datetime input').on('focus', function() {
    	$(this).closest('.tmdl-datetime').addClass('is-focused')
    }).on('blur', function() {
    	$(this).closest('.tmdl-datetime').removeClass('is-focused')
    }).on('change ...
  • URL equals

    Given two URLs, are they equal? Attribute order shouldn't have anything to say.

    function findAttrs(a) {
    	var search = {};
    	a.search.substring(1).split('&').forEach(function(a) {
    		var s = a.split('=');
    		search[s[0]] = s[1];
    		
    	});
    	return search;
    }
    
    function objectEquals(obj1 ...
  • responsive grid design #6 is the latest revision

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

    <h1>This is a headline with somewhat much text</h1>
    
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th width="100%">Something</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Olav</td>
                <td>Completely</td>
                <td>21</td>
            </tr>
            <tr>
                <td>Arne</td>
                <td>Indeed</td>
                <td>38</td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="card">
        Content inside card ...</div>