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.

• Visit Acid.JS
• Download the library

* 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.

I am happy to announce the release of the new version of Guestboox.XML – one of the few fully AJAX-driven guestbook components on the Internet, that will give your website friendly and cool Web 2.0 looks with its typical Web 2.0 application features – rounded corners for the form inputs and the entry boxes, smooth and seamless form submission routine to the server without refreshing the page, AJAX loading panel during the server requests, friendly validation and system messages, and tons other great features. Below is a list of the core features of Guestbook.XML:

• Easy installation, setup and custmization
• User-friendly admin panel, conforming the latest usability requirements
• Powerful form validation on the client
• Entry moderation
• Profanity filter, customizable profanity word list and profanity replacement routine
• Markup filter
• Customizable notification email when a new entry has been submitted
• Customizable thank you email sent to the person who has submitted a comment
• Cool rounded corners of the form inputs and the entry boxes
• Custom position of the form – above or below the entries
• Extremely fast rendering and very small footprint
• Privacy options
• Entries archive
• Option for permanent deletion of the archived entries
• Custom maximum length of the submitted entry
• No mySQL, the entries are stored in physical flat files on the server
• Crossbrowser performance, supporting all major browsers (scroll down this page for supported browsers list)
• Valid, semantic and accessible client output
• 100% control of the features and appearance of the public page from the admin
• Great, almost flash-like experience and fully skinned form controls

What’s New in Version 2.0

• Customizable thank you email
• User-defined comments form position
• Improved rendering and reduced server output
• Rounded corners of the form fields and of the entry boxes
• Easier installation, setup and customization
• Cool Web 2.0 looks
• Fully reconsidered, rewritten and redesigned admin panel, now completely AJAX-driven
• Improved and detailed manual
• Three categories of submitted entries – approved, unapproved and archived
• A number of bug were addressed and fixed

Screnshots from the Admin and the Public Page of Guestbook.XML

Requirements

• PHP4+
• Apache Web Server
• Standards-compliant public page (Guestbook.XML will not initialize on non-XHTML/HTML5 pages)
• JavaScript-enabled and AJAX-capable browser (scroll down this page for supported browsers list)

Browser Support

Guestbook.XML works with all major browsers – Internet Explorer 7/8, Mozilla FireFox 2+, Opera 8+, Apple Safari and Google Chrome, as well as any other WebKit or Gecko browser. The support for Internet Explorer 6 has been dropped, and there are no plans for adding IE6 support for the future.

What’s Next?

• View online demo of Guestbook.XML
• Download the component
• View the information page of Guestbook.XML

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.

• Download Acid.JS installer (Windows only)
• Download Acid.JS as a .zip archive

I am happy to announce the release of the new version of AJAX Hotel Reservation Form. Version 3.0 comes with new options both in the admin and in the public part. The administration panel is totally redesigned and reconsidered and offers easy and user-friendly administration of the current reservations in pleasant environment.

Here’s what’s new in version 3.0:

• Totally reconsidered and redesigned admin with lots of options and cool looks
• New options for the public part of the component – additional information and included meals
• Improved and even faster rendering
• Fully localizable public part and admin

Screenshots from the Admin and from the Public Part

What’s next?

• View online demo of AJAX Hotel Reservation Form
• Download the component and give it a try
• View more info about AJAX Hotel Reservation Form

If you are planning to purchase components from my website, I’ve got a deal for you that will save money.

On this page you can select (at least) three or more scripts,  and each of them is listed USD10 off its original price, so the more items you order the more money you save, which means that practically each 4th item you add to your custom Web 2.0 bundle is free. As usual you will receive free upgrades to minor and major versions of the components you have purchased as well as reliable support.

You can start compiling your bundle now or you may check what is included in the deal.

Experience the power of CSS with this cool widget!

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. And more – you may tell which borders to style, and which not.

The new version comes with even faster rendering, smaller footprint and comprehensive client methods for pageload and ondemand rounding of an element.

Take a look at the demo and have fun!

Download Rounded  Corners Panel.JS

View the info page for Rounded  Corners Panel.JS

Take a look at the demo of Rounded  Corners Panel.JS

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!

All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.

The new version comes with improved rendering, preserved browser compatibility and comprehensive API.

View more information about Web 2.0 AJAX Loading Panel

Web 2.0 AJAX Loading Panel demo

Download Web 2.0 AJAX Loading Panel

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 and 7 brand-new JavaScript Routines for node manipulation of the DOM.

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

• Download Acid.JS installer (Windows only)
• Download Acid.JS as a .zip archive

