productivity

Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets

Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you.

Star Rating Widget

Fully functional star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).

thumb

Animated CSS3 Vertical Accordion

The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.

animated-css3-only-horizontal-accordion

CSS3 Treeview

Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.

css-3-treeview

CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.

css3-treeview-with-multiple-node-selection

CSS3 Tabstrip

Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.

css3-tabstrip

Notifications Bar

JavaScript-less animated notifications bar, utilizing a couple of div elements and a single hidden checkbox.

css3-notification-bar

iPhone Toggle Buttons

Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.

javascript-iphone-toggle-buttons

Animated CSS3-only Slides Viewer

Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.

slides-viewer

Custom Skinnable Radio Buttons and Checkboxes

My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

Enjoy the weekend!

Related Posts and Links

Development and Productivity Extensions for Google Chrome

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

If you are looking for cool development and productivity tools, here are a few, created by me, and available as handy Chrome Chrome extensions:

Builder.CSS

Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.

builder-css

W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.

validator-valid

Stickeez

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.

stickeez

Image to Base-64 Data-URI Encoder

Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.

image-to-base-64

Hasher Message Digest Encoder

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.

hasher

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Useful JavaScript Classes and Functions

  • Crossbrowser image reflections enabler JavaScript class.
  • JavaScript Mapper Class for RESTFul Methods – Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data.
  • XML to JSON JavaScript Objectifier Class – Simple XML to JSON objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.
  • URI to JSON Serializer Class – Tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).
  • IMDB Fetcher – Experimental IMDB JavaScript and PHP API – Makes possible the execution of cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc.
  • Quick and Dirty Localization With JavaScript – A quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc), operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8.
  • JavaScript Instance Name Finder – Small JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.
  • HTML5 Placeholder Enabler – The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it.
  • HTML 5 Details Element Enabler – According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.
  • WebWorkers JavaScript class.
  • Classless JavaScript inheritance.
  • JavaScript class augmenter.
  • JavaScript API for TinyURL.
  • HTML Validation Bookmarklet.
  • JavaScript Template Engine.

HTML5 Sticky Notes

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls.

You can also use Stickeez as a Google Chrome extension.