Selectable DIV's

PiKe · 14 Mar 2011 at 15:12

I have 3 sets of Divs

1 set with 4 'boxes'.
1 set with 2 'boxes'.
1 set with 2 'boxes'.

What I'm after is a way of clicking one div on each set and having them change it different colour to indicate that they have been clicked, I found some sample code which works for the first set, but not the other 2 (It only allows 1 div to be selected at any one time). Here is the code and I wondered what would need to be changed to accommodate what I'm after.

Code:

var highlightLink = function () {
	var active = null, colour = '#CC9900';
	if (this.attachEvent) this.attachEvent('onunload', function () {
		active = null;
	});
	return function (element) {
		if ((active != element) && element.style) {
			if (active) active.style.backgroundColor = '#999999';
			element.style.backgroundColor = colour;
			active = element;
		}
	};
}();

FabienO · 14 Mar 2011 at 15:44

Don't really need javascript for what you're describing, though it might be more ideal.

Seems like you could just use Sprites.

PiKe · 15 Mar 2011 at 09:14

Sprites looks a bit unnecessary.

Any other options?

Tripnologist · 15 Mar 2011 at 10:13

You could do it very easily with jquery.

Code:

<div id="container">
	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<div>
		<div>1</div>
		<div>2</div>
	</div>
	<div>
		<div>1</div>
		<div>2</div>
	</div>
</div>

Code:

$('#container > div').click(function(){
	$(this).addClass('clicked');
});

Then apply your alternative styling to the clicked class.

PiKe · 16 Mar 2011 at 09:26

Tripnologist said:
You could do it very easily with jquery.

Code:

<div id="container"> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>1</div> <div>2</div> </div> <div> <div>1</div> <div>2</div> </div> </div>

Code:

$('#container > div').click(function(){ $(this).addClass('clicked'); });

Then apply your alternative styling to the clicked class.

Would that not just let me click all the divs, changing them to the clicked class? I only want one div per row at a time to change colour.

E.g click 1 of the first set, turns it orange, click 4 of the first set; one returns to normal colour and 4 becomes orange.

Tripnologist · 16 Mar 2011 at 09:37

So using this as an example for your first row:

Code:

	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>

You want each div have a toggle yeah? ie:
click on 1 and 2 == both go orange.
then click on 2 and 3 == 2 goes back to normal and 3 goes orange?

Code:

$('#container div > div').toggle(function(){
	$(this).addClass('clicked');
}, function(){
	$(this).removeClass('clicked');
});

PiKe · 16 Mar 2011 at 09:46

Only one div at a time, 2 or more cannot be orange at the same time.

Tripnologist · 16 Mar 2011 at 11:51

Code:

$('#container div > div').click(function(){
	$(this).addClass('clicked').siblings().removeClass('clicked');
});