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.