JSFiddle

  • Jasmine 2.0 template

    Jasmine 2.0 template

    describe('app config', function() {
      var appConfig = {
        deviceTypes: {
          kindsMapper: {
            'key1': [
              'key1_1',
              'key1_2'
            ],
            'key2': [
              'key2_1',
              'key2_2'
            ]
          }
        }
      };
      
      it('should return an object', function ...
  • Foundation 2 column separator POC

    A Proof of Concept made with Foundation for Seedstars. Beware of the usual caveats of sticking something in between two columns of a grid system.

    <div class="table">
      <div class="row row--inner">
        <div class="small-3 columns">16:00</div>
        <div class="column-separator">O</div>
        <div class="small-8 columns end">First row</div>
      </div>
      <div class="row row--inner">
        <div class="small-3 columns">16:30-17:00</div>
        <div class="column-separator">O</div>
        <div class="small-8 columns end">Second row</div>
      </div>
      <div class="row row--inner">
        <div class="small-3 columns">17:00-18:00</div>
        <div class="column-separator">O</div>
        <div class="small-8 columns end">Third row</div>
      </div>
      <div class="row row--inner">
        <div class="small-3 columns">18:00-19:00 ...</div></div></div>
  • Equal height columns

    JS would have to wait for the element to load. This CSS patch solves the problem in ARTE Concert

    <div class="wrapper">
      <article>
        block 1
        <br>
        block 1
        <br>
        block 1
      </article>
    
      <article>
        block 2
        <br>
        block 2
      </article>
    
      <article>
        block 3
        <br>
        block 3
      </article>
    
      <article>
        block 4
        <br>
        block 4
        <br>
        block 4 ...</article></div>
  • Waves for Marzee Labs

    CSS animated waves

    var $sea = $(".sea"),
        waveWidth = 10,
        waveCount = $(window).width() / waveWidth;
    
    for(var i = 0; i < waveCount; i++){
        $wave = $("<div>").addClass('wave').css('width', waveWidth + 'px ...
  • An image scale calculator?!?!

    Just a random thing my designer friend asked me to do... I really should have used Angular.js for the data-binding...

    'use strict';
    
    document.getElementById('normal').oninput = document.getElementById('2x').oninput = document.getElementById('factor').oninput = function(){
        calculateAndFill(this)
    };
    
    function calculateAndFill(field ...
  • Slick Slider Issue 1018 #60 is the latest revision

    In answer to https://github.com/kenwheeler/slick/issues/1018

    $(".slider").on("afterChange", function(event, slick, currentSlide){
        console.log(slick.$slides[currentSlide].id);
    }).slick();
    
  • Slick Slider Contribution (issue 1006) #6 is the latest revision

    Demo for https://github.com/kenwheeler/slick/issues/1006

    $(".myError").slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        infinite: false
    });
    
    $("#infoMyError").text(
        "_.slideCount: "+
        $(".myError").slick("getSlick").slideCount+
        " || "+
        "_.options.slidesToShow: "+
        $(".myError ...
  • Slick Slider Contribution (issue 1006) #13 is the latest revision

    Demo for https://github.com/kenwheeler/slick/issues/1006

    $(".slider").slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: false
    });
    
    $(".sliderError4").slick({
        slidesToShow: 4,
        slidesToScroll: 2,
        infinite: false
    });
    
    $(".sliderError5").slick({
        slidesToShow: 4 ...
  • Slick Slider Contribution (issue 1006) #6 is the latest revision

    Demo for https://github.com/kenwheeler/slick/issues/1006

    $(".slider").slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: false
    });
    
    $(".sliderError2").slick({
        slidesToShow: 3,
        slidesToScroll: 2,
        infinite: false
    });
    
    $(".sliderError3").slick({
        slidesToShow: 3 ...
  • Grelhacar footer detail

    In converting this to CSS (instead of image) we must decide which value looks best

    function changeVal (sliderVal) {
        sliderVal = sliderVal+'px';
        document.getElementById('separator').style.width = sliderVal;
        document.getElementById('sliderVal').innerHTML = sliderVal;
    }