New Version of AJAX Photo Gallery

The new version of AJAX Photo Gallery (1.5.0) is finally available. Take a look or download it here.

Skinnable Checkboxes in TOP 100

I’m extremely happy to announce that one of my scripts - Skinnable Checkboxes was ranked on position 24 in the annual TOP 100 of the coolest AJAX form scripts of Nobox Media along with libraries such as Prototype, jQuery, Mootools, etc.

Writing my First Book on Web-development

A few days ago I started writing a book named XHTML, CSS and JavaScript: Introduction to Modern Browser Programming, Semantics and Accessibility of the Code. It covers the contemporary techniques and strategies of writing modern, semantic, accessible and valid xhtml code and unobtrusive javascript. You may register for an early preview of the book on my email - info@wemakesites.net

Antipixel Buttons.XML

Antipixel Buttons.XML is a purely xhtml/css/ajax driven analog of the famous antipixel buttons (also known as web badges) that can be used in blogs, websites, etc. Instead of using online generators, uploading images, setting links and colors, now you may easily configure your badges with a simple xml file by specifying bordercolor, backcolor, forecolor, navigateurl, orientation, etc. Of course, you may have unlimited antipixel buttonstrips per page supporting different design, text and whatever you may think of.

View Online Demo
Download the Script

Web 2.0 AJAX Loading Panel

A client of mine asked me if it is possible to separate the function that creates the cool modal semi-transparent loading effect of my website (and many others, as well) from the XmlHTTPRequest function, so it could be used with other AJAX engines or for other purposes. Now, with Web 2.0 AJAX Loading Panel, this effect could be easily attached to any other script’s or AJAX framework’s onAjaxRequestStart and onAjaxRequestComplete methods. It is easy to install and run with several lines of code and only three functions for init on pageload, display and hide, and its look and feel is totally customizable via the LoadingMessage/Config.xml file.

Please, refer to the INSTALLATION_NOTES.txt in the distribution file for detailed overview of installing, running and handling the script and explanation of the properties of the <loadingmessage /> and <modalpanel /> collections.

View Online Demo
Download the Script

ColorPicker.XML

ColorPicker.XML 2 is a cool AJAX-driven color picker, that enables users to create multiple color pickers on a single webpage, use a set of ready-made skins and color presets in a few minutes. All you have to do is to declare the colorpicker(s) placeholder(s) - a simple <div /> with an ID (although, practically any html element could be used as a placeholder), set a number of useful properties related to it’s appearance and functionality and reload the page. The script well generate semantic and accessible html code with amazing functionality and versatility. The set of skins allows the colorpicker to be integrated into any design. On the other hand, custom skins may be created with ease even by unexpercienced users in no time.

Of course, you may attach custom functions that set color to any css property (and respectively html element) or execCommand(”, ”, ”) in browser-based rich-text editors.

Please, refer to the INSTALLATION_NOTES.txt, included in the distribution file for more information about the properties and their usage.

View Online Demo
Download the Script

Skinnable Web 2.0 Buttons

Welcome to the new version of Skinnable Web 2.0 buttons. Just a few months after its first version, here is the new one - AJAX-driven, easily configurable and with a slightly different html rendering.

Among the important changes that come with this release is that you don’t need to copy / paste the html code anymore. All you have to do is to edit a simple .xml file, that is stored in the the Web20Button/MyButtons/[ButtonListName].xml folder and the rendering engine will do the rest - it will generate the necessary html, id’s, etc. Obviously, you may have unlimited number of button lists on a single webpage.

There are several handy properties for the button list - skin, orientation, buttontextalign and buttonlistloader. And more - there are properties for each button in the collection - name, buttonwidth, buttontext, navigateurl, targetwindow, behavior, visible that allow you to fine tune your lists. For more information about the attributes of the <buttonlist /> and <item /> collections and the values they can accept, please, take a look at the INSTALLATION_INSTRUCTIONS.txt file in the download archive.

View Online Demo
Download the Script

Ajax Photo Gallery

This cool AJAX-driven image gallery script allows even unexperienced users to organize their photos in skinnable galleries by adding a few lines of code in their webpages and editing a simple xml feed file. No messing with id’s, scripts, stylesheets or html code - AJAX Photo Gallery does it all for you.

After downloading and unzipping the archive, just copy the following lines of code in the place of your webpage where the gallery will be generated (somewhere between the <body>…</body> tags):

<div id="ajaxphotogallery">
	<script type="text/javascript"
	 src="AjaxPhotoGallery/Scripts/AjaxPhotoGallery.js" mce_src="AjaxPhotoGallery/Scripts/AjaxPhotoGallery.js">
	</script>
	<script type="text/javascript">
		var albumfeedfile = 'MyPhotoCollection.xml';
	</script>
</div>

Then open MyPhotoCollection.xml, and add as many of your favorite images as you wish, image descriptions, select one of the available skins in the AjaxPhotoGallery/Skins/[SkinName].css folder and experiment with the various settings you may play with. The distribution of Ajax Photo Gallery comes with 8 ready to use skins - Black, Blue, Default, Lime, Olive, Orange, Purple and Red. To set a skin, simply type it’s name in the skin=”SkinName“ attribute in the <config /> collection. Do NOT type the file extension (.css) of the skin, otherwise the skin will not be applied. More skins will be available for separate download on my additional skins and files page.

The good news is that you may create any number of gallery feed files, similar to MyPhotoCollection.xml, i.e. you can have different galleries on different pages. To specify which feed file to use, edit the albumfeedfile variable in the gallery init code by typing the URL of the feed file, for example:

<div id="ajaxphotogallery">
	<script type="text/javascript"
	 src="AjaxPhotoGallery/Scripts/AjaxPhotoGallery.js" mce_src="AjaxPhotoGallery/Scripts/AjaxPhotoGallery.js">
	</script>
	<script type="text/javascript">
		var albumfeedfile = 'MyPhotoCollection2.xml‘;
	</script>
</div>

Please, refer to the attributes and the values they can accept of the <config /> and <photos /> collections from included in the archive INSTALLATION_INSTRUCTIONS.txt file.

View Online Demo
Download the Script

Hotel Reservation Form

A client of mine asked me if I could create a hotel reservation form with client-side validation and multilingual support and this is the result. It comes along with support for 4 languages - English (”en-US”), Bulgarian (”bg”), German (”de”) and French (”fr”). The form labels and validation warning messages are stored in .xml files and parsed onload. The default language could be easily set by changing a single variable in the <head>…</head> of the webpage:

<script type="text/javascript">
	var formlanguage = "en-US";
	// Bulgarian - "bg";
	// English - "en-US";
	// German - "de";
	// French - "fr";
</script>

The localization files are easily editable and are stored in the ReservationForm/Localization/ folder. The form layout is pure CSS and may be customized by editing the ReservationForm/ReservationForm.css file.

Please, note that the distribution does NOT contain the server part of the application, i.e. ReservationForm.php. Any form to email script would do the job.

View Online Demo
Download the Script

hCard.XML

hCard.XML is a free microformats hCard parser and reader and may be used on websites’ About pages, or any place you might find suitable.

The hCard data (names, contact information, organization, address, etc) is stored in an easily editable xml file and is parsed with javascript into any webpage that contains certain css classes (determined as hCard css classes by http://microformats.org/) and is independed from the html it is parsed in (unless the used html elements have certain id’s that are being looked for by hCard.XML parser).

Although hCard.XML is free to use, it’s parser is not open source, i.e. the javascript is obfuscated and cannot be modified and edited. The free version also contains a credit line at the bottom of the hCard that cannot be removed or set to invisible.

View Online Demo
Download the Scrip