I’ve made a simple example so you’ll see how it works. Read more about the set up in the full article.

View example

Here it is, a working example for Mootools 1.2+. Good luck and take a look at the actual documentation I’ve you need some more information.

View example

The html

		Shirt 1

		Shirt 2

		Shirt 3

		Shirt 4

		Shirt 5

		Shirt 6


Drag Items Here

CSS

#items
{
	float: left;
	width: 525px;
	border: 1px solid #f9f9f9;
}

#cart
{
	float: right;
	width: 280px;
	background-color: #fff;
	border: 1px solid #f9f9f9;
	padding-bottom: 50px;
}

#cart .info
{
	color: #444;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
}

.item {
	float: left;
	position: relative;
	width: 150px;
	height: 175px;
	border: 1px solid #eee;
	margin: 10px;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	background-color: #fff;
	background-position: left top;
	background-repeat: no-repeat;
	cursor: move;
}

#cart .item {
	width: 75px;
	height: 75px;
	margin: 5px;
	background-position: -40px -22px;
	border-width: 1px;
	cursor: default;
}

.item span {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 0.8em;
	font-weight: bold;
	width: 100%;
	text-align: center;
}

The Mootools

Activate the mootools below after the DOM is ready…

var list = $$('.item');
var drop = $('cart');
var dropFx = new Fx.Morph('cart', {duration: 200, transition: Fx.Transitions.Sine.easeOut});

list.each(function(item){

	item.addEvent('mousedown', function(e){
		var e = new Event(e).stop();

		var clone = this.clone()
			.setStyles(this.getCoordinates())
			.setStyles({'opacity': 0.7, 'position': 'absolute'})
			.inject(document.body);

		var drag = new Drag.Move(clone, {
			droppables: '.cart',
			onDrop: function(element, droppable, event){
						drop.removeEvents();
						if(droppable){
							drop.highlight('#7389AE');
							dropFx.start({'background-color': '#FFFFFF'});

							item.clone().inject(drop);
							clone.dispose();
						}else{
							clone.dispose();
						}
					},
			onEnter: function(){
						dropFx.start({'background-color': '#98B5C1'});
					},
			onLeave: function(){
						dropFx.start({'background-color': '#FFFFFF'});
					}
		});

		drag.start(e); // start the event manual
	});
});

View example

I’ll start with modifying the DOM by injecting elements with the Mootools function inject(). Injecting elements to the DOM is very common with Mootools but it will make it slow down. To speed up you’ll have to do as little DOM modification as possible.

For example you load a JSON file and add elements depending on the content of the request. In this example we don’t avoid the Mootools each() function. We focus on the point that we don’t call the inject() function every time. This is my solution.Add the following lines to you general JavaScript file to implement a new function. I’ll recommend this if you

window.addEvent('domready', function() {
	Element.implement({
		docFragment: function(){
			return document.createDocumentFragment();
		}
	});
});

We’re going to add options to a select element, based on the JSON request.

var fragment = Element.docFragment();

json.each(function(o){
	var option = new Element('option',{'value': o.value, 'html': o.html});
	fragment.appendChild(option); //No reflow
});

$('select').appendChild(fragment); //Reflow!

Results

I’ve done some testing and I think it helped me pretty good to speed up my scripts. I’ve modified my cvLinkSelect class and did some testing with it. Here are the results. Not very impressive at this point but you can see it will help the performance.

The test handles a 12 lined JSON request and for each record an option element will be added to the DOM. Not a very big effort for a browser, but you’ll see that there is some difference on the most common browsers and it’s no surprise that IE is the slowest of them all. If you scale this up it has to be a large difference and I’m confident with that.

Read more about createDocumentFragment on Mozilla Developer Center.

Check the updated page for the cvLinkSelect class!

I’m searching for a easy way to style the select elements to a custum layout just like the Select Box Factory or something like that. Also I’m going to figure out if this class is usefull with a multiple select box. Anyway, I’m finished with this for the moment!

In most cases you’ll get the data from a SQL database or something like that and in therefore it’s an array.

/* $arr = array from the database */
$arr = array(//array(id,name),
			 	array(15,'15 inch'),
				array(17,'17 inch'),
				array(19,'19 inch')
			);

Make sure that the you’ll only get the id and the name or another identifier. The total has to be two otherwise it don’t work.

To get the JSON request in the right format I’ve written a small function that will add the value and html key to the arrays.

