JSFiddle

  • 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>
  • Animate changing the src-attribute of img-tag

    Someone asked me if you could animate changing the src-attribute on the img-tag. I gave him t his.

    function changeSrc(src, time) {
        time = time || 500;
        var $src = $('.src');
        function less() {
            var txt = $src.text();
            if(txt.length > 0 ...
  • Turn form input fields into name/value pairs

    Just a quick example to see what I come up with given little time.

    var form = document.getElementById("form");
    
    function collectElements(form) {
       // Fetch the interesting elements
       var input = form.getElementsByTagName('input');
       var text = form ...