var temp = new Object();
var name = el.getProperty('name');
var value = el.getProperty('value');

eval("temp."+name+"='"+value+"'");

/* Add the object to another object */
merged = Object.merge(merged,temp);

I hope this is helpful to you!

I’ve heard that the beta version is coming soon and there will be lot’s of new functions. For example a  user login with lot’s of features.

Go and visit jsFiddle.net

A lot of javascript frameworks have several animations to move or style elements. I thought it was very handy to have all this kind of animations in one list so you can pick them wisely.

View Mootools example

The 30 transition types above break down into 10 sets:

• Quad
• Cubic
• Quart
• Quint
• Expo
• Circ
• Sine
• Back
• Bounce
• Elastic

Each set has three options:

• Ease In
• Ease Out
• Ease In Out

Usage

Load this javascript when the DOM is ready.

var enterFunction = function() {
	this.start('width', '600px');
}

var leaveFunction = function() {
	this.start('width', '300px');
}

bounceInOut= new Fx.Tween(quadInOut, {
	link: 'cancel',
	transition: Fx.Transitions.Quad.easeInOut,
	onStart: function(ydd){
		ydd.highlight('#F47920');
	},
	onComplete: function(ydd){
		ydd.highlight('#F5A145');
	}
});

$('bounceinout').addEvents({
	'mouseenter': enterFunction.bind(bounceInOut),
	'mouseleave': leaveFunction.bind(bounceInOut)
});

View examples

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

Go to the swfIR website

I’ve created a sample page to see it in action! It’s a pity that swfIR doesn’t work in combination with Mootools or Prototype…

View example

Add the javascript after the elements that has to be modified and before the tag. Specify the selector by id or class.

Rotate image

window.onload = function(){
	rotate = new swfir();
	rotate.specify('src', 'js/swfir.swf');
	rotate.specify('rotate', '-5');
	rotate.swap("#rotate");
}

Rounded corners

window.onload = function(){
	round = new swfir();
	round.specify('src', 'js/swfir.swf');
	round.specify('border-color', 'ffffff');
	round.specify('border-radius', '10');
	round.swap("#round");
}

Border

window.onload = function(){
	border = new swfir();
	border.specify('src', 'js/swfir.swf');
	border.specify('border-color', '333333');
	border.specify('border-width', '5');
	border.swap("#border");
}

Shadow

window.onload = function(){
	shadow = new swfir();
	shadow.specify('src', 'js/swfir.swf');
	shadow.specify('shadow-blur', '5');
	shadow.specify('shadow-strength', '.3');
	shadow.swap("#shadow");
}

All ajustments

window.onload = function(){
	all = new swfir();
	all.specify('src', 'js/swfir.swf');
	all.specify('src', 'js/swfir.swf');
	all.specify('rotate', '-5');
	all.specify('border-color', 'ffffff');
	all.specify('border-radius', '10');
	all.specify('border-color', '333333');
	all.specify('border-width', '5');
	all.specify('shadow-blur', '15');
	all.specify('shadow-strength', '.3');
	all.swap("#all");
}

See the demo Download file

The css

.index_button {
	width: 30px;
	height: 126px;
	float: left;
	cursor: pointer;
	}

.prev {
	background: #FFF url(images/index_prev.jpg) center right no-repeat;
	margin-right: 10px;
	}

.prev_hover {
	background: #FFF url(images/index_prev_h.jpg) center right no-repeat;
	}

.next {
	background: #FFF url(images/index_next.jpg) center left no-repeat;
	margin-left: 10px;
	}

.next_hover {
	background: #FFF url(images/index_next_h.jpg) center left no-repeat;
	}

#portfolio_index, #portfolio_index2 {
	padding-top: 10px;
	width: 700px;
	height: 115px;
	float: left;
	overflow: hidden;
	}

#portfolio_index3 {
	width: 140px;
	height: 105px;
	float: left;
	overflow: hidden;
	}

