Month: October 2008

Using ECML 1.1 to Make Website Forms Compatible with Google Toolbar AutoFill and WAND

Recently, I was asked how it is possible to make website forms compatible with Google Toolbar Auto Fill, Wand and other auto fill or wallet software. The answer is quite obvious – the form fields “name” attributes should comply to certain rules and naming conventions, but the problem is that it is hard to find information about that specification.

For those who are interested in making their website forms compatible with third party auto fill and wallet software, here is a link to ECML 1.1 (Electronic Commerce Modeling Language) – Field Specifications for E-Commerce. Optionally, you can download the specification from this link.

Advertisements

SearchBox.XML – Integrated Search Box for your Website

SearchBox.XML is a compact AJAX script that allows users to integrate any number of search engines to their websites.

The script comes with a set of 10 prefedined skins – Acid, Blue, Classic, Default, Green, Mac, MSDN, Vista, WeMakeSites and WindowsXP, but creating a custom skin is a piece of cake.

The flexible rendering of SearchBox.XML makes the deployment of the script, adding, removing or setting options a matter of minutes.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Download SearchBox.XML
Visit the demo page of SearchBox.XML
Visit the home page of SearchBox.XML

ContextMenu.XML 1.1 is Out!

A few days after the release of the first version of ContextMenu.XML, here’s the new one – with added support for radiobutton lists and improved performance and rendering.

Spice-up your webpages with cool looking and totally customizable context menus with this easy to install script. No html editing, except adding a few lines of JavaScript code and modifying an xml file.

ContextMenu.XML comes with a set of 11 predefined skins – Acid, AcidMachine, Blue, Default, Green, Mac, Office2003, Office2007, Orange, Red and WeMakeSites, but users can easily create their own skins by modifying an existing skin or creating one from a scratch.

ContextMenu.XML allows users to disable items, to add custom functions or URLs, set item icon, checkboxes, radiobutton lists, define width of menu and even to disable the rendering of the entire context menu, as well as a couple of other handy features.

ContextMenu.XML works with Internet Explorer 6/7/8 and Mozilla FireFox 2/3, as only these two browsers allow scripting of the context menu. Safari, Opera and Google Chrome gracefully degrade and display browser’s context menu.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

View online demo of ContextMenu.XML
Visit the home page of ContextMenu.XML
Download ContextMenu.XML

Using compatMode to Determine the Standards Compliance Mode of the Page on the Client

Have you ever used the compatMode property JavaScript to determine if a web-page is in standards-compliant or in quirks mode directly on the client?

compatMode was first introduced in Internet Explorer 5.5, and later adopted by FireFox and Opera, and is rather convenient for third party component developers. One of its possible uses is if you develop and provide scripts , widgets or layouts that require xhtml mode and are not intended to work in quirks mode – you may display a compatibility warning if your clients try to use your component in quirks mode or in HTML 4.01 or earlier version.

compatMode can return two possible values – BackCompat, if the standards compliance mode is not switched on (the page is missing a !DOCTYPE declaration, the !DOCTYPE is HTML 4.01 or earlier version, or !DOCTYPE is XHTML, but is preceeded by a XML prolog that triggers quirks mode in IE6 (<?xml version="1.0" encoding="utf-8" ?>)), or CSS1Compat – if the standards compliance mode is switched on.

Note that the compatMode property is deprecated in Internet Explorer 8 in favor of the documentMode property.

Here is an example function illustrating the compatMode property:

function checkCompatMode()
{
var cMode = document.compatMode;
if(cMode == 'CSS1Compat')
{
alert('This page is in a standards compliant mode.');
}
if(cMode == 'BackCompat')
{
alert('This page is in a non-standards compliant (quirks) mode.');
}
}

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library .

Unobtrusive CSS Loading Indicator for Images

A few developers are actually aware that the image tag supports background images (as well as practically any other CSS property). Here is a quick and unobtrusive technique for creating loading indicator for images without using JavaScript, that relies on the above feature.

1. Create a loading indicator. You may use http://ajaxload.info.

2. Create the markup for your gallery:

<ul class="thumbnails">
<li><img src="Images/Image_01.jpg" alt="Image 1" width="200" height="100" /></li>
<li><img src="Images/Image_02.jpg" alt="Image 2" width="200" height="100" /></li>
<li><img src="Images/Image_03.jpg" alt="Image 3" width="200" height="100" /></li>
</ul>

3. Create the CSS for the gallery and consider the property in red, where we apply the background image to the image tag:

.thumbnails,
.thumbnails li
{
padding: 0;
margin: 0;
list-style: none;
}
.thumbnails li
{
float: left;
}
.thumbnails img
{
border: solid 2px #5d6f88;
width: 200px;
height: 100px;
background: white url('Images/Loading.gif') no-repeat center;
margin: 0 2px;
}
.thumbnails img:hover
{
border-color: black;
}

 

To test the loading effect locally, remove the src attribute of the image tags, or simply set an unexisting url. The same effect will appear in online galleries that use large images – the loading image will load faster (as it is some 1-2Kb in size) and will be displayed until the actual image is fully loaded.

Skinnable Web 2.0 Buttons 3.0

The new version goes really semantic and 100% customizable! Say goodbye to the skins from the previous versions. Say hi to the button styles.

You may choose between 8 different styles of slick, glassy, bevelled, cool looking and variable in width Web 2.0 buttons to which you can set any font and background color you like only with CSS.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

View Online Demo
Download the Script

CSS: Filtering and Distinguishing Google Chrome and Safari

 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.

Personally, I avoid using CSS hacks, and when writing client code I always assume that anything can be done the “legal” way.

However, in most cases a hack is useful and needed, so here are two hacks (which are, in fact a valid CSS) that can be used to target and distinguish Google Chrome and Safari:

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName
{
/* properties go here */
}