/**
* Function to set the key for each value
* Requires: array(array())
* Returns: JSON format for cvLinkSelect class
*/
function json_cvLinkSelect($arr = array()){
	$json = array(); /* temporary array */

	foreach($arr as $ob){ /*walk trough the original array */
		$keys = array('value','html'); /*define the two keys */
		array_push($json,array_combine($keys,$ob)); /* push the new array to the temporary array, $json */
	}

	return json_encode($json); /* return the $json array */
}

The output will be:

[{"value":"hard","html":"Hard"},{"value":"soft","html":"Soft"}]

I’ve updated the zipfile with the working example if you guys need more info.

Enjoy!

Changes

• Maintain an empty element with a short discription and an empty value in your html page and the class will  not remove this one while you change the parent select box
• Set the value of the first select box to the empty option after page reload
• Comments added for developers and curious people
• Updated the example
• Removed some overhead in the class

Go the the original page of the cvLinkSelect class!

But how could this happen? Everything worked fine in Firefox en Firebug was very happy with my programming. No errors found.

This is the moment the frustration grows. You place alerts on every line of code you can imagine and there’s still no solution for this error. Well, I can recommend you to watch the comma’s. Place no comma on the wrong place or on a place where you don’t need a comma. I’ve added a comma to the last option and this is where IE is going to throw stupid errors:

var cvMenu = new Class({
	Implements: [Options],

	options: {
		duration: 500,
		delay: 1500,
		transition: Fx.Transitions.Quad.easeInOut,
	},

	/* The rest of my class */

	lastFunction: function(){

		/* Last function in the class */

	},
}

Has to be:

var cvMenu = new Class({
	Implements: [Options],

	options: {
		duration: 500,
		delay: 1500,
		transition: Fx.Transitions.Quad.easeInOut /* No comma here */
	},

	/* The rest of my class */

	lastFunction: function(){

		/* Last function in the class */

	} /* No comma here */
}

Also becarefull at the end of your class, after the last function you may not use a comma!

IE is making life great hûh?

Cheers!

View example Download file

Changes

• Multiple GET variables in the request url.
• After a page refresh the script checks if the first linked selectbox option is not empty. If it isn’t empty the first request fires.
• If the request is empty it’s the last item in the linked selectboxes range. In this case we have to fire the isLast function.

Read more about the usage on the original post for the cvLinkSelect class!

Enjoy!

This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded. Simple as that.

View example Download file Download Zip

The html

Note that only the first select element has some options in it. These can be static html or generated by php.

-- Select the category --
Car
Bicycle


-- Select the type --


-- Select the function --

The css

These css is only for the style of the form elements. Nothing special.

Do you need a neat little loading gif? Just go to Ajaxload and download your own!

.loading{
	background: url(images/loading.gif) 170px center no-repeat;
	}

.inputbox {
	width: 220px;
	padding: 5px;
	border:1px solid #EEE;
	font: 12px "Courier New", Courier, monospace;
	color: #333;
	}

select.inputbox {
	width: 232px;
	}

The javascript

This is where the magic happens. Two variables are very important to make this class work.

• value: This is the name of the object that is the value in the future option element
• option: This is the name of the object that is the visual value of in the option element

window.addEvent('domready', function() {
	var l = new cvLinkSelect({
        select_class: '.linked', //the class for the linked select boxes
		url: 'yourajaxurl.php', //pad to ajax file
		multiple_var: true, //use multiple get variables or only one
		loadClass: 'loading', //the css class that is added when a request is made
		isLast: function(){
			alert('Last dynamic selectbox!');
		},
		hasnoSub: function(){
			alert('This option has no depending options. Lets hide the next elements!');

			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.hide();
				}
			});
		},
		hasSub: function(){
			l.select.each(function(s){
				if(l.select.indexOf(s) >= l.select.indexOf(l.current)){ //if the select depends on the parent
					s.show();
				}
			});
		}
	});
});

The JSON format

You have to make sure that the AJAX request returns a JSON format that is formatted like the example below.

NOTE
Be sure that the json always contains a value and a html object. See the demo for a example.

[{"value":"wheels","html":"Wheels"},
{"value":"body","html":"Body"},
{"value":"exaust","html":"Exaust"}]

The php

The php file has to return a JSON formatted string depending on the selected value. You can use if-statements or use a switch method to print the exact output but the basics are just this:

if(isset($_GET['category'])){
	echo '[{"value":"wheels","html":"Wheels"},{"value":"body","html":"Body"}]';
}elseif(isset($_GET['type'])){
	echo '[{"value":15,"html":"15 inch"},{"value":17,"html":"17 inch"}]';
}

