Forms

Slides Viewer: HTML5 Web Component

One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when I decided to rework it as a HTML5 Web Component as part of my recent amusement with this new and exciting aspect of HTML5.

The result is that now users could easily create a full-blown slides viewer just by utilizing this simple markup:

<acidjs-xslides>
    <acidjs-xslides-slide>Slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Another slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Yet another - simple text or complex HTML</acidjs-xslides-slide>
</acidjs-xslides>

You can check the demo and download X-Slides on my Experiments and Insight website, and if you are interested in HTML5 Web Components, X-Tags or Google Polymer, you will probably find inspiration in my other endeavours with this technology.

Advertisements

X-Password: HTML5 Web Component Input on Steroids

Just finished my new experiment with HTML5 Web Components and Mozilla X-Tags, called X-Password. What you get is a JavaScript-less extended password input, allowing Windows 8-like password reveal behavior out of the box:

<acidjs-xpassword></acidjs-xpassword>

x-password

The input supports all JavaScript getters, setters, events and form submission is handled natively. X-Password does not have any required attributes, but to achieve different behaviors you may play with the following (and also any other HTML attribute).

  • width – Optional input width, default: 300
  • name – Optional input name
  • id – Optional input id
  • enabled – Boolean, optional. Default: true
  • editable – Boolean, optional. Default: true
  • placeholder – Placeholder text, optional.
  • value – Optional default value
  • buttonhint – Optional tooltip for the reveal button
  • visible – Optional, boolean. If set to true, the input will be rendered as text type

You can check the demo and download X-Password on this page, and if you are interested in the exciting world of HTML5 Web Components, you may check my other posts dealing with this technology.

Have a great weekend!

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

CSS3 Rating Stars with Hover and Selection

Just before the weekend, here’s a pure CSS3 implementation of a rating star system with support for selection and hover, made-up by radio buttons, rtl, generated content, minimal markup and sibling selectors.

thumb

Enjoy the weekend!

Related Posts and Links

Skinnable CSS3 Metro Forms

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

Say hi to AcidJs.Forms, the successor of one of the oldest components in Acid.JS Web.UI – Forms.JS!

AcidJs.Forms is a powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript. The component will seamlessly add cool metro looks to input boxes, buttons, file inputs, checkboxes, radiobuttons and dropdowns.

acidjs-forms

Key Features
  • Lightweight and imageless, fully CSS3-driven skins.
  • Fast initialization and small footprint.
  • CSS3 animations and transitions.
  • Support for themes.
  • Rich client API and custom events.
  • Support for multiple themes on a single page.
  • No additional markup required.
  • The full version is shipped with 5 ready to use themes (Default, Gray, Orange, Red and Violet).
  • Fallback for non-CSS3 browsers.

Check the info here, look at the demo and have fun!

HTML5, CSS3 and JavaScript iPhone Toggle Switch Button

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

My latest experiment, a follow up to an earlier CSS3-only solution. Check the demo and implementation on this page and have fun!

javascript-iphone-toggle-buttons

Related Posts

How to Create an Inline Masked File Upload Form with CSS3 and HTML5

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

The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, which I wanted to share with you.

The Markup:

<div class="css3-inline-file-input">
    <form action="./" enctype="multipart/form-data" method="post" name="form-01">
        <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
    </form>
</div>

The CSS:

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;

    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}

Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.

You can check and download the demo on this page.

Enjoy the rest of the day!

Related Posts