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

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!

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

View example Download file

I even added a onComplete function which you can customize yourself!

The html

The css

#appear li {
	float: left;
	list-style-type: none;
	display: block;
	width: 150px;
	height: 150px;
	margin: 10px;
	}

#appear img {
	border: none;
	}

The javascript

window.addEvent('domready', function() {

	var ap = new cvElementAppear('appear',{
		elements: 'img',
		endwidth: 150,
		endheight: 150,
		duration: 1000,
		transition: Fx.Transitions.Sine.easeIn,
		onComplete: function(){
			alert('Finish!');
		}
	});
});

View example Download file

Download now!

The html

The css

.newsticker {
	height: 300px;
	width: 500px;
	display: block;
	overflow: hidden;
	position: relative;
	}

.images {
	height: 270px;
	width: 270px;
	}

img {
	border: none;
	}

.newsticker ul li {
	/*float: left; add the float: left when you prefer a horizontal news ticker*/
	display: block;
	width: 480px;
	padding: 10px;
	font: .8em Georgia, "Times New Roman", Times, serif;
	}

.tickertitle {
	display: block;
	font: bold .9em Georgia, "Times New Roman", Times, serif;
	}

.tickerimg {
	float:left;
	margin: 0px 15px 15px 0px;
	}

The javascript

window.addEvent('domready', function() {
	var news = new cvNewsTicker('tickerimages',{speed:500,delay:5000,direction:'horizontal'});
});

Changelog

• V1.0.1 – 7 dec 2009
  • Added a delay when the page is loaded
    
• V1.0 – 17 apr 2009
  • First release of the news ticker class

This class is so powerful that I’ve used it also on this website!

View example Download file

The html

The html in this example is very basic

Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

/* and so on and so on...*/

RelativeTop!

The css

Please take note of the margin-top variable in the col div.

#text {
	float: left;
	width: 500px;
	padding: 10px;
	background-color: #EEE;
	}

#col {
	margin-top: 0px; /*if this one is not defined the class will not work properly*/
	float: left;
	padding: 10px;
	width: 270px;
	height: 503px;
	background: url(images/rcol_example.jpg) no-repeat;
	}

The javascript

Just slides the relative div with an animation.

window.addEvent('domready', function() {
    var relative = new cvRelativeTop('col',{duration: 200, between: [250,1000] });
});

Advanced example with custom function onTransition

You can add a custom function in the onTransition parameter in case you would like more control over the class and it’s behaviour.

window.addEvent('domready', function() {
    var relative = new cvRelativeTop('col',{
        duration: 200,
        between: [250,1000],
        transition: transition: Fx.Transitions.Bounce.easeIn,
        onTransition: function(){
            var margintop = $('col').getStyle('margin-top').toInt();
            if(margintop > 500 && margintop < 550){
                alert('margin-top > 500px!');
            }
        }
    });
});

View example Download file

The html

input:focus {
    border: 1px #CC0000 solid;
}

This Mootool gives more style because it animates the on focus handle.

View example

The html

The html is partly the exact html that I used on the previous article about forms: The right way to style a form.

Profile info

Username


Password


Subscribe to newsletter

The Mootool

The mootools javascript uses the morph transition. Read more about this at the Mootools docs.

window.addEvent('domready', function(){
    var list = $$('form .inputbox');

    list.each(function(e) {
        var highlighter = new Fx.Tween(e);

        e.addEvent('focus', function(){
            highlighter.start(
                'background-color', '#666'
                'border', '#EEE'
            );
        });

        e.addEvent('blur', function(){
            highlighter.start(
                'background-color', '#FFF',
                'border', '#EEE'
            );
        });
    });
});