JSFiddle

thirdender's public fiddles

  • Letter Jam word search

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

  • Multi-color CSS shield badge

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

  • Lightweight Mermaid live editor

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

  • Follow mouse cursor with angle

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

  • Expanding card

    Shows a card expanding out from the parent card on hover

  • 48jL2zka

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

  • 2jL7qwbd

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

  • Progress bar approaching two values

    Progress bar slowly approaches two estimated values. Use case is a queued job, where the average time of the job and average time spent in queue are both known.

  • Absolutely positioned min-width/max-width

    Absolutely positioned elements will grow to fit the size of their content, but not grow larger than the width of the parent element unless an explicit width is set. In the case of a bubble popup, this means the text will wrap at the width of the "?" or whatever text triggers the popup. max-width will not allow the absolutely positioned element to grow larger than the width of the tooltip trigger, and setting min-width or width will make the element too wide (the bubble will not "shrink" to fit shorter tooltip text). A second absolutely positioned element is used to overcome this limitation, and acts as a new "max-width" for the text.

  • Email signature

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

  • Nucleaus logo

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

  • 0dcjpwos

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

  • Simple off-screen nav

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

  • fqm5vh9L

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

  • Nucleaus video in Bootstrap modal

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

  • h5sn10cx

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

  • Chosen search box options

    Demonstrates hiding the search box in a jQuery Chosen dropdown

  • JS Setters/Getters

    Using JS setters/getters inside of a object constructor pattern. We expose a hidden scoped variable as a property of the object (in this case, the variable `name` is exposed as a property `name). However, we can modify the value of the variable before returning it as an object property, and even prevent setting the value of the variable by throwing an error in the setter.

  • CSS only tabs

    This has pretty much been done to death, but here's my hat in the ring. The Javascript is only included to provide IE8 support. However, I didn't actually test IE8 support, so if someone would be so kind… Oh yeah, and opacity needs the -ms-filter bit. Boy I'm lazy when it comes to IE8. You really have two options for the height of the tabs. If you set the initial display state (`.tabs section .content`) to `display: none;`, the tab container will grow and shrink to fit the open tab. If you go with opacity (as I have done here), the tab container will keep the height of the tallest tab. Oh yeah, and it only really works with one row of tabs because there's a margin-top set on each of the tab contents. If you think the number of tabs will wrap to another row, first thought is to use @media queries to compensate. Otherwise, better solutions are welcome.

  • FlexSlider dynamic vertical height

    FlexSlider currently (2014-07-15) doesn't support dynamic heights for the vertical slider (see https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties#direction). Based on some discussion at https://github.com/woothemes/FlexSlider/issues/174#issuecomment-12529436 I added some code for the vertical slider that handles content of varying heights, and resizes the content when the browser window resizes (so the slider is responsive). The code also demonstrates how to load FlexSlider options from HTML5 data-* attributes on the FlexSlider container. Right now it only checks for attributes listed in the `attrs` array, so if you're using another option you will need to add it to the array. This code optionally uses the wonderful http://benalman.com/projects/jquery-throttle-debounce-plugin/ if available to limit how often the window resize callback is run.