Acid.RSS is a lightweight and easy to use AJAX website component for displaying latest news / updates in RSS format. It features two public modes – News Summary and Full News and one private mode – the seamless comprehensible admin.

The generated RSS file can be displayed not only on the website in HTML format, but it can also be syndicated in desktop RSS readers or online services such as NetVibes or Google Reader.

Follow this link for a demo of Acid.RSS, or download it here.

EULA.XML is an easy to setup, full of features and skinnable AJAX application that can be used to display license agreement wizards on web-pages.

It is easy to customize, comes with a set of 4 confirmation modes (None, Checkbox, Radiobuttons, Dropdown), cool 12 skins with rounded corners, custom actions for the “Cancel” and “Finish” buttons, and its installation on a webpage is a matter of minutes.

On this demo page you will learn how to install, customize and run the component.

View more information about EULA.XML

View online demo

Download

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

JavaScript Routines is a collection of useful crossbrowser everyday scripts that can facilitate and accelerate the JavaScript development.

The scripts on this page are included in Acid.JS JavaScript Library as well and the collection is constantly growing up. To view and get a script, click on its name.

Version 6.0 is finally here!

RadioButton.XML is ajax-driven almost codeless, reliable, accessible and semantic approach for skinning of radio buttons. The solution makes use of real radio buttons with labels and their toggle functionality and skinned list-items, allowing single-line and multi-line radiobutton list rendering, native client- or server-side validation and easy skinning using an image sprite and a few lines of CSS.

The script comes with 12 predefined skins in the full version, while the lite one is shipped with 3. However, creating a custom skin is a matter of minutes.

What’s new in version 6.0

1. Support for Apple Safari and Google Chrome. Now RadioButton.XML works with all major browsers with limited support for IE6.
2. Improved rendering and loading speed
3. Beautiful set of skins
4. A couple of useful client methods for disable, enable, toggle the enabled state and load on demand

RadioButton.XML information page

RadioButton.XML demo page

Download RadioButton.XML

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

• TinySite.XML 2.0 – fully AJAX driven content management system
• Guestbook.XML 1.0 – AJAX-driven, skinnable and totally customizable guestbook for your website

Website Widgets and Parts

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 2.0 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel 2.0 – Display loading message with this fully configurable AJAX script

Form Related Scripts

• Input.JS – Enhance the textboxes, passwords and textarea elements of your website forms with rounded corners with four lines of code.
• AJAX Hotel Reservation Form 2.1 – AJAX-driven, skinnable and full of features hotel reservation form
• ContactForm.JS 1.0 – AJAX-driven, skinnable and full of features contact form for your website
• Upload.JS 1.0 – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

Miscelaneous

• AJAX Browser History Fix

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• forEach.js
• getElementsByClassName.js
• getElementStyle.js
• isChrome.js
• isIE6.js
• isSafari.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

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

It is easy to configure by simply adding a few lines of code and defining tabstrip placeholder – <div>…</div> element with an ID on the place where the tabstrip should render.

Multiple instances with different skins are supported on a single page. The full version comes with a set of 12 cool skins to fit any website design.

What’s new in version 2.0:

1. Improved rendering and loading speed
2. Support for Safari and Google Chrome
3. Easy 2-step installation on a webpage. The script may be up and running in 5 minutes

Links:

Online demo of TabStrip.XML

Download TabStrip.XML

TabStrip.XML information page

Here is a small script that utilizes the JavaScript location.hash property to handle the broken back and forward browser buttons in AJAX websites.

For the demo we need is a simple AJAX callback function, the hash handling function and a couple of HTML pages to include in our one-page website via the XmlHttpRequest.

1. getcontent(file) – the argument of the function is the file that will be included to the page via AJAX. When the AJAX call is finished, we set the filename of the include as a hash in the address bar of the browser, i.e. http://localhost/History/index.html#page1.html.

function getcontent(file)
{
var xmlhttp;
var contentloader = $get('content');
var pagehash = file.split('Includes/');
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
contentloader.innerHTML = xmlhttp.responseText;
window.open('#' + pagehash[1], '_self');
}
else
{
$get('content').innerHTML = loading;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send(null);
$get('hash').value = pagehash[1];
}

2. checkHash() – We add this function to the site.init(). From now on it will listen for changes of the hash in the address bar of the browser on every 500 milliseconds, and will compare the value after the “#” sign with the value of the hidden input with id “hash” in the markup. If the two values differ (i.e. if the visitor has pressed the “back” or the “forward” button), checkHash() will load the include found after the hash sign.

