JSFiddle

James Long's public fiddles

• Responsive Table

  A technique for managing responsive tables.

  • Delete fiddle
• Simple Animation Tip #1 is the latest revision

  CSS animation will re-start when the item becomes visible

  • Delete fiddle
• Speech-mark style image

  Seems to creates a triangle of image under the image, giving it an irregular shape. Only works with solid colours ATM

  • Delete fiddle
• Animated Summary Icon #15 is the latest revision

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

  • Delete fiddle
• Demonstrating start and reversed attributes #1 is the latest revision

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

  • Delete fiddle
• Interacting with hidden attribute #5 is the latest revision

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

  • Delete fiddle
• Styling hidden attribute #2 is the latest revision

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

  • Delete fiddle
• Idea for bot stopping #1 is the latest revision

  jQuery 2.2.4, HTML, CSS, JavaScript

  • Delete fiddle
• Position Object

  A CSS object designed to handle positioning elements in known places. Not sure how useful this is yet

  • Delete fiddle
• A React select-all demo #2 is the latest revision

  Just a demp to see how to use React in JSFiddle

  • Delete fiddle
• Drawing Lines

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

  • Delete fiddle
• Basic JS animation #1 is the latest revision

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

  • Delete fiddle
• CSS variables in pseudo-elements #3 is the latest revision

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

  • Delete fiddle
• Spacing Object

  A basic object that's easily extended.

  • Delete fiddle
• CSS Objects #5 is the latest revision

  A collection of CSS layout objects. http://sk80.co.uk/2017/10/6-examples-css-custom-properties-improving-oocss/

  • Delete fiddle
• Text Overflow Issue #3 is the latest revision

  How can I get the text to clip in both examples?

  • Delete fiddle
• The screen rotate effect #1 is the latest revision

  A demo of how I'd do it

  • Delete fiddle
• CSS Custom Properties and JS

  A demonstration of JavaScript reading and writing CSS Custom Properties

  • Delete fiddle
• Panels from custom properties

  A quick demonstration of using CSS custom properties to adjust the colour of a module, like Bootstrap's panels

  • Delete fiddle
• Attempting to simulate background-size:cover

  Various attempts and notes about them. I need the image to scale and position but without being a background

  • Delete fiddle
• Size Options

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

  • Delete fiddle
• Flex equal heights #3 is the latest revision

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

  • Delete fiddle
• No Button

  A class that removes the button styling

  • Delete fiddle
• Alt text

  Showing the use of alt

  • Delete fiddle
• Dom

  Just playing

  • Delete fiddle
• Nested menu #5 is the latest revision

  Help needed

  • Delete fiddle
• Showing off flexbox

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

  • Delete fiddle
• BEM

  Showing BEM

  • Delete fiddle
• Landmarks

  Showing how landmarks can be used to navigate a website.

  • Delete fiddle
• Table headings #5 is the latest revision

  A quick overview of table headings

  • Delete fiddle
• Throttle/Debounce

  A demonstration of the difference between throttle and debounce

  • Delete fiddle
• How to oddly-aligned list #2 is the latest revision

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

  • Delete fiddle
• Playing with util chains

  Very much "thinking out loud" code - my util library with chainability

  • Delete fiddle
• jQuery Aria #3 is the latest revision

  WIP

  • Delete fiddle
• Testing Google-style images #2 is the latest revision

  jQuery 2.2.4, HTML, CSS, JavaScript

  • Delete fiddle
• Multi-line ellipsis #1 is the latest revision

  Pure CSS and responsive

  • Delete fiddle
• SOCK demonstrations #1 is the latest revision

  Each version is a different demonstration.

  • Delete fiddle
• Template engine demonstration

  The template engine from the blog post http://sk80.co.uk/2016/08/template-engine-code/

  • Delete fiddle
• Composite Pattern Example

  An example of the composite pattern creating a food menu

  • Delete fiddle
• Template rendering #2 is the latest revision

  Initial thoughts on how to create a template engine

  • Delete fiddle
• Simple opacity

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

  • Delete fiddle
• Firefox bug

  Caption element does not have opacity applied

  • Delete fiddle
• Safari flex bug

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

  • Delete fiddle
• Product listing

  Trying to line up listing elements

  • Delete fiddle
• Date parsing #37 is the latest revision

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

  • Delete fiddle
• Columns #5 is the latest revision

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

  • Delete fiddle
• Full height label #11 is the latest revision

  http://stackoverflow.com/questions/34154686/how-can-a-label-completely-fill-its-parent-td-in-column-structure

  • Delete fiddle
• Flexbox sticky footer #8 is the latest revision

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

  • Delete fiddle
• Testing accordion

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

  • Delete fiddle
• Price box layout

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

  • Delete fiddle
• Possible Chrome bug

  The two grey cells should be touching the green area, but not within it

  • Delete fiddle
• Array Exec #2 is the latest revision

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

  • Delete fiddle
• Sexy markup

  50 shades of grey

  • Delete fiddle
• Swanky triangles

  How to do Leo's triangles

  • Delete fiddle
• Snap to Pixel #1 is the latest revision

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

  • Delete fiddle
• Core idea #1 is the latest revision

  Idea for the core

  • Delete fiddle
• Feedback stars

  Basic feedback stars. Should be fully accessible, should highlight previous stars, should be as CSS-driven as possible

  • Delete fiddle
• Internet Explorer pseudo element relative size workaround #3 is the latest revision

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

  • Delete fiddle
• Justify

  Playing around with text-align to affect layout

  • Delete fiddle
• Fixed table header #8 is the latest revision

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

  • Delete fiddle

• 1
• 2