#portfolio_index ul li, #portfolio_index2 ul li, #portfolio_index3 ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	cursor: pointer;
	}

.item_hover {
	border: 1px #CCC solid;
	}

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

.active {
	border: 1px #F8991D solid;
	}

The html

The usage

See the example for the usage of the visited items using a Cookie.

window.addEvent('domready', function() {
	var slider = new cvStepSlider({
		wrapper: 'portfolio_index',
		list: 'items',
		items: '#portfolio_index ul li img',
		itemWidth: 140,
		itemHeight: 105,
		startSlide: 1,
		type: 'horizontal',
		step: 'item',
		nextbutton: 'next',
		prevbutton: 'prev',
		log: true,
		result: 'res',
		preloadImages: ['images/index_next_h.jpg','images/index_next.jpg','images/index_prev_h.jpg','images/index_prev.jpg']
	});
});

Make a list of images just like in the demo or see the html source code below.

See the demo Download file

The css

Note the properties for the ‘#image img’. The ‘position: absolute’ and the ‘opacity: 0′ are necessary for this class.

#image {
	padding: 52px 20px 10px 20px;
	width: 580px;
	height: 420px;
	background: url(image.png) top right no-repeat;
	}

#image img {
	cursor: pointer;
	width: 540px;
	height: 405px;
	position: absolute;
	opacity: 0;
	}

#nav {
	margin: 0px auto;
	width: 400px;
	}

.nav_button {
	cursor: pointer;
	list-style-type: none;
	float: right;
	margin-left: 10px;
	width: 40px;
	height: 40px;
	}

.non_active {
	cursor: default;
	opacity: 0;
	}

.nav_button:hover {
	background: url(nav.jpg);
	}

#stat {
	list-style-type: none;
	padding-top: 18px;
	font: bold 12px Verdana, Geneva, sans-serif;
	color: #666;
	}

The html

The list item #stat is for the image count.

The usage

Ajust these parameters to make a slideshow to your own preferences.

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

	var slideshow = new cvSlideShow({
		images: '.image',
		buttons: '.nav_button',
		autoplay: true,				//bool
		nextbutton: 'nav_next',
		prevbutton: 'nav_prev',
		pauzebutton: 'nav_play',
		statbut: 'stat',
		showtime: 2000,				//milliseconds
		duration: 500				//milliseconds
	});
});

View example Download file

The html

Short but powerfull!

The usage

window.addEvent('domready', function() {
	var index = new cvIndex({
		index: 'indexid',
		url: 'pagina url hier'
	});
});

Update 11-3-2009
To make the index even more usefull I’ve written a php script to create the index. This is a faster method than doing it by javascript. Check it out!

This class is works with Firefox, Safari, Chrome, Opera but not yet with Internet Explorer…

See the demo Download file

The html

The indicator for the maps is the id tag in the div element. This works just as usual. Every id has to be unique.

The css

There is no css required. I use this css to align them nicely. You also can add an animated loading gif. In this case you should give the class also an height and a width.

.googlemaps {	float: left;	margin: 0px 10px 10px 0px;	border: 1px #CCC solid;	}

The usage

Inplement the folowing rule into your head. Make sure you put these lines between the javascript tags and you have a valid key for your Google Maps usage.

window.addEvent('domready', function() {	var maps = new GoogleMaps({		map_prev_width: 300,		map_prev_height: 200		//change this options to your own preference	});});

Mootools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

The script language ‘javascript’ is browser based. This means that the scripts are executed by the program that you’re using for surfing on the internet. This program is called ‘the browser’. Some browsers handles the scripts differently. So you’ve got your script running in your favourite browser but when your friends look at the website some errors occures and the website isn’t shown as it should be. When you write plain, ‘old fashion’ javascript you can have this much trouble. When you use a javascript framework like Mootools this is more easy to debug and avoid this kind of problems.

Get started with Mootools

Go to mootools.net/download to download the mootools core.

Select elements

Add events

Transitions

AJAX

Links

• Mootools documentation