play around with this:
Code:
<html>
<head>
<script type="text/javascript">
var jump = 0xFFFFFF / 56;
String.prototype.pad = function(l, s, t){
return s || (s = " "), (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length)
+ 1).join(s)).substr(0, t = !t ? l : t == 1 ? 0 : Math.ceil(l / 2))
+ this + s.substr(0, l - t) : this;
};
function compileColors(){
if(div = document.getElementById('colorbox')){
for(i=0;i<0xFFFFFF;i=i+jump){
nDiv = document.createElement('div');
nDiv.style.height="20px";
nDiv.style.width="20px";
nDiv.style.border='solid 1px #000000';
nDiv.style.styleFloat='left';
nDiv.style.cursor='hand';
nDiv.onclick = Function('colorChosen(\''+'#'+d2h(i).pad(6, '0', 2)+'\')');
nDiv.style.backgroundColor='#'+d2h(i).pad(6, '0', 2);
nDiv.innerHTML=' ';
div.appendChild(nDiv);
}
}
}
function colorChosen(color){
document.getElementById('color').value=color;
alert('you chose '+color+' and it was set to the hidden input box');
}
function d2h(d) {
var hD="0123456789ABCDEF";
var h = hD.substr(d&15,1);
while(d>15) {d>>=4;h=hD.substr(d&15,1)+h;}
return h;
}
</script>
</head>
<body onload="compileColors()">
<input type="hidden" id="color">
<div id="colorbox" style="height:200px;width:140px;overflow:auto;"></div>
</body>
</html>
if you want to see the html it creates get firefox and download the extension: WebDeveloper then select "view source>view generated source".
Posting Permissions
Bookmarks