Step One Download the "Zip" file from the script site. Click on the zip file icon below to see what will be in the zip file you need to extract. Once you do that, you need to make a new folder in a place that is convenient for you to get access to all the files you need to extract to this new folder. We have our new folder sitting on our "Desktop" for easy access. The new folder should look something like the below image. You can name it anything you want, it is just a temporary storage until you upload all the files into the respective directories.

Step Two Once you have the new folder, now extract all the files from the "Zip" file to this new folder. Once you do this, the new folder will have four separate icons inside. Each icon will have different files you will need to upload into the different directories. If you click on the below "New Folder", you will see the four different icons containing the different files that you have downloaded into this folder. Once that page opens, you can click on each of the four icons to see what is in them.

Note of Importance ~ In reference to one of the files that will be located in the "New Folder". This is the "demo.html document". You actually do not have to upload that file. You can just "View" the "Source Code" and get the HTML codes for this effect and paste them into your own document.

Step Three Now you need to upload all your images into the directory where you keep your images. There are 13 images that will be uploaded with two different file extensions. (gif" and "png"). Be careful when you upload these images that the file extension does not change on you. Some webshells have a bad habit of changing the file extension of a png to that of a jpg. Once all your images are uploaded, check to see that the extensions are still the same.

Step Four Once all your images are uploaded and secure, now you need to upload all the external .js files (Not the .css file, this goes in your .css directory*) into their directory. There are 9 external .js files you will need to upload into your .js directory*.

* When we refer to the different directories, this does not mean you have to place the codes in these specific directories. We just do it that way to separate the different file types. You can upload these files into any directory you want. Just remember to change the directory in the code to reflect these changes. This will be covered later in this tutorial.

Step Five Once all the external .js scripts (9) and .css file (1) are uploaded, now you need to make two (2) reconfigurations to the external .css file or two of the images you have uploaded will not be visible and you will not know why. These reconfigurations are that of the relative path to two (2) of the uploaded images. These relative paths needs to be changed to the directory path where you have uploaded the images. If you do not change this part, there will be 2 images that do not appear to complete the color picker. Do Not change the image names, just the relative paths. See below:
[ Relative vs. Absolute ~ Defined ]

Default .css File

position:absolute;
left:216px;
height:198px;
width:18px;
background:url(../img/hue.png) no-repeat;
top:18px;
}

#pickerDiv {
position:absolute;
left:10px;
height:187px;
width:188px;
/*
background:url(../img/pickerbg.png) no-repeat;
*/
top:20px;
}

W e have all our images residing in our images/ directory, so as you can notice in the below reconfiguration of the "relative" path, we are now calling the uploaded images from our images directory.

Reconfigured .css File

position:absolute;
left:216px;
height:198px;
width:18px;
background:url(../images/hue.png) no-repeat;
top:18px;
}

#pickerDiv {
position:absolute;
left:10px;
height:187px;
width:188px;
/*
background:url(../images/pickerbg.png) no-repeat;
*/
top:20px;
}

T hat is the only reconfigurations that need to be made to any of the external scripts, either the .js or the .css.

Step Six Now it is time to get the "Source Code" from the Demo HTML Document and paste it into your own document. (this is only if you did not upload that file into a directory).

Step Seven The next step is to reconfigure the <HEAD> section relative paths of the external scripts, both the .css and the .js files. Reason being is that you have uploaded these files to your certain directories and now you need to reflect that change.

Default

<head>
<title>YUI Color Picker</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<script type="text/javascript" src="js/ddcolorposter.js"></script>
<script type="text/javascript" src="js/YAHOO.js" ></script>
<script type="text/javascript2" src="js/log.js" ></script>
<script type="text/javascript" src="js/color.js" ></script>

<script type="text/javascript" src="js/event.js" ></script>
<script type="text/javascript" src="js/dom.js" ></script>
<script type="text/javascript" src="js/animation.js" ></script>
<script type="text/javascript" src="js/dragdrop.js" ></script>

<script type="text/javascript" src="js/slider.js" ></script>

O ur default css directory is the same as the above default so we will leave that as is. Our js directory is different so see how we reconfigured that in the below example.

Reconfigured

<head>
<title>YUI Color Picker</title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
<script type="text/javascript" src="jscripts/ddcolorposter.js"></script>
<script type="text/javascript" src="jscripts/YAHOO.js" ></script>
<script type="text/javascript2" src="jscripts/log.js" ></script>
<script type="text/javascript" src="jscripts/color.js" ></script>

<script type="text/javascript" src="jscripts/event.js" ></script>
<script type="text/javascript" src="jscripts/dom.js" ></script>
<script type="text/javascript" src="jscripts/animation.js" ></script>
<script type="text/javascript" src="jscripts/dragdrop.js" ></script>

<script type="text/javascript" src="jscripts/slider.js" ></script>

Step Eight There are no other reconfigurations in the remaining part of the <HEAD> section so lets move on to the reconfigurations that need to be made in the <BODY> section of code. There are only three (3) places in this section of code that need to be reconfigured. Here again we need to reconfigure the relative path of your images otherwise they will not appear.

Default

<body>

<h3>Color Picker</h3>
<p>
Implements a slider region and a vertical slider to implement an HSV color
picker.
</p>

<div id="pickerPanel" class="dragPanel">
<h4 id="pickerHandle"> </h4>
<div id="pickerDiv">
<img id="pickerbg" src="img/pickerbg.png" alt="">
<div id="selector"><img src="img/select.gif"></div>
</div>

<div id="hueBg">
<div id="hueThumb"><img src="img/hline.png"></div>
</div>

<div id="pickervaldiv">

T he directory that we have all our images located in is images. Therefore the below shall reflect the change so the images can be called without any error.

Reconfigured

<body>

<h3>Color Picker</h3>
<p>
Implements a slider region and a vertical slider to implement an HSV color
picker.
</p>

<div id="pickerPanel" class="dragPanel">
<h4 id="pickerHandle"> </h4>
<div id="pickerDiv">
<img id="pickerbg" src="images/pickerbg.png" alt="">
<div id="selector"><img src="images/select.gif"></div>
</div>

<div id="hueBg">
<div id="hueThumb"><img src="images/hline.png"></div>
</div>

<div id="pickervaldiv">

Step Nine Once you do the above step, you are "Finally Done". The "YUI Color Picker should be functioning correctly.

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/yuicolorpicker.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/yuicolorpicker.html /

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

For your Information: You will notice on the YUI Color Picker itself there are three (3) different color codes. HSV, RGB and HEX. If you grab the below links, each of the different types of color codes will be explained.
[ HSV ] [ RGB ] [ HEX ]

I f you would like to add this effect into your pages, you can either [ Close This Window ] and get the code from the main page or grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. 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 ]