custom checkboxes

Web 2.0 Widgets for your Website

Here is a list of a couple of useful and extremely easy to integrate widgets that you may use to add cool Web 2.0 looks and functionality to your website.

Forms.JS – the successor of 6 separate controls for form styling, now consolidated in a single powerful component that will give you total control over the form elements on your page without any additional markup or sophisticated JavaScript.

Dialogs.JS – Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!

Web 2.0 AJAX Loading Panel – Enhance your site’s look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!

AJAX Gallery.XML – a lightweight, crossbrowser, skinnable and extremely easy to use component for displaying images in cool Web 2.0 looking style and a lightbox.

AJAX Contact Form – It is skinnable, highly customizable, localizable, crossbrowser and ultra fast. The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

AJAX Guestbook – an easy to use, AJAX driven, crossbrowser and skinnable guestbook that will give your visitors pleasant Web 2.0 experience on your website.

Rounded Corners Panel.JS – Create rounded corners with any dimensions without additional images or sophisticated CSS and JavaScript coding. Rounded Corners Panel.JS does all this for you. You may choose between three types of rounded corner radius, you are allowed to specify dither (i.e. antialias) color, so your rounded corners’ edges do not look frayed.

TabStrip.XML – a lightweight, yet powerful, skinnable and crossbrowser AJAX driven control for creating tabbed interfaces for websites.

Advertisements

Acid.JS Component Library 3.7 is Out With 1 Update and New Website

The new version of Acid.JS has just been released with one update * – version 2.0 of GuestBook.XML – an AJAX instant feedback component. I am also happy to announce the new website of the libary as well, so make sure you update your links.

* A couple of outdated components have been discontinued, and they are no longer shipped with Acid.JS – AJAX Photo Gallery, CSS Watermark, Antipixel Buttons.XML, Upload.XML, Skinnable Browser Dialogs and Page Announcement.XML.

Acid.JS Web 2.0 Component Library 3.6 is Out With 3 Updates

The new version of Acid.JS has just been released with three major component updates – AJAX Hotel Reservation Form 3.0, Web 2.0 AJAX Loading Panel 3.0 and Rounded Corners Panel 2.0.

Click here to view the release notes for the latest version.

Acid.JS Web 2.0 Component Library 3.5 is Out

The new version of Acid.JS has just been released with 2 new components – Acid.RSS and EULA.XML, updated versions of CheckBox.XML and RadioButton.XML.

Click here to view the release notes for the latest version.

CheckBox.XML – The AJAX Checkbox Decorator

CheckBoxXml

I am happy to announce that version 7.0 of CheckBox.XML is here!

CheckBox.XML is an unobtrusive and almost codeless way to give the ordinary checkboxes cool looks and appeal and yet keep their native functionality, for example – keyboard support, client events, etc.

All you have to do is to register the runtime scripts, set a skin, placeholder and add checkbox items in a simple XML file.

On this demo page you will learn how to do this. Installing, configuring and running the script is a matter of minutes.

What’s new in version 7.0

1. Support for Apple Safari and Google Chrome. Now CheckBox.XML works with all major browsers
2. Improved rendering and loading speed
3. Beautiful set of skins
4. A couple of useful client methods for toggling the enabled and selected states of a checkbox list or single checkboxes and load on demand

CheckBox.XML information page

CheckBox.XML demo page

Download CheckBox.XML

Acid.JS JavaScript Library 3.4 Released with 5 New Scripts

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

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

A newer and better crossbrowser solution for custom checkbox and radio button styling is available on this page.

The full example for this blogpost is available for download at this link. You can play with the online demo on this page.

WebKit browsers (Safari, Chrome, Konqueror) have vendor-specific implementation of the CSS appearance property, as well as full support for the :checked and :disabled pseudo classes. The property is called -khtml-appearance and it’s default value is visual. When set to none, it turns the specified control(s) to a blank slate, and this, combined with :checked, :hover and :disabled facilitates any styling of checkboxes and radiobuttons without JavaScript or complex layout tricks. All we need is a sprite that contains all possible states (checked, unchecked, hover) of checkboxes and radiobuttons and as few as 50 lines of CSS:

1. The image sprite

RadioAndCheckBoxSprite

2. The HTML:

<ul>
    <li>
        <input type="checkbox" id="CheckBox1" checked="checked" />
        <label for="CheckBox1">Checkbox 1</label>
    </li>
    <li>
        <input type="checkbox" id="CheckBox2" />
        <label for="CheckBox2">Checkbox 2</label>
    </li>
    <li>
        <input type="checkbox" id="CheckBox3" disabled="disabled" />
        <label for="CheckBox3">Checkbox 2</label>
    </li>
</ul>
<ul>
    <li>
        <input type="radio" id="Radio1" checked="checked" name="radio" />
        <label for="Radio1">Radio 1</label>
    </li>
    <li>
        <input type="radio" id="Radio2" name="radio" />
        <label for="Radio2">Radio 2</label>
    </li>
    <li>
        <input type="radio" id="Radio3" name="radio" disabled="disabled" />
        <label for="Radio3">Radio 2</label>
    </li>
</ul>

3. And the CSS, where we make use of attribute selectors, pseudo classes, and of course -khtml-appearance set to none:

label
{
 font: normal 12px/20px Arial, Sans-serif;
 color: black;
 vertical-align: middle;
}
/* common settings checkbox and radiobutton */
input[type="checkbox"],
input[type="radio"]
{
 -khtml-appearance: none;
 background: url('RadioAndCheckBoxSprite.gif') no-repeat;
 width: 20px;
 height: 20px;
 vertical-align: middle;
}
input[type="checkbox"]
{
 background-position-x: left;
}
input[type="radio"]
{
 background-position-x: right;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover
{
 background-position-y: -40px;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked
{
 background-position-y: -20px;
}
input[type="checkbox"]:checked:hover,
input[type="radio"]:checked:hover
{
 background-position-y: -60px;
}
/* disabled settings for checkbox and radiobutton */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled
{
 opacity: .3;
}

FireFox has a similar implementation of the property called -moz-appearance, however its default value is none, and at present the above approach cannot be used for any browser but Safari and Google Chrome.

The full example is available for download at this link. You can play with the online demo on this page.

You may also be interested in the following scripts that take control on the visual appearance of other form elements.

Find more experiments here.