<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

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!

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!

• Not involved with Flash, or
• with CSS, and
• cross browser (Tested in Firefox, Opera and IE)
• Preloading the images before reflection

Here is a demo on black and on white.
(more...)

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

For my first contribution i'd like to start sharing a script i wrote a few months ago.

A problem i often encouter is that people, often customers, would like to upload multiple files all together, instead of, what you often see, one file at the time. Of course a very simple solution is to put multiple HTML upload fields on a page, but obviously we could think of a better solution. There are many alternatives on the internet, but most of them aren't customizable and as a real webdeveloper, i would like to create my own solution of course. That is why i created a solution combining three popular webtechnologies; Javascript, Flash and PHP; Javascript constrols the visual aspects, while Flash in combination with PHP handles the upload process.

Since Flash 8, the possibility to communicate between Flash and Javascript is improved, so you can communicate easily using the Flash's ExternalInterface API. With this you can call javascript functions from Actionscript and pass any number of arguments of any data type and vice versa!

To see a working example of my multiple upload solution, click here (no files will be actually uploaded).

I also helped willem out with the design and think we came up with a nice look for this weblog. As you can see at the top we included a menu and added the page 'projects'. I hope we will be able to give this page some content and if i improved my multiple upload script, i will add this as a project. Untill then, you can download the source of this first version here.