Month: August 2009

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

Advertisements

RadioButton.XML – The AJAX Radiobutton Decorator

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.

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.

TabStrip.XML 2.0 AJAX Tabstrip Control Released

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

Fixing the Browser History (Back and Forward buttons) in AJAX Websites

BrowserHistory

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.