Alan 's public fiddles
-
ARIA - keyboard accessible navigation bar
jQuery 1.6.4, HTML, CSS, JavaScript
-
SO - click event bound to css attribute selector
Answer to SO question http://stackoverflow.com/questions/33395317/jquery-add-class-to-steps/33395581#33395581
-
Converting a string to object
Comma and space delimited values, equals delimited key to value, can be found in a string. Using regex, trim and split to convert a string into object
-
Accessible navigation using keyboard events, also accessible via mouse
Uses jQuery focus, keydown, blur events to handle ARIA transitions for accessibility.
-
Screen reader keyboard navigation bar issues
Uses jQuery for keyboard navigation, uses hover with mice for non accessible needs
-
Close current window
Uses HTML/Javascript to achieve this
-
Open a new window
Uses jQuery/HTML to open a new window/tab
-
Finding the strings which are comma and space separated
These strings represent numbers, using Regex to match the desired result
-
Keyboard navigation through a drop down menu
Uses specific down, esc and tab key to help users navigate through a drop down menu and its elements intuitively
-
CSS only arrow
An arrow made using CSS properties only
-
Scrollable sections on fixed background with side menu navigation
Fixed image and text highlight the center piece of the site, which change dynamically as user scrolls between sections. A navigation bar makes scrolling relevant as well
-
Keyboard and mice accessible drop down menues
Providing accessibility to a standard drop down menu, so that it can be navigated using TAB keys. When having selected a menu element, the DOWN key opens such menu, whose elements can be navigated via TAB. One can exit such menu by pressing the ESC key.
-
CSS triangle and circle icons
Usage: the data-bannertype defines what the icon will be used for and under which CSS shape it will exist. This is useful if you are dynamically naming the data-bannertype to present a different type of icon
-
Accessibility: hidden text for image
Replace social images for text for accessibility with the visually impaired, best tested via screen reader.
-
Top Left triangle with text inside
Meant to represent a hint message over a parent element. Support for IE9+, Chrome, Safari, Opera. Other support can be added easily, but do so in a separate CSS stylesheet for the particular browser you are supporting.
-
Hoverable div with content and background image
jQuery 2.1.3, HTML, CSS, JavaScript
-
UTC Date formatter for SailsJS
A very quick and simple date parser geared to handle dates sent from the SailsJS API. SailsJS sends the date strings back in local time, but what is expected by the database is UTC time.
-
Wrapping subtitle
Using flex display in order to achieve a wrapping effect between title and subtitle
-
Menu left layout fixed layout
Menu left layout, fixed header/footer, scrollable content
-
Animated click-to-scroll-top
Using a click event to animate the page scroll, to the top of the next list element in a circular array manner