Finally, the new version of the dateslider is available. Some changes:

• I moved the project to google code. From now on this will be the place where you can enter your bugs and feature requests and download the script. Besides this, there is some documentation available
• We fixed number of bugs and shortcomings from the previous version. For example, the area of dragging is limit so it is not possible anymore to drag to a place outside the box.
• A bunch of cool new features are implemented. You can now use callback functions when a user starts and ends dragging and it is possible to zoom closer when picking specific dates.

View a demo here

And for the ones who like to cook with jQuery herbs: I'm working on it

Prototype contains a number of functions that can be very useful in walking trough your DOM structure. Let's look at a short example. Suppose we have this piece of HTML:

 
<table id = "maintable">
<tbody>
<tr class = "row" id = "row1">
<td class = "cell" id = "cell1">Cell 1</td>
<td class = "cell" id = "cell2">Cell 2</td>
<td class = "cell" id = "cell3">Cell 3</td>
</tr>
<tr class = "row" id = "row2">
<td class = "cell" id = "cell4" colspan = "3">
<select id = "selectbox">
					<optgroup id = "group1">First group</optgroup>
					<option value = "1" id = "option1">Option 1</option>
					<option value = "2" id = "option2">Option 2</option>
					<optgroup id = "group2">Second group</optgroup>
					<option value = "3" id = "option3">Option 3</option>
					<option value = "4" id = "option4">Option 4</option>
				</select>
</td>
</tr>
</tbody>
</table>
 

Using up(), down(), next() and previous() we can find our way easily trough the DOM elements:

 
$('maintable').down(); // returns tbody element
$('maintable').down(1); // returns tr#row1
$('maintable').down().down().down(); // returns td#cell1, use down(2) instead
$('maintable').down(2).next(); // returns td#cell2
$('cell1').up(2); // returns table#maintable
$('cell2').up().next().down(1); // returns select#selectbox
 
/* include some CSS Selectors */
$$('table')[0].down(1); // returns tr#row1, use $('maintable') instead
$('maintable').down('.row'); // return tr#row1
$('maintable').down('#group1'); // returns optgroup#group1
$('option2').next('option'); // returns option#option3, mind skipping of optgroup
$('option4').up('.row').previous('.row').down('.cell'); // return td#cell1

Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let's start a quick tour. (more...)

Update (July 13): Please mind that there is a follow-up post

Update (May 17): I am planning to move this project to Google Code. I received some nice improvements, so it would be good to form a team and develop this project further to fix all the bugs that are still out there. Contact me at willem [:at:] ajaxorized

Update (May 10): Thank you all for your support. Currently I am improving the dateslider, check the newer (warning, not fully tested and stable) version here . I've fixed the problem of startdate > enddate and working on some other functionalities. Thanks again, you guys keep me going (:

You came for the demo right? It's here.

Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it's somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous, but now combined with the very sexy DateJs library.

Implemeting is easy. First, include de javascript libraries:

<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder,dragdrop" ></script>
<script type="text/javascript" src="js/date-en-US.js" ></script>
<script type="text/javascript" src="js/dateslider.js" ></script>

Then, include the stylesheet:

<link rel="stylesheet" href="css/dateslider.css" type = "text/css" />

Then copypaste this to your HTML:

<div id = "slider-container">
	<div id = "sliderbar"></div>
</div><br />
<form>
<label for = "datestart">Start:</label>  <input type = "text" id = "datestart">
<label for = "dateend">End:</label>  <input typde = "text" id = "dateend">
</form>

Finally, create the dateslider object. The parameters are [dragbar_id],[date_bar_start],[date_bar_end],[year_start],[year_end]

p_oDateSlider = new DateSlider('sliderbar', '2007-10-01', '2008-10-01', 2001, 2009);
p_oDateSlider.attachFields($('datestart'), $('dateend'));

Thats it! I've tested it in Firefox 2.x, and IE6/7, please notify me when your browser isn't supported. You can download the full package, including prototype 1.6 and scriptaculous 1.8, here, it's under the GPL license.

Enjoy!

Ajaxorized proudly presents... the Image Transition Manager. The Image Transition Manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking and more to come.

While working on a project for a customer, I needed to create a kind of slideshow-like effect for presenting several photos of products. When I started out making this 'effect', I found out that I could use this for much more other projects than just this single one. That is what triggered me to create a nice class out of it, so I could easily implement it into my other projects. After showing my first version to Willem, he did some of his magic and extended my class with some other nifty image transitions and functionalities. That is how our Image Transition Manager was born.

(more...)

When adding this tiny javascript to the onkeyup event of your inputbox, the border will turn green when the email address. It uses scriptaculous' morph function to perform this transformation. See a demo
(more...)

That right guys, prototype 1.6.0 is on it's way and there is one aspect I want to share with you. In stead of using the old-fashioned 'http-header' way to transport JSON, the prototype framework now eats files with the content-type 'application/json'. A short example:

1. First, we will use prototype to make an ajax request.

    new Ajax.Request('ajax.php',{ onSuccess: handleSuccess }, method: 'get' });

2. After this, on the serverside we set the json headers and output the formatted data using the Services_JSON class:

   <?php
   require_once "services_json.class.php";
    
   /* Set the JSON header */
   header("content-type:application/json");
    
   /* Format some data */
   $aData = array("Car", "Plane", "Train");
    
   $oJson = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
    
   /* Output */
   echo $oJson->encode($aData);
   ?>

3. And finally this alerts 'Car', 'Plain' and 'Train':

   function handleSuccess(transport) {
     $A(transport.responseJSON).each(function(str) {
       alert(str);
     });
   }

While playing around with the prototype framework, I wrote 2 code snipplets I want to share with you:

 
var _ = function(sEName, id, classname, attributes) {
	var e = document.createElement(sEName);
	if(id) { e.id = id; }
	if(classname) { e.className = classname; }
	if(attributes) { for(var p in attributes) { e.setAttribute(p, attributes[p]); }	}
	return $(e);
}
 
Element.addMethods({
	_a: function(element, e) {
		element.appendChild(e);
		return $(e);
	},
	_r: function(element, e) {
		element.removeChild(e);
		return$(e);
	}
});

Using the functions above, you will be able to create HTML structures on the fast DOM-lane:

 
var oHTML = _('div', 'head', 'headClass');
oHTML._a(_('div', 'second', 'secondClass'))._a(_('img', 'myimage', 'images', {src:'pica.jpg'}));
document.body.appendChild(oHTML);

Which results in:

 
<div id="head" class="headClass">
<div id="second" class="secondClass">
     <img src="pica.jpg" id="myimage" class="images" />
  </div>
</div>
 

Enjoy.