Let’s say you have several select dropdowns on the same form. You want three different answers for the same question or a similar one. But you don’t want the user to select the same option more than once. This simple jQuery setup with help you out.

There are two parts to the code. One to find which option has been selected and disable it in the other options lists.

//this function determines which option has been selected and disables it in the other boxes
$('#select-group select').blur(function() {
	$('#select-group option:selected').each(function() {
		var v = $(this).val();
		if (v != '') {
			$(this).parents('.selector').siblings('.selector')
			.find('option[value="'+v+'"]').attr('disabled','disabled');
		}
	});
});

And one to make sure the ones deselected are available again.

//re-enables those deselected
$('#select-group select').focus(function() {
	$(this).find('option:selected').each(function() {
		var v = $(this).val();
		if (v != '') {
			$(this).parents('.selector').siblings('.selector')
			.find('option[value="'+v+'"]').removeAttr('disabled');
		}
	});
});

You can download the selection-removal to get all the code.

One of the latest crazes in web design is the parallax effect, or a 3D effect created by layering. You can find a really amazing, complicated design at NikeBetterWorld. Recently I created the effect on a much simpler scale for a small wakeboarder’s website.

I used jQuery to get the job done. The function works as follows:

//spd tells the object how quickly to move with the window scroll. 1 is normal speed.
opts.spd = opts.spd || 1;

This is the function to calculate the new position for the object based on the position of the window scroll.

function calcMove() {
//get the scroll position from top, document height, window height, and object height
	var offset =  $(document).scrollTop();
	var docSize = $(document).height();
	var windowSize = $(window).height();
	var boxSize = $(obj).height();
//calculate the percent down the document
	var room = offset/(windowSize - docSize);
//calculate the how fast the object should move and where it should be in relation to actual position
	var move = ((docSize * room) * opts.spd) + opts.startPos;
	return move;
}

Then you need a bit of javascript to place the objects and give them speed.

//this sets the height of the document (how far the entire scroll will go)
$('div#node-1').parents('#content').height(16200);
//the top setting is where the object starts and the spd is how fast it moves
$('div#node-1, div#node-1-title').css('top',65).parallax({spd:.15});

The best bet to get this working the way you want is to start from the top and move down. Testing objects as you move down the page to get them just where you want.

Attached is the html file with the javascript you need to use this simple parallax function.
Parallax doc

On this WordPress site I modified the theme and added some custom pages to handle the tablets comparisons. First, there is a page to show all the tablets for selection. Second, once selected another custom page shows the tablets details side-by-side.

www.tabletvergelijker.nl/tablets/tablets/

Once again working with Interactive Xperience

I did this WordPress site some time ago for a local (Chicago) writer and photographer. It’s a basic WP theme set up to manage her site.

www.nataliakosk.com

A recent site I completed some custom Drupal work for had me creating a couple slide shows with the views slideshow module. One is on the homepage at www.interactiveexperience.nl.

Also I wrote some custom PHP to handle views for layouts. The regular views output had be changed so that the classes and ids would match with a prewritten css stylesheet. I also hooked the mini-pager so that it would fit the style.

I also wrote custom jQuery to handle a design gallery on the portfolio page with fancybox. Fancybox is  a type of lightbox for image galleries. The biggest trick was getting the fancybox to cycle through the images from each portfolio selection, not for the entire page.