Month: July 2009

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0)
{
 div
 {
  color: red; /* The text will appear red only in Safari and Google Chrome */
 }
}
Advertisements

Useful AJAX Form Scripts for your Website

Here is a list of a couple of AJAX form controls that I have worked on recently. Enjoy:

ContactForm.JS – Full of features and customizable AJAX contact form for your Web 2.0 website. 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.

Guestbook.XML – Easy to use, AJAX driven, crossbrowser and skinnable guestbook that will give your visitors pleasant Web 2.0 experience on your website. The setup of the script is a matter of minutes, and the Admin panel offers 100% flexibility and killer customization options. The script uses a flat file for data storage and mySQL is not required. Each time somebody posts a message in your Guestbook.XML, you will receive a notification email.

AJAX Hotel Reservation Form – Full featured AJAX solution for websites that provide online room reservations. 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.

ContactForm.JS – AJAX Contact Form for your Web 2.0 Website

ContactForm.JS is a full of features and customizable AJAX contact form for your Web 2.0 website.

ContactFormJs

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.

Key Features of ContactForm.JS

  • Cool Web 2.0 looks – rounded corners inputs, great looking dropdowns and buttons, modal overlay upon form submission
  • 12 skins to fit virtually any design
  • Seamless AJAX form submission without reloading the page
  • Fully customizable
  • Easy and comprehensible installation and setup – the script may be up and running in 10 minutes
  • Reliable client validation
  • Thank you email with copy of message sent to the person who submits the form
  • Crossbrowser – works with all major browsers
  • CAPTCHA antispam protection
  • Easy creation of custom skin, based entirely on CSS
  • Great loading speed that can be optimized even more

Links

View online demo of ContactForm.JS.

Visit the webpage for ContactForm.JS for more information.

Download ContactForm.JS Lite – shipped with 3 skins, instead of the full set of 12 skins, and displays a trial message.

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.

AJAX Hotel Reservation Form 2.1 Is Out With Support for Rounded Corners and More

The new version of AJAX Hotel Reservation Form has been released with support for cool rounded corners for the input boxes, an important IE7 bugfix and improved rendering.

HotelReservationForm1.0

Here’s what’s this all about:

AJAX Hotel Reservation Form is full featured AJAX solution for websites that provide online room reservations.

It is skinnable, highly customizable, localizable, crossbrowser and ultra fast. The admin panel of the script allows to review the current reservations, send confirmation emails and delete old reservations. Whenever a new reservation has been sent, you will receive a notification emal, and a a confirmation email will be automatically sent to the person that has made the reservation.

The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

Click here to view online demo of AJAX Hotel Reservation Form. You may download the script from this link.

Requirements: PHP, Apache Web Server, standards compliant website.

What’s New in Version 2.0:

  • Added support for rounded corners of the input boxes
  • Added option to turn off / on the rounded corners
  • Fixed a bug in Internet Explorer
  • The user settings are already in an external .js file – Scripts/HotelReservationFormSettings.js for easier modification and maintenance
  • Property to set width and height to the input boxes
  • Improved rendering speed
  • Updated Terms and Conditions. Make sure you check them out in the LICENSE_AGREEMENT.pdf file

View online demo of the script

Visit the page for AJAX Hotel Reservation Form for more information

Download the free version

Acid.JS Library 3.3 is out with Rounded Corner Textboxes Script

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.