JSFiddle

thirdender's public fiddles

  • Bootstrap Skeleton

    This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

  • Style LABELs under INPUTs

    This is (more or less) the correct way to style labels under inputs. The minimal Javascript is there only to toggle the `notEmpty` class on the LABEL. This is necessary because at the moment there is way to tell if an INPUT is empty or not with CSS alone.

  • Stacked papers (CSS3)

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

  • h4xuJ

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

  • Jeopardy structure (in CoffeeScript)

    jQuery 2.0.0b1, HTML, SCSS, CoffeeScript

  • Webkit Mask example

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

  • Sh2Zw

    jQuery 2.0.0b1, HTML, SCSS, CoffeeScript

  • XxKBu

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

  • Better 100% navigation

    One of the basic navigation menus is a strip of links spread across the top of the page. This is hard to pull off programmatically… The old way (TABLEs, or the CSS `display: table;` property) allows the nav to grow past 100% width if too many links are added. The new way (`display: flex;`) is ill supported. Thankfully, the two methods can be combined fairly safely :-p This fiddle demonstrates a 100% width menu that wraps to two lines when the text becomes longer than the available space. The wrapping behavior relies on the new `flex-wrap` property, which is only supported in Chrome 21+ and Opera 12.10+. This property is part of the CSS3 Flexbox recommendation (http://dev.w3.org/csswg/css3-flexbox/#flex-wrap) and should be more widely supported soon. For all other browsers (back to IE8: http://caniuse.com/#search=table), `display: table;` will be used instead.

  • Kzg3y

    jQuery (edge), HTML, SCSS, JavaScript

  • Ud9QM

    jQuery (edge), HTML, SCSS, JavaScript

  • Simple jQuery and jScrollPane running latest code from git

    This is a simple jScrollPane setup running the latest code straight from git.

  • DL-DT-DD list with images

    This shows how to style a DL-DT-DD list with the DL tag floated left, but remaining on the same line as the DD element. Because it makes use of the :after pseudo-element, this technique should not work in IE7, but by some quirk of IE's rendering it does. It also works with multiple DT elements per DD, but not with multiple DD elements per DT. The DIV.overflow inside each DD is optional. It keeps the entire contents of the DD as a column to the right of the DT (it prevents the content from wrapping down under the DT content). I originally wanted to put the `overflow: hidden;` on the DD element, but that prevented the :after pseudo-element from clearing the DT element properly. The single extra DIV.overflow inside each DD solved the problem of getting the DD content back into a pseudo "column".

  • jd77U

    Mootools 1.4.5, HTML, SCSS, JavaScript

  • Javascript `prompt` demonstration

    jQuery (edge), HTML, CSS, JavaScript

  • Automatically scrolling DIV

    A DIV that scrolls automatically, pausing when the mouse is hovered over the container.

  • Make `INPUT` tag fill remaining element width

    Not sure if the `LABEL` tag should wrap around everything, but eh, tired of the `for` attribute.

  • Sticky footer using `display: table;`

    Based on the code at http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/. Thanks for getting this ball rolling! I made a few modifications based on a few things I noticed and some knowledge of recent containment hacks to expand IE6/7 support. I also wrote the Javascript to make the content expand as necessary in non-`display: table;` supporting browsers. This code has been written, not tested. YMMV, please notify me at http://stackoverflow.com/questions/12119755/how-to-get-page-content-to-stretch-and-stick-footer-to-bottom-of-page/12119871#comment16205405_12119871 if you have problems.

  • CSS on-screen ruler

    jQuery 1.8.3, HTML, CSS, JavaScript

  • Element vertically aligned to the middle

    Uses an inline-block element hidden with a negative margin to vertically-align an element to the middle of another element. Note: `display: inline-block;`, `:before`, and `> *` are not supported natively in IE6-7, so look for a good IE fix if support for those versions is necessary.