JSFiddle

  • Event listener #1 is the latest revision

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

    // grab elements as array, rather than as NodeList
    var elements = document.querySelectorAll("body");
    elements = Array.prototype.slice.call(elements);
    
    // make ...
  • Hyphen with CSS3

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

    <div class="normal">
        <p lang="de-DE">Ausflugsbuchungen sind an Board Reservierbar.</p>
        <p lang="en-UK">Excursion bookings are booked on board</p>
    </div>
    <div class="hyphen">
        <p lang="de-DE">Ausflugsbuchungen sind an Board Reservierbar.</p>
        <p lang="en-UK">Excursion bookings are booked ...</p></div>
  • Hyphen with CSS3

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

    <div class="normal">
    <p lang="de-DE">Ausflugsbuchungen sind an Board Reservierbar.</p>
    <p lang="en-UK">Excursion bookings are booked on board</p>
    </div>
    <div class="hyphen">
    <p lang="de-DE">Ausflugsbuchungen sind an Board Reservierbar.</p>
    <p lang="en-UK">Excursion bookings are booked ...</p></div>
  • vw, vh and vmin #8 is the latest revision

    vw, vh and vmin These new properties allow you to scale font sizes according to the viewport dimensions, i.e.

    /*
    http://www.sitepoint.com/new-css3-relative-font-size/
    */
  • Floating Boxes with borders

    Floating Boxes with borders insted of margins or paddings

    <main style="width:80%"><a style="width:80%; height:200px"></a>
     <a style="width:20%"></a>
     <a style="width:20%"></a>
    
    </main>
  • Window Element loaded

    jQuery load Test

    $(window).load(function() {
      alert('Window loaded');
    });
  • Wrap list elements with jQuery

    jQuery 2.0.2, HTML, CSS, JavaScript

    $('li').wrapAll('<ul></ul>');
  • CSS align top in line height

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

    <div>
    <h1>THÜS IS 24px margin bottom</h1>
    </div>
  • jQuery outerWidth sample calculation

    Calculation of hole needed space

    $("div").click(function () {
        var color = $(this).css("background-color");
        var width = $(this).outerWidth(true);
        $("#result").html("Outer Width is <span>" + width + "</span>.");
        $("#result ...
  • Radial box shadow only with CSS

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

    <div class="box css3-shadow">
        <img src="http://lorempixel.com/500/300/city/" width="100%" />
    </div>