JSFiddle

  • 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 ...
  • kidnap.js

    Makes your text into a kidnap letter, where each letter is cut out from a newspaper or magazine.

    /**
     * kidnap.js
     * Copyright Lars-Erik Bruce 2015.
     * MIT License.
     */
    (function() {
    
    	// The different default font-styles.
    	var magazines = [{
    		name: 'newspaper',
    		style: {
    			fontFamily: '\'Open ...
  • Trigger events asynchronously

    Sometimes trigging and handling events can take some time. Did you know in javascript/in the browser, this all happens synchronous? This means that when you trigger an event, the code will stop executing until all handlers for this event are complete. With $.asyncTrigger this is no longer a problem.

    $.fn.asyncTrigger = function() {
        window.setTimeout(Function.apply.bind(this.trigger, this, arguments), 0);
    };
    
    var count = 0;
    $('body').on('test1Event test2Event ...
  • Qbject

    A simple starting implementation of jQuery for newer browsers.

    /**
     * Poor mans ECMASCRIPT 5 "jQuery".
     *
     * - Use document.querySelectorAll for queries.
     * - Point $ prototype to Array.prototype.
     * - Implement jQuery API as we ...
  • Responsive grid in SASS

    Use a SASS for loop (in scss) making up a responsive grid. Grid width and maximum number of columns are variables.

    /*
    
    Responsive columns with a little bitt of Sass.
    
    Define column size and maximum columns allowed at the top.
    
    This example ...
  • Responsive grid in SASS #3 is the latest revision

    Use a SASS for loop (in scss) making up a responsive grid. Grid width and maximum number of columns are variables.

    /*
    
    Responsive columns with a little bitt of Sass.
    
    Define column size and maximum columns allowed at the top.
    
    This example ...