Ryan's public fiddles
-
Opening Times
Counter that starts at 10am AEST time and counts down till closing time. Has some variations for weekends and weekdays.
-
Simple vertical menu
No-Library (pure JS), HTML, CSS, JavaScript
-
Subsection bullet points
CSS that allows you to number subsection bullet points like a document report
-
Simple jQuery toggle bits
DRY JS for adding simple toggle effect on links to show description underneath.
-
Countdown timer closing time
JS countdown timer which takes date/clock time and offsets it so it always equals AEST, then does a countdown until 8pm every day.
-
Shuffle Random Div Containers
Shuffle lots of empty div containers around on page when it loads
-
Shuffle Div Containers
Testing for jQuery to randomly shuffle div elements presentation on page load.
-
Animated tooltip
Tooltip fades in (also moves in on Y axis) and is placed on a time to fadeout
-
Animated tootip
jQuery 1.11.0, HTML, CSS, JavaScript
-
Simple active state toggle
Example to initiate active state of jquery toggle via JS data variables
-
WiseNet API JSON
Trying to retrieve WiseNet API data
-
Other sites accordian
Raw accordian made with Jquery core. Simple as simple does.
-
Other sites accordian
Raw accordian made with Jquery core. Simple as simple does.
-
Toggle button description
Demo of inline slide toggle
-
Easy "3D CSS card flip" example
Let's see a very very basic integration of the awesome "card flip" effect with simple CSS3 properties. Feel free to use/share/contribute.
-
Javascript Opening Hours SLQ Packery
This fiddle shows how to capture and measure opening hours time data and graphically show it. It takes into consideration different timezones and offsets them so the time is always Brisbane, Australia time (UTC+10). Thank god we don't have to deal with daylight saving.
-
JSON Table overlay data
Using a JSON feed to overlay data on a preformatted HTML table.
-
Email string mod
Cutting email text out of JS string
-
JSON Parsing
Parsing JSON API generated by LibCal for web page display
-
Image filter rollover effect
No-Library (pure JS), HTML, CSS, JavaScript