Travis's public fiddles
-
Bootstrap Carousel with Thumbnail Strip
Shows how to change the indicators in the Bootstrap carousel to be image based instead of the normal dots.
-
CSS-Based Expanding Menu
Simple example of building a menu that expands over content when clicked while in its small state using HTML and CSS with no Javascript.
-
Expanding Elements on Scroll
Expand elements into a predefined area as they scroll into view. Good for images and similar elements.
-
Expanding Input Outlines
Animate the expanding and contracting of an input's outline to show an active state using :focus and transitions.
-
Infinite Slider
Simple way of creating infinite slider.
-
Sliding Pages
Make content pages slide into view from the proper direction using keyframes with translate. Assign relevant keyframe with jQuery.
-
CSS Animation Test
Dynamically changing the "from" part in an animation so that it uses the current location of the dot. Involves creating a keyframes string to inject into a style element and then applying the appropriate animation to the dot element.
-
Modal Experiment
Just playing with modal ideas.
-
Hidden Nav Concept
Simple concept of hiding the nav behind the page's content to allow more screen space for that content.
-
Push Nav Experiment
Just playing around with building a nav that pushes in from the left, mostly for mobile screens.
-
Left-to-Right Sliding Modal
Test modal that slides into view that uses transition for animation and calc() for positioning.
-
Deselectable Radio Button
A group of radio buttons normally won't allow you to "deselect" so that none are selected. Simple javascript to allow for this.
-
Changing Text on Link Hover
Similar to the link button using multiple spans inside the link to show display states but this one uses nothing but CSS with :before and :after pseudo-elements.
-
Link Button with Text Display States
Link-based button show different display states including different text for each state.
-
CSS iPhone Style Checkbox
Another way to make checkboxes more interesting.
-
CSS Slider Switch
Slider on/off switch using CSS.
-
CSS Suggestion Box for Inputs
Make a suggestion box appear once an input gets focus using CSS.
-
Clearing Input Fields on Focus
Clearing input fields that have placeholder text as values when they receive focus. Remembers the default text in case nothing changes.
-
Labels as Containers
Using labels as containers of their inputs to provide for styling and positioning.
-
FizzBuzz
Just the traditional FizzBuzz so I can say I've done it.