Colour picker

nets · 05-03-2006, 10:20 PM

I needed a colour picker, so I decided to make one. I doubt anyone will want this, but I thought I would post it anyway.

HTML Code:

<html>
<head>
<title>Colour picker - By Josh</title>
<style type="text/css">
<!--
html,body {
 background-color: #cdf;
 margin: 10px, 0, 0, 10px;
 padding: 0;
 font: 12px verdana;
}
div {
 width: 20px;
 height: 20px;
}
#messageBox {
 position: absolute;
}
#container {
width: 370px;
}
-->
</style>
<script type="text/JavaScript">
<!-- Begin
// Web safe colour codes stored in array to save space
var colourCodes = new Array(
"000","300","600","900","C00","F00","003","303","603","903","C03","F03","006",
"306","606","906","C06","F06","009","309","609","909","C09","F09","00C","30C",
"60C","90C","C0C","F0C","00F","30F","60F","90F","C0F","F0F","030","330","630",
"930","C30","F30","033","333","633","933","C33","F33","036","336","636","936",
"C36","F36","039","339","639","939","C39","F39","03C","33C","63C","93C","C3C",
"F3C","03F","33F","63F","93F","C3F","F3F","060","360","660","960","C60","F60",
"063","363","663","963","C63","F63","066","366","666","966","C66","F66","069",
"369","669","969","C69","F69","06C","36C","66C","96C","C6C","F6C","06F","36F",
"66F","96F","C6F","F6F","090","390","690","990","C90","F90","093","393","693",
"993","C93","F93","096","396","696","996","C96","F96","099","399","699","999",
"C99","F99","09C","39C","69C","99C","C9C","F9C","09F","39F","69F","99F","C9F",
"F9F","0C0","3C0","6C0","9C0","CC0","FC0","0C3","3C3","6C3","9C3","CC3","FC3",
"0C6","3C6","6C6","9C6","CC6","FC6","0C9","3C9","6C9","9C9", "CC9","FC9","0CC",
"3CC","6CC","9CC","CCC","FCC","0CF","3CF","6CF","9CF","CCF","FCF","0F0","3F0",
"6F0","9F0","CF0","FF0","0F3","3F3","6F3","9F3","CF3","FF3","0F6","3F6","6F6",
"9F6","CF6","FF6","0F9","3F9","6F9","9F9","CF9","FF9","0FC","3FC","6FC","9FC",
"CFC","FFC","0FF","3FF","6FF","9FF","CFF","FFF");

// Displays hexidecimal colour code
function displayColour(colour) {
 document.getElementById('messageBox').innerHTML=colour;
}

//Moves the display box
function messageBoxPosition() {
 var element = document.getElementById('messageBox');
 element.style.left = event.clientX + 25;
 element.style.top = event.clientY;
}

//Updates box when the cursor is moved
document.onmousemove=messageBoxPosition;
//-->
</script>
</head>
<body>
<div id="messageBox">Choose a colour</div>
<div id="container">
<script type="text/JavaScript">
for(colourCount=0; colourCount<216; colourCount++) {
 document.write("<div style=\"background-color: #"+ colourCodes[colourCount] +"; float: left;\"");
 document.write("onmouseover=\"displayColour('#"+ colourCodes[colourCount] +"')\">&nbsp;</div>");
}
</script>
</div>
</body>
</html>

Designed for IE 6+

Mentor · 05-03-2006, 10:58 PM

IPB comes with one built in

http://www.thybag.co.uk/forum/html/sys-img/colours.html

nets · 05-03-2006, 11:01 PM

I enjoyed making it, and mine is different to that anyway (3 digit colour-codes).
If you're gonna test it out, use Internet Explorer (or atleast Opera, Firefox won't work correctly I'm assuming).

Mentor · 05-03-2006, 11:05 PM

You need to make a preview version for people like me who are to lazy to test it properly "/

nets · 05-03-2006, 11:06 PM

http://www.joshjh.pwp.blueyonder.co....our_picker.htm

Bomb-Head · 05-03-2006, 11:07 PM

nice

Mentor · 05-03-2006, 11:09 PM

Almost works in Firefox, all that doesnt is the code doesnt follow the curser and remains in a div in the top left

nets · 05-03-2006, 11:11 PM

Originally Posted by 01101101entor

Almost works in Firefox, all that doesnt is the code doesnt follow the curser and remains in a div in the top left

That's because event.client isn't supported by Firefox, I'll work out a way to fix that if I have time.
I'm thinking about making a JavaScript WYSIWYG HTML editor, but that might take some time.

Flisker · 06-03-2006, 06:53 AM

that would be nice to see

Thread: Colour picker

Thread Tools

Colour picker

Posting Permissions