It has always seemed odd to me that the 4-way rocker switch that’s at the top of almost every TV and DVR remote and game controller has not made its way into the collection of web input widgets. Even with all the new whizzy input controls in HTML5, there’s not an analogous 2-axis control.
I took a crack at creating one and discovered that I couldn’t do it with pure CSS. While it’s possible create things that look like triangles on the screen, in (cyber) reality they are rectangles with transparent bits. There’s no apparent way to create triangular areas for hover detection.
But using mouse position detection and a bit of jQuery, it’s not too hard make something work. The code is up on jsFiddle. The widget is re-sizable, with the scale of all the various bits and pieces being controlled by the font-size property in the rockerControl div.
“An apple for the teacher” is an old tradition in America that has fallen by the wayside. But doing a little something to show your children’s teachers that you appreciate their effort and understand the challenges they face is still worth the effort.
; ?>/wp-content/themes/header_images/CC-BY-SA88x31.png)
Copyright © 2008-2012 Richard A. Milewski