JSFiddle

  • 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>
  • Input fields in a responsive line

    jQuery 2.1.3, HTML, CSS, JavaScript

    $('button.toggle').click(function(){
    	$('.lines').toggleClass('table');
    });
    
    $('.line input').attr('readonly', 'readonly')
    
    $('button.edit').click(function(e){
        var $line = $(e ...
  • Input fields in a responsive line

    jQuery 2.1.3, HTML, CSS, JavaScript

    $('button.toggle').click(function(){
    	$('.lines').toggleClass('table');
    });
    
    $('.line input').attr('readonly', 'readonly')
    
    $('button.edit').click(function(e){
        var $line = $(e ...
  • Problems with custom pseudo-class in jQuery

    When adding a custom pseudo-class to jQuery/Sizzle you should be aware of the possible performance issues.

    var entries = Object.create(null);
    $.extend($.expr[':'],{
    	property: function(elem, index, meta) {
            var prop = meta[3];
            console.log(elem.nodeName ...
  • Poor mans template engine

    A jQuery plugin for small simple templates with no overhead.

    /* Poor mans template engine. */
    $.fn.templ = function(vals) {
    	if(this.length !== 1) throw "The template must be a single DOM ...
  • Cartesian product of arrays served to a callback #9 is the latest revision

    There must exist some situation where this is handy. Especially if you are iterating over several arrays.

    var test1 = [1,2,3,4,5];
    var test2= ['a','b','c'];
    var test3 = [2.2, 3.3, 4.4 ...