JSFiddle

  • Modernizr..scrollbarwidth

    Test if you have scrollbar width

    Modernizr.addTest('scrollbarwidth', function () {
      var rules, head, root, element, scrollbarWidth, style;
      
      
      rules = ['#modernizr-scrollbarwidth{ width: 100px; height: 100px; overflow: scroll; position ...
  • Fake CSS Table #3 is the latest revision

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

    <div class="table">
        <div class="row">
            <div class="cell">Col 1.1</div>
            <div class="cell">Col 2.1</div>
            <div class="cell">Col 3.1</div>
        </div>
        <div class="row">
            <div class="cell">Col 1.2</div>
            <div class="cell">Col 2.2</div>
            <div class="cell">Col 3.2</div>
        </div>
        <div class="row">
            <div class="cell">Col 1 ...</div></div></div>
  • Parallax Hover Demo #2 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

     // Image Preload - v1.2 - https://github.com/farinspace/jquery.imgpreload
        if("undefined"!=typeof jQuery){(function(a){a.imgpreload=function(b ...
  • Blur test

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

    <img src="http://lorempixel.com/600/200">
  • Crop image

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

    	
    
    var theCanvas = document.getElementById('canvas');
    var context = theCanvas.getContext('2d');
    	
    var photo = new Image();
    photo.addEventListener('load', eventPhotoLoaded , false);
    
    photo ...
  • 1508AAA - Win 8.1 IE11 SVG test #4 is the latest revision

    Win 8.1 IE11 SVG test

    <span class="icon--arrow-up"></span>
    <span class="icon--arrow-down"></span>
    <span class="icon--arrow-left"></span>
    <span class="icon--arrow-right"></span>
    <span class="icon--facebook"></span>
    <span class="icon--twitter"></span>
    <span class="icon--linkedin"></span>
    <span class="icon--book"></span>
    <span class="icon--calendar"></span>
    <span class="icon--exhibition"></span>
    <span class="icon--showcase"></span>
    <span class="icon--talk"></span>
    <span class="icon--v-dots"></span>
  • Position:Fixed; test

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />
    
    <header>
        Header
    </header>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, obcaecati, qui, tenetur assumenda commodi est laudantium ut laborum quibusdam ...</p></meta>
  • Border-color test

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

    <div>Border-color-test</div>    
  • Scrolling screens and pages #8 is the latest revision

    jQuery (edge), HTML, SCSS, JavaScript

    <div class="app">
        <div class="app-screen">
            
        </div>
        <div class="app-screen">
            
        </div>
        <div class="app-screen">
            <div class="app-page">
                
            </div>
        </div>
    </div>
  • Basic select box styling method #52 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $('.select').each(function () {
       var $container = $(this),
           $box = $container.find('.select-box'),
           $val = $container.find('.select-value');
        
        $box.on('change', function () {
            if ($box ...