ColorJack: DHTML Color Picker - Tested in IE 7.0, Netscape 8.1.3, Opera 9.20, Firefox 2.0.0.3 and AOL Explorer 1.5

ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.20, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is a numerous part copy and paste code that goes in both the <HEAD> and <BODY> section of your document. It also makes use of an external .js and .css file which you need to save and upload into your directory then add snipplets of code into the <HEAD> section to call these two (2) files. This effect also makes use of a few graphics you will need to add into your directory.

For your Information: The site you will be getting the script from has everything needed in a convenient "Zip" file you will download to your computer. It contains all the graphics, external .js and .css file besides an example html document.

Step One: Is to download and extract all from the zip file to a convenient place on your harddrive. We just make a temporary new folder and extract all to the desktop.

Step Two: Is to upload into your directory* all the files associated with this effect.

* If you are going to upload the images, .js and .css files into a directory/directories other than your "Root" or "Top" directory, then you need to reflect these changes within the codes. See below where and howto. For example, if you upload the images into a directory named "myimages", then in the reconfigured section (below right) you will see howto.

Image Reconfigurations-Default
These changes will be made within the plugin.css

#SV { background: #FF0000 url('SatVal.png'); _BACKGROUND: #FF0000; POSITION: relative; CURSOR: crosshair; FLOAT: left; HEIGHT: 166px; WIDTH: 167px; _WIDTH: 165px; MARGIN-RIGHT: 10px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='SatVal.png', sizingMethod='scale'); -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#SVslide { BACKGROUND: url('slide.gif'); HEIGHT: 9px; WIDTH: 9px; POSITION: absolute; _font-size: 1px; line-height: 1px; }

#H { BORDER: 1px solid #000; CURSOR: crosshair; FLOAT: left; HEIGHT: 154px; POSITION: relative; WIDTH: 19px; PADDING: 0; TOP: 4px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#Hslide { BACKGROUND: url('slideHue.gif'); HEIGHT: 5px; WIDTH: 33px; POSITION: absolute; _font-size: 1px; line-height: 1px; }
#Hmodel { POSITION: relative; TOP: -5px; }
#Hmodel div { HEIGHT: 1px; WIDTH: 19px; font-size: 1px; line-height: 1px; MARGIN: 0; PADDING: 0; }

#plugID { HEIGHT: 120px; WIDTH: 63%; MARGIN: 12px 0 0 250px; PADDING-TOP: 76px; COLOR: #000; BORDER: 2px solid #333; TEXT-ALIGN: center; FONT-SiZE: 25px; BACKGROUND: #F1FFCC; }

Image Reconfigurations-Different Directory
These changes will be made within the plugin.css

#SV { background: #FF0000 url('myimages/SatVal.png'); _BACKGROUND: #FF0000; POSITION: relative; CURSOR: crosshair; FLOAT: left; HEIGHT: 166px; WIDTH: 167px; _WIDTH: 165px; MARGIN-RIGHT: 10px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimages/SatVal.png', sizingMethod='scale'); -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#SVslide { BACKGROUND: url('myimages/slide.gif'); HEIGHT: 9px; WIDTH: 9px; POSITION: absolute; _font-size: 1px; line-height: 1px; }

#H { BORDER: 1px solid #000; CURSOR: crosshair; FLOAT: left; HEIGHT: 154px; POSITION: relative; WIDTH: 19px; PADDING: 0; TOP: 4px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#Hslide { BACKGROUND: url('myimages/slideHue.gif'); HEIGHT: 5px; WIDTH: 33px; POSITION: absolute; _font-size: 1px; line-height: 1px; }
#Hmodel { POSITION: relative; TOP: -5px; }
#Hmodel div { HEIGHT: 1px; WIDTH: 19px; font-size: 1px; line-height: 1px; MARGIN: 0; PADDING: 0; }

#plugID { HEIGHT: 120px; WIDTH: 63%; MARGIN: 12px 0 0 250px; PADDING-TOP: 76px; COLOR: #000; BORDER: 2px solid #333; TEXT-ALIGN: center; FONT-SiZE: 25px; BACKGROUND: #F1FFCC; }

If you are going to upload the external files (plugin.css and plugin.js) into directories other than your root directory (respectively) named for this example cssfiles and externaljsfiles, then you will need to reflect that in the below snipplets of code to call the external files.

<HEAD> Section Code Snipplets-Default

<link href="plugin.css" rel="stylesheet" type="text/css" />

<script src="plugin.js" type="text/JavaScript"></script>

<HEAD> Section Code Snipplets-Reconfigured

<link href="cssfiles/plugin.css" rel="stylesheet" type="text/css" />

<script src="externaljsfiles/plugin.js" type="text/JavaScript"></script>

Step Three: Are the reconfigurations within the <BODY> section. These encompass the absolute positioning of the color chart and the size of the color selected box. We will partition this section of code for your convenience. See below where and howto.

[ Return Whence You Came ]

<------ This Section Is Absolute Positioning ------>

<------ This Section Is For Selected Color Box Size ------>

<div id="colorbox" style="width: 300px; height: 200px; border: 1px solid gray; padding: 10px; background-color: #F1FFCC">

<------ You Can Remove From Here Down ------>

<a href="http://www.mudcube.com/code/DHTML_Color_Picker.php">
[ DHTML Color Picker ]
</a><br>
Free to use on your own projects<br /><br />

This version featured on <a href="http://www.dynamicdrive.com">
[ Dynamic Drive ]</a>

<------ You Can Remove From Here Up ------>

</div>

This color chart is what you configure the absolute positioning coordinates for.
Color Selector

This color selection box is what you configure the size of.

Your Color Selection

Note Of Importance On the page you are going to have this effect on or any page that will link to the page with this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the effect "Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/colorjack.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/colorjack.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

For your Information: Contained in the Zip file you will be extracting, there are five (5) images. We have scrutinized all sections of the code and could not find the topA.gif and topBG.gif anywhere.

If you are building this effect from an editor such as [ Angelfire ] when you click "Preview" the effect will not work. This is normal. You must view this effect from the actual URL and not from your cgi-auth/webshell.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]