function checkHash(){
 setInterval(function(e)
 {
  var gethash = document.location.hash;
  var pagehash = gethash.split('#')[1];
  var currenthash = $get('hash');
  if(pagehash != currenthash.value)
  {
   getcontent(includesdir + '/' + pagehash);
  }
 }, 500);
}

The history fixer works with all major browsers (Internet Explorer 7/8, FireFox 2/3, Opera 9/10 Beta, Chrome 1/2 and Safari 3/4). Supposedly it works in Internet Explorer 5.5/6 as well, but I haven’t tested it. The script is flexible enough and can be modified for database, xml or flat file asynchronous queries.

A fully working demo is availabe for download at this link. Make sure that you test it on a server (http://localhost/ or online), otherwise the AJAX requests will fail.

A real-life demo of a slightly modified version of the script can be seen here.

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 */
 }
}

This is what I’ve been busy doing these days.

During the last two years, my website continued to grow, and eventually I was pushed to thoroughly revize, optimize, reorganize and finally rewrite it.

What’s New:

1. Wider layout, bigger fonts, dropshadows, rounded corners and cheerful Web 2.0 looks:

2. Really fast loading and preserved 100% browser compatibility. Tested it under Internet Explorer 7/8, Mozilla FireFox 2/3, Opera 9/10Beta, Google Chrome 1/2 and Apple Safari 3/4. The support for IE6 has been dropped for good.

3. Minimum custom coding and greatly relying the controls included in my Acid.JS JavaScript Libary - ContactForm.JS, Input.JS, SelectboxReplacement.JS, ButtonReplacement.JS, Web 2.0 AJAX Loading Panel, Rounded Corners Panel.JS and two brandnew controls that will be released soon – SocialBookmarks.XML and Gallery.JS.

4. Cool dropdown menu allowing fast access to the different pages:

5. Rewritten and faster AJAX engine and brandnew server part

6. Download statistics for each control and couple of other useful widgets

7. Fixed Back and Forward buttons

In the long run, despite the coding overhead I think that the facelift was worth. You are welcome to take a look at it anytime!

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 is a 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.

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

Purchase the full version of ContactForm.JS via PayPal for USD20

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

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 may also be interested in the following scripts that take control on the visual appearance of other form elements.

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.

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

Purchase the full version via PayPal for USD50 with full set of 12 skins and no trial message

Screenshots of the script’s public and admin part (version 2.0) can be found on this page.

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

• TinySite.XML 2.0 – fully AJAX driven content management system
• Guestbook.XML 1.0 – AJAX-driven, skinnable and totally customizable guestbook for your website

Website Widgets and Parts

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel 2.0 – Display loading message with this fully configurable AJAX script

Form Related Scripts

• Input.JS – Enhance the textboxes, passwords and textarea elements of your website forms with rounded corners with four lines of code.
• AJAX Hotel Reservation Form 1.0 – AJAX-driven, skinnable and full of features hotel reservation form
• Upload.JS 1.0 – Quick and dirty way to add style to the file input boxes of your formsSelectBoxReplacement.JS 1.1 – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• isChrome.js
• isIE6.js
• isSafari.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Enhance the textboxes, passwords and textarea elements of your website forms with rounded corners with four lines of code.

All you have to do is to register the runtime scripts of Input.JS, select a skin, reload the page and leave the rest to the script.

View Online Demo of Input.JS

Download Input.JS

Information Page for Input.JS

Purchase additional skins for Input.JS

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

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

Have you tried to manipulate the string that is returned by the value attribute of a file upload input (<input type="file" />) under Internet Explorer 8? Did you get the strange c:\fakepath string? Relax - there is nothing wrong with your code, and although this is quite confusing, it has its justifiable reasons. Here is a screenshot of a file input control manipulated with JavaScript:

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:\fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

Below is some code to play with. Notice that this will not work on localhost pages. The page should be uploaded on a production server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Testing the FakePath String</title>
</head>
<body>
<form id="Form1" action="" method="post">
<input type="file" /><input type="button" onclick="alert(this.previousSibling.value);" value="select file and press the button" />
</form>
</body>
</html>

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

• TinySite.XML 2.0 – fully AJAX driven content management system
• Guestbook.XML 1.0 – AJAX-driven, skinnable and totally customizable guestbook for your website

Website Widgets and Parts

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel 2.0 – Display loading message with this fully configurable AJAX script

Form Related Scripts

• AJAX Hotel Reservation Form 1.0 – AJAX-driven, skinnable and full of features hotel reservation form
• Upload.JS 1.0 – Quick and dirty way to add style to the file input boxes of your formsSelectBoxReplacement.JS 1.1 – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• isChrome.js
• isIE6.js
• isSafari.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Almost two years after the first release of my AJAX Hotel Reservation Form, the new version is finally out – totally rewritten, full of cool features and capable to suit the design of any website with its 12 skins.

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.

