Podbox

Code

Friday, 2 September, 2005

I have an old 500Mhz Pentium 3, which acts as my "Internet Explorer Debugger," using a machine of this speed has its positive points as it allows me to evaluate the performance of my Javascript routines.

A script that I wanted to improve was a <table> based colour picker. Creating a bunch of rows and then filling them with tiny coloured coloumns never seemed very efficient to me.

So I've created a <div> based colour picker (Example), and here is the Javascript:

						
function buildPicker()
{

	var Colours = Array('#FFFFFF', '#EDEDED', '#E4E4E4', 
		'#DADADA', '#D1D1D1', '#C7C7C7', '#BDBDBD', '#B3B3B3', 
		'#A8A8A8', '#9E9E9E', '#FF0010', '#FFFE38', '#76FF36', 
		'#00FFFF', '#002CFD', '#EF00FD', '#FB0034', '#FFF125', 
		'#00AE5F', '#00B8EF', '#00429A', '#F30094', '#939393', 
		'#878787', '#7B7B7B', '#6E6E6E', '#626262', '#535353', 
		'#444444', '#343434', '#202020', '#000000', '#FF9C86', 
		'#FFB18D', '#FFC997', '#FFF7A4', '#D8E2A6', '#B5D8A6', 
		'#91CFA6', '#78D3CD', '#08D6F7', '#63AFDA', '#709DCE', 
		'#7D8CC2', '#9D90C2', '#F8A1C6', '#FE9EA5', '#FF715C', 
		'#FF9363', '#FFB26A', '#FFF478', '#C3D680', '#96C981', 
		'#55BF84', '#00C3BB', '#00C7F3', '#0097CE', '#0080BC', 
		'#416AAD', '#7E6BAF', '#A66EAF', '#F475AF', '#FB7388', 
		'#FB0034', '#FF6A35', '#FF9936', '#FFF125', '#ADCB52', 
		'#62BC5B', '#00AE5F', '#00B2A6', '#00B8EF', '#0080C1', 
		'#0063AB', '#00429A', '#593C99', '#923397', '#F30094', 
		'#F90066', '#AD001F', '#B34A20', '#B76B21', '#C4A621', 
		'#748F3B', '#408641', '#007E46', '#008076', '#0083AB', 
		'#005A89', '#00437B', '#00256E', '#421E6C', '#68006B', 
		'#A90068', '#AC0047', '#8A0000', '#8D3A00', '#905400', 
		'#998402', '#58712A', '#2E6B31', '#006535', '#00665E', 
		'#006988', '#00456D', '#003162', '#000258', '#2F0056', 
		'#540054', '#870052', '#8A0035', '#D3B7A1', '#A88E80', 
		'#816E64', '#625550', '#463D3B', '#D6A279', '#B8855E', 
		'#9E6D49', '#875735', '#744524');
		
	var Obj = document.getElementById("cPicker");

	for (var i = 0; i < Colours.length; i++) {
	
		var dDiv = document.createElement("div");
		dDiv.style.background = Colours[i];
		dDiv.onclick = selectColour;
		Obj.appendChild(dDiv);
	}
}

function selectColour()
{

	var Obj = document.getElementById("cPickerReturn");
	
	Obj.style.background  = this.style.backgroundColor;
	Obj.value = this.style.backgroundColor;
}

And here is the CSS, the important part is to make the <div>'s float: left;

#cPicker { 
	width: 165px; 
	background: #FFF;
	padding: 0 0 1px 1px;
}

#cPicker div { 
	width: 10px; 
	height: 10px; 
	float: left; 
	margin: 1px 1px 0 0; 
}