Then you should definitely attend Kings of Code, an annual coding event in Amsterdam. The event will take place at June 29/30 2009 in Tuschinski.

Some great speakers will be there as well:

• Joe Stump - Lead architect Digg.com
• Francisco Tolmasky - Creator of Cappuccino & Objective-J
• Steven Pemberton - Chair W3C XHTML2 Working Group

And many more

The event will be hosted by Robert Gaal & Leah Culver, see you there!

Hi Everybody! It's been a while since I updated ajaxorized, sorry for that. I've been busy with my startup Yunoo, read more about it in English here:

http://thenextweb.com/2009/03/04/qash-becomes-yunoo-and-launches/

Besides that, I started the Twitter-based braintainment service Twitbrain which has been quite a success (Techcrunch, Mashable).

Hopefully I can start writing some funky javscript-code again for ajaxorized. If you have anything to comment, please do so on this post, there are thousands of comments waiting for approval on the other posts.

Enjoy!

Ps, I'll be hanging out on The Next Web 2009 in Amsterdam next week, come drink a beer with me!

It's been a while, but a new piece of Javascript is here to add some dynamics to your web-page. SmoothCounter is a script that enables you to count between 2 numbers (with a given precision) in a given period of time. Click here for a demo.

Usage:

var counter = new SmoothCounter('count-div', { countTo : 100, duration : 3, precision : 2});
counter.start();

Where 'count-div' is the id-property of the element where the start-number is located. The countTo and duration options indicate to the end-number and the duration in seconds. The precision option is used to set the precision.

A working demo is provided in this download, I'd like to see the implementations!

Enjoy.

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

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!

The following code (using prototype) prevents bots stealing the emailaddresses used on your website. Instead of including the emailaddress directly, use a div with a classname where the email-address needs to be placed:

Hi Bot! My email address is  <div class = "email_here"></div>!! Catch me if you can!

Then, use javascript to replace the email address after the page is loaded:

$$('.email_here').each( function(e) {
  e.update('willem'+'@'+'ajaxorized.com').observe('click', function() { window.location = 'mailto:willem'+'@'+'ajaxorized.com'; }).setStyle({cursor:'pointer'});
	});

Mind the concatenation that is used to prevent stealing from your javascript file. Include this piece of code in your body onload event and no bots will ever steal your email addresses again!

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

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.

Once, long before the Ajax and Web 2.0 era , there was a time we used HTML <center> for text-alignment and javascripts stunning alert() function for debugging our websites and applications. But times are changing. To develop high performance Web 2.0 'killer apps', we need more tools and better applications to create web applications based upon Javascript frameworks (such as prototype, jQuery, scriptaculous, moo tools etc.) feeded by PHP as a backend. Below I will sum up some free Firefox-extensions to build web applications quick, efficient and flawless. Ok, almost flawless then. (more...)