JSFiddle

BrownieBoy's public fiddles

• HB App Links

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React Base Fiddle (JSX)

  Starting point for creating JSFiddles with React. This uses React with Addons.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React Survey App - state at top level

  React Survey App. State now moved to the top most level.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React Survey App - state in wrong place

  React Survey App, but with state still stuck down at the CheckboxInputField level. We need to move it higher up.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, controlled checkbox field, with state management done correctly!

  Using Reactjs, a single, controlled field. "Field" in this case refers to a group of input checkbox elements, matched on their name tag. Here, the state management is done correctly, i.e. at the highest component level. State is then passed down to the lower level components as props.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, controlled checkbox field, with a poor attempt at state management

  Using Reactjs, a single, controlled field. "Field" in this case refers to a group of input checkbox elements, matched on their name tag. This is a first, deliberately very poor attempt at state management

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, managed checkbox field. No state management,

  Using Reactjs, a single, managed field. "Field" in this case refers to a group of input checkbox elements, matched on their name tag. No state management though.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, controlled checkbox field, correct

  Using Reactjs, a single, controlle element done correctly. Click on the checkbox and the state changes, the input re-renders

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, managed checkbox field, wrong!

  Using Reactjs, a single, managed element done incorrectly. Click on the checkbox and nothing changes!

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, uncontrolled checkbox element

  Using Reactjs, a single, uncontrolled checkbox input element.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• React single, uncontrolled checkbox field

  Using Reactjs, a single, uncontrolled checkbox input field.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• ReactJS Managed Checkbox group 2

  Managed checkbox field groups.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 04umg6Lh

  React 0.9.0, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Dynamic jQuery Validation

  Dynamic adding/removal of validation rules for jQuery Validate library.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Zepto tap/click

  Zepto 1.0rc1, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• CSS :not selector test

  A simple test of how to hide and show elements using the classes, especially the new :not() pseudo-selector in CSS3. NB: doesn't work in IE8 or earlier unless you add a shiv such as selectivizr

• Private fiddle Extra
• Delete fiddle
Groups Extra
• jQuery and checkbox click events

  When triggering a checkbox click event via jQuery's .trigger() function, the element's reported check statement will be reversed. The check status doesn't appear to change until *after* the event has completed. When triggering the event in the normal way, by clicking on the checkbox itself, the element's checked status changes immediately. To work around this, I pass an extra parameter, called nonUI, from the jQuery .trigger() to the checkbox's click handler. If that parameter is present and set to true, the reported check status is inverted and is now what we would expect it to be. The button on the page triggers the checkbox's click event via .jQuery.trigger().

• Private fiddle Extra
• Delete fiddle
Groups Extra
• iScroll drag/drop problem

  jQuery 1.7.2, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• c9mXt

  Mootools 1.3.1 (compat), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• EmberJS pushObject test 3

  Still with Ember 0.9.8.1, songsController now uses a directly JavaScript push to the content array rather than Ember's pushObject call. The template is populated correctly gain.

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• 2
• ▶︎
• 3