Below are a couple of screenshots of the public and the admin side of the script.

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode:

.classnameOrElement
{
 color /*\**/: blue\9
}

And another one that will be applied in all IE versions:

.classnameOrElement
{
 color: blue\9
}

There are numerous solutions for form control styling on the Interet based on the popular JavaScript libraries.

Here’s a quick reference to scripts created by me, that implement state-of-the art form control styling with a small footprint and without using  jQuery, Y!UI, MooTools or any other JavaScript libary.

- Input.JS – Enhance the textboxes, passwords and textarea elements of your website forms with rounded corners with four lines of code.
 - SelectBoxReplacement.JS – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls (<select>...</select>) cool looks and appeal.
 - ButtonReplacement.JS – Unobtrusive and almost codeless way to give the ordinary HTML buttons (<input type="button | submit | reset" /> and <button type="button | submit | reset">...</button>) cool looks and appeal.
 - CheckBox.XML - Skin the checkboxes in your forms.
 - RadioButton.XML - Skin the radiobuttons in your forms.
 - SpinBox.JS – Codelessly turn the ordinary text inputs (<input type="text" />) into skinnable and multifunctional spinboxes.
 - Upload.JS – Quick and dirty way to add style to the file input boxes (<input type="file" />) of your forms.
 - Upload.XML - Create stylish file upload (<input type="file" />) boxes with this AJAX script.
 - SearchBox.XML – Integrate any number of web search engines in your websites with this cool skinnable AJAX script.
 - ColorPicker.JS – Multifunctional, fast and skinnable color picker.
 - Skinnable Browser Dialogs – replace the boring and impossible to style default browser alert, prompt and confirm with this cool script.
- Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome.

These scripts are included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

• TinySite.XML 2.0 – fully AJAX driven content management system
• Guestbook.XML 1.0 – AJAX-driven, skinnable and totally customizable guestbook for your website

Website Widgets and Parts

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel 2.0 – Display loading message with this fully configurable AJAX script

Form Related Scripts

• Upload.JS 1.0 – Quick and dirty way to add style to the file input boxes of your forms
• SelectBoxReplacement.JS 1.1 – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• isChrome.js
• isIE6.js
• isSafari.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Here’s a quick and dirty way to style file upload (<input type="file" />) boxes with a few lines of JavaScript and ButtonReplacement.JS, so they look like this:

instead of this:

The Init Script:

<script type="text/javascript">
  uploadjs.init('100', 'Browse for File...'); // width and text of the "Browse..." button
  </script>

The HTML – any number of file input boxes:

<form id="Form1" action="" method="post">
   <input type="file" name="File1" />
   <input type="file" name="File2" />
   <input type="file" name="File3" />
   <input type="file" name="File4" />
  </form>

The JavaScript:

var brjsSkin = 'WeMakeSites'; // Set skin to ButtonReplacement.JS
var brjsFolder = 'Scripts'; // Root folder of ButtonReplacement.JS
var brjsEnabled = true; // Is ButtonReplacement.JS enabled or not? (true | false)
var isIE = window.ActiveXObject;
var uploadjs = {};
uploadjs.init = function(width, text)
{
 if(window.addEventListener)
 {
  window.addEventListener('load', function(event)
  {
   initUploadJs(width, text);
  }, false);
 }
 if(window.ActiveXObject)
 {
  window.attachEvent('onload', function(event)
   {
    initUploadJs(width, text);
   }
  );
 }
};
function initUploadJs(width, text)
{
 var uploadinputs = $tag('input');
 for(i = 0; i < uploadinputs.length; i ++)
 {
  if(uploadinputs[i].type == 'file')
  {
   var parent = $create('span');
   var upload = uploadinputs[i];
   var fakewrapper = $create('span');
   
   parent.className = 'UploadJsWrapper';
   upload.className = 'UploadJsRealUpload';
   parent.style.width = width + 'px';
   
   if(isIE)
   {
    upload.style.display = 'none';
    fakewrapper.innerHTML = [
     '<input type="button" value="' + text + '" onclick="this.parentNode.previousSibling.click();" style="width: ' + width + 'px;" />'
    ];
   }
   else
   {
    fakewrapper.innerHTML = [
     '<span><!-- / --></span><input type="button" value="' + text + '" style="width: ' + width + 'px;" /><span><!-- / --></span>'
    ];
   }
   upload.parentNode.insertBefore(parent, upload);
   parent.appendChild(upload);
   parent.appendChild(fakewrapper);
  }
 }
 replaceButtons();
}