When your website is dynamic you probably prefer to use a flexible way of presenting the JSON variable. Read more about this in another article I’ve wrote. I think it’s very useful so read it and don’t reinvent the wheel.

Multiple GET variables

In the old version we had only request with this kind of urls:

ajax.php?category=var

But in my opinion this wasn’t sufficient for the main goal: Get the right data in the select boxes and make programming easier. So that’s why I’ve made an update to the class so you can get this kind of requests:

ajax.php?category=var&type=var2

These urls can be activated via the multiple_var option in the class. Before you use them: please make sure that your php script has the correct architecture. A very basic example:

if(!empty($_GET['category'])){
	if($_GET['category'] == 'car'){
		if(!empty($_GET['type'])){
			if($_GET['type'] == 'wheels'){
				/* return the wheels JSON variabele */
			}
		}else{
			/* return the car JSON variable */
		}
	}
}

I hope you enjoy this class and if you have any questions or suggestions; please leave a comment!

Changelog

• v1.4 30 mrt 2010
  • Fixed the weird Elements bug in Mootools 1.2.4
  • Upgraded the speed with document.createDocumentFragment()
• V1.3 26 feb 2010
  • It’s possible to disable the select elements when no options are available. This is great feedback
• V1.2.2 – 21 feb 2010
  • Fixed the reset bug. It will be resetting all the select elements if an empty value is set.
• V1.2.1 – 20 feb 2010
  • Reset the depending select elements if when a user changes the upper select element
• V1.2 – 26 nov 2009
  • Maintain an empty element with a short discription and an empty value in your html page and the class will  not remove this one while you change the parent select box
  • Set the value of the first select box to the empty option after page reload
  • Comments added for developers and curious people
  • Updated the example
  • Removed some overhead in the class
• V1.1 – 2 nov 2009
  • Multiple GET variables in the request url.
  • If the request is empty it’s the last item in the linked selectboxes range. In this case we have to fire the isLast function.
• V1.0 – 1 nov 2009
  • First release of the link select class

So I decided to write my own Eyedropper. Test it and install it on your own website! You can tweak some events so it has more functionality.

There is also a Zip file available with a working example. Just upload the files to your folder on your webspace and navigate to it!

Example Download Class Download Zip

File structure

The following structure is used in the example and the documentation.

• images
  • your_image.jpg
• js
  • cvMooDrop.js
  • mootools-1.2.js
• ajax_moodrop.php
• basic.css
• cvMooDrop.css
• index.php /*This file contains the html for the eyedropper*/
• moodrop.php

The html

The html is really simple. The path to the image is the relative path.

The css

#dropperid {
	float: left;
	padding: 0px;
	width: 551px; //the width of the image
	height: 157px; //the height of the image
	}

#prev {
	float: left;
	width: 80px;
	height: 80px;
	border: 1px #CCC solid;
	}

The basic javascript

window.addEvent('domready', function() {
	var test1 = new moodrop('dropperid',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev'
	});
});

The more advanced javascript

window.addEvent('domready', function() {
	var test2 = new moodrop('dropperadvanced',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev2',
	});

	var colors = [];

	var addColor = function(c){
		if(colors.contains(c)){
			alert('This color already exists!');
		}else{
			colors.push(c);
			$('colors_field').value = JSON.encode(colors);
			createColor(c);
		}
	}

	var createColor = function(c){
		var box = new Element('span',{	'id': this.hex,
							  			'class': 'box',
										'styles': {
											'background': c,
											'display': 'block',
											'float': 'left',
											'cursor': 'pointer'
											}
										}).inject($('scheme'));
	};

	$('add').addEvent('click',function(a){
		addColor(test2.hex);
	});
});

The php (ajax_moodrop.php)

The AJAX request has several variables in it to get the right pixel, the pixel the dropper is pointing at.

• image: the relative path to the image file
• n: the relative top position of the pixel
• w: the relative left position of the pixel

if(isset($_GET['image'])){
	/* select the left lower pixel from the dropperdiv and get the color index */
	$im = imagecreatefromjpeg($_GET['image']);
	$color_index = imagecolorat($im, $_GET['w'], $_GET['n']);

	/* get rid of the temporary image and display the human readable hex color */
	echo '#'.dechex($color_index);
}

The function imagecreatefrom* can be changed to several functions, depending on the image type you use. In this case I’ve used a very simple static solution but you can select the correct function by checking the mime type.

• imagecreatefromjpeg
• imagecreatefromgif
• imagecreatefrompng