JSFiddle

  • CSS Carousel

    Basic CSS for carousel layout prior to initializing the actual JS-based carousel.

    <div class="carousel-container">
      <ul class="carousel">
      <li>
        <img src="http://placehold.it/400x225/5191FD/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/1647E9/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/3C74F7/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/1C54F5/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/133AD9/ffffff" alt="">
      </li>
    </ul>
    </div>
  • Custom Range Input

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

    <input type="range" class="scrubber">
  • 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 ...