And a little bit of CSS:

<style type="text/css">
  .UploadJsWrapper
  {
   display: inline-block;
   overflow: hidden;
   position: relative;
   height: 22px;
   padding-right: 10px;
  }
  .UploadJsRealUpload
  {
   position: absolute;
   display: block;
   float: left;
   -moz-opacity: 0;
   opacity: 0;
  }
  </style>

The full example is available for download here. If you have missed the demo link – here it goes again.

Alternative way for styling file input boxes is provided by Upload.XML – a skinnable AJAX control for creating file upload lists.

Here’s the deal:

Choose three cool scripts developed by WeMakeSites.NET for your own projects and purchase them for USD40! This is the summer deal of 2009 and will continue from May 14 until September 14, so be sure to compile your creative dev bundle soon.

If you are interested in purchasing TinySite.XML, the AJAX content management system, you may have the Standard version for USD50 (instead of USD150), the Full version for USD100 (instead of USD200) and the Developer version with source code for USD500 (instead of USD700). By purchasing your selection you will be entitled to free upgrades with the next version of each of the scripts you have purchased.

Interested? Please, contact us, and let us know, by stating your selection of scripts or TinySite.XML version.

Here is a collection of several (mostly) AJAX scripts created between 2008 and 2009 that you may find useful:

Browser History and Bookmarks in AJAX Websites

• Fixing the Browser History (Back and Forward buttons) in AJAX Websites – a small script that makes use of the JavaScript location.hash property to handle the broken back and forward browser buttons in AJAX websites.

Content Management

• TinySite.XML Content Management System – fully AJAX driven content management system
• Guestbook.XML – AJAX-driven, skinnable and totally customizable guestbook for your website
• AJAX Hotel Reservation Form – Skinnable AJAX hotel reservation form with cool public side and admin
• ContactForm.JS – Full of features and customizable AJAX contact form for your Web 2.0 website

Layouts

• Rounded Corners Panel.JS – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel – Display loading message with this fully configurable AJAX script

AJAX Libraries

• Acid.JS – The AJAX Tools and Widgets Library

Form Related Scripts

• SelectBoxReplacement.JS – unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms
• Input.JS 1.0 – Unobtrusive rounded corners for input boxes and textareas

Website Widgets and Parts

• SearchBox.XML – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Spice-up your webpages with cool skinnable and multifunctional context menus
• Skinnable Web 2.0 Buttons – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML – Create 16 x 80 pixels web-badges only with CSS

Image Related Scripts

• AJAX Photo Gallery – Skinnable and easy to use AJAX photo gallery
• CSS Watermark – Add cool watermark effect to your images with CSS

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

• TinySite.XML 2.0 – fully AJAX driven content management system
• Guestbook.XML 1.0 - AJAX-driven, skinnable and totally customizable guestbook for your website

Website Widgets and Parts

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel 2.0 – Display loading message with this fully configurable AJAX script

Form Related Scripts

• SelectBoxReplacement.JS 1.1 – unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• isChrome.js
• isIE6.js
• isSafari.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Guestbook.XML is 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 – string customization, profanity filter, html filter, skin changer, various moderation and validation options, etc. The script uses a flat file for data storage and mySQL is not required, just PHP and Apache Web Server.

Each time somebody posts a message in your Guestbook.XML, you will receive a notification email.

The public side of Guestbook.XML works with all major browsers – Internet Explorer 6/7/8, FireFox 2/3, Opera 9/10Beta, Safari 3/4 Beta and Chrome 1x. The admin panel works with Internet Explorer 6/7/8, FireFox 2/3, Opera 9/10Beta.

The full version of Guestbook.XML ($50.99) comes with a set of 12 predefined skins, while the Lite version, which is available for a free download is shipped with three skins only – WeMakeSites, XP and Blue, the admin is not fully functional and displays a trial message.

Here are a couple of screenshots from the frontend and the admin of Guestbook.XML:

Sometimes, when working with dynamically created objects on the client, it is needed to style these elements in a specific way. Due to the nature of these objects (for example – unique IDs) , they cannot be styled in the classic way, though. The document.createElement method of JavaScript can be used to create <style>...</style> tag and append it in the <head>...</head> section of the page, however populating it with CSS rules / classes cannot be done with innerHTML under Internet Explorer, which implements a different method for this particular case – by applying the cssText method to the styleSheet object.

Below is an example of how to implement this approach.

