Hi,

 

I have a jQuery snippet that filters a projects page, depending on which category the user chooses, the page alters to accommodate. See the page here: My link

 

If you click the links at the bottom you will see that some of the 'squares' are hidden from view.

 

What I want though, is to not hide the irrelevant 'squares' but just change the background colour to a darker blue.

 

Can someone pick at my jQuery snippet as I cannot seem to alter it correctly. Or is there a simpler way to do this?

 

Thanks

 

//Projects Page Filter
$(document).ready(function() {
$('ul#filter a').click(function() {
	$(this).css('outline','none');
	$('ul#filter .current').removeClass('current');
	$(this).parent().addClass('current');

	var filterVal = $(this).text().toLowerCase().replace(' ','-');

	if(filterVal == 'all') {
		$('#portfolio .item.hidden').fadeIn('slow').removeClass('hidden');
	} else {

		$('#portfolio .item').each(function() {
			if(!$(this).hasClass(filterVal)) {
				$(this).fadeOut('normal').addClass('hidden');
			} else {
				$(this).fadeIn('slow').removeClass('hidden');
			}
		});
	}

	return false;
});
});

What I want though, is to not hide the irrelevant 'squares' but just change the background colour to a darker blue.

 

//Projects Page Filter
$(document).ready(function() {
$('ul#filter a').click(function() {
	$(this).css('outline','none');
	$('ul#filter .current').removeClass('current');
	$(this).parent().addClass('current');

	var filterVal = $(this).text().toLowerCase().replace(' ','-');

	if(filterVal == 'all') {
		$('#portfolio .item.hidden').fadeIn('slow').removeClass('hidden');
	} else {

		$('#portfolio .item').each(function() {
			if(!$(this).hasClass(filterVal)) {
				$(this).fadeOut('normal').addClass('hidden');
			} else {
				$(this).fadeIn('slow').removeClass('hidden');
			}
		});
	}

	return false;
});
});

 

Couldn't you just use animate?

 

if(!$(this).hasClass(filterVal)) {
$(this).stop().animate({ backgroundColor: "#004"}, 500).addClass('hidden');
} else {
$(this).stop().animate({ backgroundColor: "transparent"}, 500).removeClass('hidden');
}

Couldn't you just use animate?

 

if(!$(this).hasClass(filterVal)) {
$(this).stop().animate({ backgroundColor: "#004"}, 500).addClass('hidden');
} else {
$(this).stop().animate({ backgroundColor: "transparent"}, 500).removeClass('hidden');
}

 

Not sure that's the desired result I need?!

 

Where would that snippet fit into the snippet I already have? (Sorry jQuery noob!)

 

Thanks

Not sure that's the desired result I need?!

 

Where would that snippet fit into the snippet I already have? (Sorry jQuery noob!)

 

Thanks

 

The same bit I took it from, where it starts "if(!$(this).hasClass(filterVal))". It would make the background of the irrelevant divs to dark blue... what did you want it to do?

The same bit I took it from, where it starts "if(!$(this).hasClass(filterVal))". It would make the background of the irrelevant divs to dark blue... what did you want it to do?

 

Swapped over the snippet now, but nothing happens still I'm afraid.

 

Yes, sorry, that's what I wanted. To keep all squares viewable, but make the selected categories stand out more, with a darker shade of blue.