JSFiddle

  • Responsive Square Grid

    jQuery (edge), HTML, SCSS, JavaScript

    function handleResize(){
      $('.value').html($('.item1').width() + ' x ' + $('.item1').height())
      $('.value2').html($('.item2').width() + ' x ' + $('.item2').height())
    }
    
    $(window).resize(handleResize);
    
  • Slick Slider Contribution #3 is the latest revision

    A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

    /**
    
        This fiddle is using the latest version 
        of Slick (from master) and jQuery.
    
        If your issue occurs in older version ...
  • Slick Carousel - Responsive Selection Bug

    This demonstrates a bug when resizing between breakpoints when one is set to show all slides.

    $('.slides').slick({
      arrows: false,
      slidesToShow: 5,
      focusOnSelect: true,
      infinite: false,
      centerMode: false,
      responsive: [{
        breakpoint: 600,
        settings: {
          centerMode: true,
          slidesToShow: 3
        }
      }]
    });
    
  • Touch Support

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

    var isEventSupported = (function(){
        var TAGNAMES = {
          'select':'input','change':'input',
          'submit':'form','reset':'form',
          'error':'img','load':'img','abort':'img'
        }
        function ...
  • Progress Circle Test #3 is the latest revision

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

    // progressbar.js@1.0.0 version is used
    // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
    
    var bar = new ...
  • Defined Conditional Table

    A table to check the value of different elements.

    var numbah = 2;
    var strang = 'FOO BAZ BAR';
    var eStrang = '';
    var objict = { foo: 'bar' };
    var troolean = true;
    var foolean = false ...
  • Right-Click Image Trick

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

    <article>
      <h2>Right-click and open in a new tab to see the bigger, detailed version</h2>
      <figure class="trick-image">
        <img src="https://media.giphy.com/media/JNz19eZvQsv3a/giphy.gif" alt="HAHAHA">
      </figure>
    </article>
  • Hover Test for IE

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

    var container = document.getElementById('container');
    
    function handleHover(event){
    	if (event.type === 'mouseenter'){
      	container.classList.add('hovered');
      } else {
      	container.classList.remove ...
  • Animated Text Draw

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

    var ctx = document.querySelector("canvas").getContext("2d"),
        dashLen = 220, dashOffset = dashLen, speed = 5,
        txt = "STROKE-ON CANVAS", x = 30, i = 0 ...
  • Pulsing CSS Concentric Circles #6 is the latest revision

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

    <div class="container">
      <div class="ring ring1"></div>
      <div class="ring ring2"></div>
      <div class="ring ring3"></div>
      <div class="ring ring4"></div>
      <div class="ring ring5"></div>
      <div class="ring ring6"></div>
      <div class="ring ring7"></div>
      <div class="ring ring8"></div>
      <div class="ring ring9"></div>
      <div class="ring ring10"></div>
      <div class="ring ring11"></div>
      <div class="ring ring12"></div>
    </div>