function createStyleTag()
 {
  var head = document.getElementsByTagName('head')[0];
  var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
  var cssstring = [
   '#MyDiv1 {' +
    'color: red;' +
   '}'
  ];
  if(!isChrome && !isSafari)
  {
   var styletag = $create('style');
   
   styletag.setAttribute('type', 'text/css');
   head.appendChild(styletag);
   
   if(!window.ActiveXObject)
   {
    styletag.innerHTML = cssstring; // if not Internet Explorer
   }
   else
   {
    styletag.styleSheet.cssText = cssstring; // if Internet Explorer
   }
  }
 }

The full example is available for download at this link.

TinySite.XML is a lightweight and fully AJAX driven content management system for personal websites, blogs or band websites.

CMS is an application used to store, retrieve, modify or delete information, format it in a certain manner with a minimal effort. A CMS system also provides ready made tools that are used for interaction between the owners of the website built on top of that CMS with their visitors.

TinySite.XML has it all – page editor, drag-and-drop layout editor, themes, contact form, gallery, events / tourdates module, powerful form-element replacement components that add up to the almost flash-like experience, RSS and news editor and a couple of other cool add-ons that make the stay on the website pleasant.

Almost a year later after the first release, the new version is finally out with 100% reconsodered and rewritten public and admin part, rendering and tons of new features.

What’s new in version 2.0:

- Extremely fast rendering, improved themes and modules.
- Fully functional admin panel, where you can control most of the functions of the public website – change themes, add news / rss, set questions and answers to the voting poll, rearrange the layout with the new state-of-the-art drag and drop layout editor, add, edit, delete and modify pages and tons of other cool stuff.
- Extensive manuals and inline help in the admin.

New modules and add-ons that are up and running:

- AJAX Photo Gallery
- Voting Poll created with the skinnable RadioButton.XML control
- Events and Tourdates module
- News and RSS parser and editor
- Blogroll
- Contact Form
- Mailing List form
- TabStrip, created with the skinnable TabStrip.XML control
- ButtonReplacement.JS, that will replace the original HTML button controls with cool looking and skinnable buttons
- CheckBox.XML – skinnable checkboxes add-on
- AJAX Loading Panel that completes the Web 2.0 look and feel of the websites created with TinySite.XML
- SelectboxReplacement.JS – that will unobtrusively replace your selectboxes with modern comboboxes
- Skinnable Browser Dialogs that add-up to the smoothness of your website, created with TinySite.XML
- PageAnouncement.XML – to display important information upon page load

Requirements:

- Apache Web Server 1.3.x or higher
- PHP 4.3.11 or higher
- safe_mode off
- memory_limit 32MB or more
- No mySQL – all data is stored in flat files
- .htaccess
- ability to modify php.ini

Screenshots:

Download TinySiteXML 2.0 Lite

Visit the new website of TinySite.XML and view demo

Purchase the full version of TinySite.XML

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!

All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.

Web 2.0 AJAX Loading Panel allows you to display cool loading overlay to your webpages during your async requests to the server. The loading overlay ann message is fully customizable and can fit to any website design. The deployment and customization of the script is a matter of minutes. On this demo page you will learn how to do this.

Web 2.0 AJAX Loading Panel works under Internet Explorer 6/7/8, FireFox 2/3, Opera 9/10Beta, Chrome 1, Safari 3/4Beta and any other Gecko or WebKit browser. You may fully customize its appearance, change the corner radius of the message box, set custom opacity and loading images and tons of other cools stuff that allows the script to fit any website design.

View online demo of Web 2.0 AJAX Loading Panel

Visit the home page of Web 2.0 AJAX Loading Panel

Download Web 2.0 AJAX Loading Panel

Purchase Web 2.0 AJAX Loading Panel Full

Internet Explorer 8 is out, with a couple of rendering modes, that will take time to handle. As you know, IE8 renders pages in standards compliance mode by default, and the X-UA compatibility tag has been a good idea of Microsoft, as it gives a chance to developers who have not optimized their websites for IE8 to put things to work with less effort.

Did you try it already? If it is something new to you, it works like that:

1. Add the following meta-tag in the head section of your webpage above any linked files (i.e, above <link>…</link> and <script>…</script> tags)

<meta http-equiv="X-UA-Compatible" content="IE=7" />

If the tag is below link or script tags, the fix will not work.

2. Reload the page, and the meta tag will force IE8 to use the rendering engine of IE7, and your webpages will look as they did before, until you find a solution for the issues you have noticed when IE8 was released.

If your pages behave as expected under IE8 then you should use the IE8 meta tag.  This will ensure that your code will continue to run properly after the next browser upgrade:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

