JSFiddle

  • Wrap first 2 elements of a group of elements using jQuery

    jQuery 2.1.3, HTML, SCSS, JavaScript

    var gallery = $('.gallery-item');
    for (var i = 0; i < gallery.length; i += 2) {
        gallery.slice(i, i + 2).wrapAll('<div class="gallery-item-wrap" />');
    }
  • IE websocket Example

    Copied from https://msdn.microsoft.com/en-us/library/hh673567(v=vs.85).aspx

    
    var host = 'ws://example.microsoft.com';
     try {
        socket = new WebSocket(host);
    
        socket.onopen = function (openEvent) {
           document.getElementById("serverStatus").innerHTML = 
              'WebSocket ...
  • jQuery UI Widget Example

    jQuery 1.11.0, HTML, SCSS, JavaScript

    (function ($, undefined) {
        $.widget('vgbln.vergissberlin', {
            _create: function () {
                this.element.text('Widget created');
            },
    
            publicMethod: function (a, b) {
                return a + b;
            },
            _privateMethod ...
  • CSS throw iframe #3 is the latest revision

    jQuery 2.1.0, HTML, SCSS, JavaScript

    $('#yelp').contents().find('body').css('background-color', 'red');
  • Flex Box Demo

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

    <div class="flex-container">
        <div class="row"> 
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
        </div>
    </div>
  • SVG Image #6 is the latest revision

    Respect ratio from images with SVG wrapper

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="200" height="200" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
             <image xlink:href="http://lorempixel.com/400/400/people/" x="0" y="0" height="200px" width="200px"/>
    </svg>
  • CSS Transparent border on hover #3 is the latest revision

    Solve the problem with transparent border color wich increase the box size.

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  • Crop Text with JavaScript & CSS

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

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="hidden">Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p>Maecenas tempus, tellus eget condimentum ...</p>
  • Flexbox vertical #13 is the latest revision

    playground with flex boxes

    <div class="blue container">
        <div class="blue item-1"></div>
        <div class="blue item-1"></div>
        <div class="blue item-2"></div>
    </div>
  • Iconfont with two colours

    trick with background colour

    <span class="zocial-dribbble"></span>