flatiron_school's public fiddles
-
HTML - Anchor links (scroll to id content)
No-Library (pure JS), HTML, CSS, JavaScript
-
JavaScript - Module Pattern using Closures
This pattern allows the creation of private variables and methods in contrast to a returned object that has public methods users can access.
-
JavaScript - Create a Library
An example of the the creation of a very generic library called jonQuery that demonstrates setting up method chaining.
-
CSS - Display
See the differences between different display setting: inline, block, table, table-cell, inline-block, inline-table
-
CSS3 - Column Count & Media Queries
Change column count from 2 to 1 on smaller screen sizes.
-
jQuery - Generic Video Game - Knights Quest beta 2
Simple jQuery Game use the arrow keys to attack the dragon, but stay away from his fire! Open the JS Console to see results.
-
jQuery - Trigger Audio on Events
jQuery 1.9.1, HTML, CSS, JavaScript
-
CSS - Vertical Align Middle
Two methods for vertical align centering. The first using table display does not work with fluid % based measurements on the parent. The second using absolute and relative positioning works even when using % based heights.
-
CSS - Checkers Game Screen Layout
Vertical and Horizontal center inside 100% tall parent next to a fixed width column
-
JavaScript Closures
No-Library (pure JS), HTML, CSS, JavaScript
-
JavaScript Hoisting
Explanation of hoisting and why to be care.
-
CSS - Transparent Fixed Navbar
No-Library (pure JS), HTML, CSS, JavaScript
-
CSS - Simple Centered Nav Links
No-Library (pure JS), HTML, CSS, JavaScript
-
HTML - Multiple Column Span
No-Library (pure JS), HTML, CSS, JavaScript
-
jQuery - Isolate Button Groups
jQuery 1.9.1, HTML, CSS, JavaScript
-
jQuery - Div Bar Chart Sized on Data
simple bar chart built with jQuery by sizing divs. For more sophisticated data visualizations see Rafeal Js or D3 js
-
CSS - Center Middle Button
No-Library (pure JS), HTML, CSS, JavaScript
-
jQuery - Multi Button Listener
jQuery 1.9.1, HTML, CSS, JavaScript
-
CSS - fullscreen background gradient
No-Library (pure JS), HTML, CSS, JavaScript
-
jQuery - Tweet Character Counter
example code for tweet character count.