In summary, the compatibility UA-X meta tag is a good and legal trick to be comfort with your visitors.

Do not hesitate using it.

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel – Display loading message with this fully configurable AJAX script
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Form Related Scripts

• SelectBoxReplacement.JS 1.1 – unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
• ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

SelectBoxReplacement.JS is an unobtrusive and almost codeless way to give the ordinary HTML combobox form controls (<select>…</select>) cool looks and appeal, totally customize them, even add icons to the options in the option list, and still keep their native functionality and JavaScript events.

All you have to do is to register the runtime script, set a skin and root folder for SelectBoxReplacement.JS.

Visit the home page of SelectBoxReplacement.JS.

View online demo of SelectBoxReplacement.JS.

Download SelectBoxReplacement.JS.

Buy the full version of SelectBoxReplacement.JS for USD30 via PayPal (no trial message, full set of 12 skins).

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

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel – Display loading message with this fully configurable AJAX script
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Form Related Scripts

• ButtonReplacement.JS 1.0 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons (<input type="button | submit | reset" /> and <button type="button | submit | reset">...</button>) cool looks and appeal and yet keep their native functionality – click event, keyboard support, etc.

All you have to do is to register the runtime scripts, set a skin and root folder for ButtonReplacement.JS.

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

Visit the webpage of ButtonReplacement.JS

View online demo of ButtonReplacement.JS

Download ButtonReplacement.JS

“How much costs the “alt” attribue of an image? Should I use it or not? If I have 20 images per page, what is the total cost of the <img /> tags with the ”alt” attribue?”

If you are a web-developer, you have certainly noticed the growing bunch of websites that provide the convenient and relatively unexpensive service of design to layout conversion, also known as psd to (x)html coding. It works like that - you create a beautiful design, and then leave it up to experts to create a beautiful code out of it, that is semantic, accessible, usable and valid in markup. Some of these companies do a really great job, however the majority provides coding that has nothing to do with the good coding practices and search engine optimization.

A cursory glance at the code of the latter reveals that:

1. Most of the layouts created by these companies have nothing to do with coding at all. Using <div> for layout instead of <table> still does not mean that the code is semantic. A <div> element does not bear any semantics if its content structure is meaningless. A navigation bar, that consists of <a> elements within a <div> is even less semantic and lousy as using <table> for the same purpose. A good navigation list requires the links to be nested within a list, and to be supplied with suitable “title” attributes.

2. 98% of the forms created by such conversion services are missing fundamental form elements such as <fieldset> and <legend>. And most of the guys creating such layouts miss the fact that a contact form is still a list, and the semantics of a list requires a list tag. The accessibility of an input element is achieved with <label>, accesskey and title attributes, which are forgotten in most of the cases.

3. Having a valid markup is fashionable, but unfortunately most of the companies that provide psd to (x)html service have somehow missed the essence and purpose of the valid markup. And yet more – most of these guys believe that if a website has successfully passed the W3C SGML validation, it is automatically search engine optimized, semantic, usable and accessible. And they are totally wrong, as writing a valid code is nothing but conforming to the formal requirements created by the W3C.

Another funny thing – a number of websites that provide conversion services additionally charge their clients for:

1. 100% valid markup. Is there a 42% valid markup? What percent of valid code is included in the base price? The markup is either valid, or not. 99% of valid markup is as invalid as 1%.
2. XHTML compliance at an additional price. What is the exact difference between HTML and XHTML? Why should I pay additional $$ to have my website coded in XHTML1.1? Should I choose XHTML1.0 Transitional, because it is cheaper? How about HTML3? I am sure that if I ask a company that charges differently according to the doctype why it is so, they will not be able to give me an adequate answer. Accoring to such logic, the cheapest website should be coded in XHTML1.1, as coding under standards compliace mode requires less browser hacks, and is much easier to utilize.
3. 100% browser compatibility is not included in the base package. Yes, if you want a website that looks good under older versions of Opera, Konqueror, Safari, Chrome, K-Meleon, NetScape or your favorite exotic browser, you should pay additional $$. A good conversion service is obliged to provide crossbrowser coding, and 100% browser compatibility should be a undisputed default.

Of course, these are cheap and lousy marketing tricks, and such guys make money from the presumed ignorance of their clients, but the fun here is that they make you buy additional stuff, that should be used by default by every developer that respects their own work and coding abilities.

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.

The latest additions are in red. Removed or discontinued scripts are stricken out.

• SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
• ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
• Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
• Rounded Corners Panel.JS 1.0 – A script that will add cool antialiased rounded corners to your webpage elements
• TabStrip.XML 1.5 – Create skinnable tabbed interfaces with this great AJAX script
• Web 2.0 AJAX Loading Panel – Display loading message with this fully configurable AJAX script
• PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
• AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Form Related Scripts

• ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
• SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
• CheckBox.XML 5.0 – Style the checkboxes of your forms
• RadioButton.XML – Style the radiobuttons of your forms
• Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
• Upload.XML 1.0 – Add style to the file upload textboxes of your forms
• ColorPicker.XML 2.0 – Skinnable AJAX color picker

Image Related Scripts

• AJAX Photo Gallery 1.5 – Skinnable and easy to use AJAX photo gallery
• CSS Watermark 1.0 – Add cool watermark effect to your images with CSS

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

• addClassName.js
• attachDomEvent.js
• BackgroundImageCache.js
• compatMode.js
• detachDomEvent.js
• document.getElementById.js
• getElementsByClassName.js
• getElementStyle.js
• loadScript.js
• loadStylesheet.js
• pageLoad.js
• pageUnload.js
• relExternal.js
• removeClassName.js
• splitStringToArray.js
• toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Say hello to ColorPicker.JS - the successor of one of my oldest scripts ColorPicker.XML that was discontinued a year ago due to poor browser support.

Supply your webforms or rich text online editor with this multifunctional, easy to set up, crossbrowser and cool looking color picker.

All you have to do is to create instances of the script (you may have unlimited number of pickers on your page). You may select among 12 preset skins*, several modes, 8 color presets and even create custom color palettes.

Setting up ColorPicker.JS and putting it to work is a matter of minutes.

ColorPicker.JS has been tested with all major browsers and works with Mozilla FireFox 2x/3x, Opera 9x/10 Beta, Internet Explorer 6/7/8 Beta 2, Google Chrome 1x, Safari 3x, Netscape 9x and K-Meleon 1x.

* The Lite version that is available for a free download is shipped with three skins – Acid, Mac and Vista and displays a credit line at the bottom of each color picker. The Full version comes with the complete set of skins and does not display the credit line. It is available for USD30 via PayPal.

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

Visit the webpage of ColorPicker.JS

View online demo of ColorPicker.JS

Download ColorPicker.JS

Purchase the Full version of the script

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, give a checkbox list placeholder(s) ID, set a skin 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 6.0:

• Improved performance
• Improved skinning mechanism and a set of 12 brand new skins
• Fixed a couple of Intenet Explorer bugs
• Rich client API
• Smaller footprint

The full version of CheckBox.XML ($30.00) comes with a set of 12 predefined skins, while the Lite version, which is available for a free download displays a credit message at the bottom of each checkbox list and a set of three skins.

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

Visit the webpage of CheckBox.XML
View online demo of CheckBox.XML
Download CheckBox.XML
Purchase the full version of CheckBox.XML

Here are a couple of websites that use CheckBox.XML:

• The validation options of W3C Validator.JS
• The contact form of Acid Machine
• The contact and order forms of PSD-to-XHTML.Net
• The “toggle screenshots” option and the contact form of WeMakeSites.Net

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful:

01. Better Image Scaling and Resampling in Internet Explorer
02. Setting Opacity and Other Filters in Internet Explorer 8
03. The 32 External CSS Files Limitation of Internet Explorer and More
04. Unobtrusive CSS Loading Indicator for Images
05. CSS: Filtering and Distinguishing Google Chrome and Safari
06. Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer
07. $style – Get Any CSS Property Value of an Object
08. Emulating border-color: transparent in Internet Explorer 6
09. An Exotic CSS Hack for Internet Explorer
10. CSS Watermark
11. Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library

Oddly enough, but the image scaling by using bicubic interpolation is turned off in Internet Explorer. All other browsers have this turned on by default, because this is the only normal and expected behavior. Due to this badly chosen default, sometimes the images in Internet Explorer are not displayed as smooth as in other browsers. To fix this you may use the vendor-specific CSS property -ms-interpolation-mode:

img
{
-ms-interpolation-mode: bicubic;
}

… in your CSS reset file or ordinary stylesheets.

Two new features are already available with W3C Validator.JS – Bulgarian language version (still incomplete, but I will finish it in the next few days) available from a link in the footer and in the context menu, and option for adding validation link and image to W3C Validator.JS from other websites, so their visitors can validate the code via W3C Validator.JS.

The excellent set of 88 x 16 web badges is provided by http://www.validationicons.com/:

Visit this page to learn more about the validator, or go directly to its website and use it to validate your markup.

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library