JSFiddle

  • Animated Checkbox Effect with Font Awesome #18 is the latest revision

    Proof of concept for an animated checkbox thing on radio butons.

    <input class="radioBtn true" id="test-yes" name="test" type="radio" value="Yes" />
    <label for="test-yes"><div class="toggle-icon fa fa-check"></div> Yes</label>
    
    <input class="radioBtn false" id="test-no" name="test" type="radio" value="No" />
    <label for="test-no"><div class="toggle-icon fa fa-check"></div> No</label>
    
    <!-- ignore this bit -->
    <footer>
        <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
    </footer>
  • Inputs change content displayed

    Use .data() to determine which elements should be shown/hidden.

    $('[name="term-option"]').on('change', function () {
        var hiddenOptions = $(this).filter(':checked').next().data('isHidden');
    
        $('[data-option]').slideDown();
    
    	$.each(hiddenOptions, function (k) {
            $('[data-option ...
  • Get Number of Decimal Places

    jQuery 1.9.1, HTML, CSS, JavaScript

    var dataNum = $('[data-num]').html().split(".");
    
    if (dataNum.length === 1) {
        dataNum = 0;
    } else {
        dataNum = dataNum.pop().length;
    }
    
    $('[data-result] span').html(
        dataNum
    );
  • Inputs have data - let's use it

    Use .data() to display information tied to a selected radio button.

    $('[name="term-option"]').on('change', function () {
        var data = $(this).filter(':checked').data();
    
    	$.each(data, function (k) {
            $('[data-number="' + k + '"]').html(data[k]);
        });
    });
  • Animated Banner Playground for /r/amiibo

    This is where I play around with the banner for the amiibo subreddit. Sometimes.

    <p>This has been moved to <a href="http://codepen.io/erikwoods/pen/GZKGow" target="_blank">CodePen</a>.</p>
    
    <!-- ignore this bit -->
    <footer>
        <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
    </footer>
  • How I SVG'd

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

    <p>In conjunction with Modernizr, I recently came up with this bit of jQuery to replace all .svg images with .png ...</p>
  • Some simple CSS animations

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

    <p>Hover to animate.</p>
    
    <div class="i"><span>1A</span><div class="rotate1"></div></div>
    
    <div class="i"><span>1A--two</span><div class="rotate1--two"></div></div>
    
    <div class="i"><span>1B</span><div class="rotate1b"></div></div>
    
    <div class="i"><span>1B--two</span><div class="rotate1b--two"></div></div>
    
    <div class="i"><span>1C</span><div class="rotate1c"></div></div>
    
    <div class="i"><span>1C--two</span><div class="rotate1c--two"></div></div>
    
    <div class="i"><span>1D</span><div class="rotate1d"></div></div>
    
    <div class="i"><span>1D--two</span><div class="rotate1d--two"></div></div>
    
    <div class="i"><span>1E</span><div class="rotate1e"></div></div>
    
    <div class="i"><span>1E--two</span><div class="rotate1e--two"></div></div>
    
    <div class="i"><span>2A</span><div class="rotate2"></div></div>
    
    <div class="i"><span>2A--two</span><div class="rotate2--two"></div></div>
    
    <div class="i"><span>2B</span><div class="rotate2b"></div></div>
    
    <div class="i"><span>2B--two</span><div class="rotate2b--two"></div></div>
    
    <div class="i"><span>3A</span><div class="rotate3"></div></div>
    
    <div class="i"><span>3A--two</span><div class="rotate3a--two"></div></div>
    
    <div class="i"><span>3B ...</span></div>
  • Responsive Fake Overlap

    Give the impression that an image is breaking out of its parent element by using a pseudo element on the parent. It scales nicely with the screen size as the image resizes.

    <section>
        <img src="http://vignette4.wikia.nocookie.net/mario/images/f/f8/Mario_Artwork_for_MK8.png/revision/latest?cb=20140223230520" alt="" />
    </section>
    
    <footer>
        <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
    </footer>
  • Simple Accordion #3

    jQuery 2.1.0, HTML, CSS, JavaScript

    $('[data-accordion="link"]').on('click', function (e) {
        e.preventDefault();
        var clicked = $(this);
    
        $('[data-accordion="item-open"] [data-accordion="content"]')
            .slideToggle(500, function() {
                $('[data-accordion="item-open ...
  • Theresa's Cereal

    jQuery 1.11.0, HTML, CSS, JavaScript

    $('#cereal_nav a').on('click', function (e) {
        e.preventDefault();
        var clicked = $(this);
        var ingredient_class = clicked.attr("data-ingredient");
        var ingredient_name = clicked.find ...