JSFiddle

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

  • Responsive image gallery

    Make sure the images is centered, but use as much horisontal width as possible. Take 1. 

    <div class="gallery">
    <div class="imageCard">
        <img src="" />
        <span class="title">This is a image.</span>
    </div>
    <div class="imageCard">
        <img src="" />
        <span class="title">This is a image.</span>
    </div>
    <div class="imageCard">
        <img src="" />
        <span class="title">This is a image.</span>
    </div>
    <div class="imageCard">
        <img src="" />
        <span class="title">This is a image.</span>
    </div>
    <div class="imageCard">
        <img src="" />
        <span class="title">This is a image ...</span></div></div>

  • White space is space

    How to remove white-space space in between UI/UX elements. 

    <div class="article">
    <h1>Two regular buttons with white-space in between</h1>
    <button>1</button>
    <button>2</button>
    
    <p>Sure. You might want white-space in between two buttons. The question ...</p></div>

  • zelect.js

    Enable styling the <select> the way you want by replacing it with a HTML variant. Changes in the HTML variant is reflected in the <select> (which now is hidden), so this should work in existing forms. 

    /**
 * zelect.js is a jQuery plugin for making a <select> highly stylable
 * by replacing it with a HTML variant. Changes in ...</select>

  • Discrete sampling of Pi

    Use a discrete model to sample the value of Pi, instead of random samping. 

    function computePi() {
    var diameter = parseInt($('#input').val());
    var inCircle = 0;
    var inSquare = diameter * diameter;
    
    
    for(var y = 0; y < diameter; y++)
        for(var x = 0; x < diameter; x++)
            if(inside(x,y))
               inCircle++;
    
    
    document.getElementById('report').innerHTML =
        "<table>" +
            "<tr><td>Diameter ...</td></tr>