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 (:

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

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!

I made some improvements on the password strength meters available on the web. Using prototype/scriptaculous, I stole some code from ZeBadger (thanks!) and created a new meter which dynamically changes while typing your password.

Click here to see the demo

If you want to use this script, feel free to download the source and use it on your website.

Enjoy.

A few months ago I was assigned to a project where a company, while their new site was being developed, wanted to track the visitors on their website for marketing purposes. The only problem was that their current website was constructed with Frontpage a few years ago and consisted of hundreds of static HTML pages. Since I'm (very) lazy I was not planning to copy paste the whole thing, I figured out a way to include the GA code in every static html page.

First, I wrote a .htaccess file which rewrites all (including files in subdirs) .html and .htm pages to addgoogleanalytics.php:

RewriteEngine on
RewriteRule ^(.*).html?$ addgoogleanalytics.php?file=$0

Wow, it that all? Yes it is. So helloworld.html will be rewrited to addgoogleanalytics.php?file=helloworld.html, and the user won't even notice. Now, take a look at addgoogleanalytics.php:

<?php
/* Open the given file and add the google analytics code */
$sData = file_get_contents($_GET['file']);
$sData = str_replace("</body>", "
<script src=\"http://www.google-analytics.com/urchin.js\" type=\"text/javascript\">
</script>
<script type=\"text/javascript\">
_uacct = \"UA-1808705-3\";
urchinTracker();
</script>
 
</body>", $sData);
echo $sData;
?>

Enjoy.