Slider Control Color Chart ~ Tested in IE6.0, Netscape7.02, Netscape8.0.4, Opera8.51, Firefox1.0.7 and AOL Explorer1.2

A simple slider control made from div tags. It can be displayed vertical, horizontal or XY. Demo is a color picker, demonstrating interaction between two sets of sliders, adjusting HSL and RGB color parameters. Grab the below link to see the demo:
[ Slider Control Color Chart ]

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and javascripts, this is a slightly different type of seven (7) possibly eight (8) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also requires you to make and insert portions of code into external Javascript files. If you have never done this, actually it is much easier than it sounds. We will cover easy individual part of this step by step.

Step One: The first thing you need to do is to save an image to your harddrive and then upload it to the same directory* that this effect will be located.
[ Save This Image ]
* We suggest your "Top" directory for the simple reason the way this script (external Javascripts) are configured, it is much easier to upload the image into this directory instead of (for example) your/image directory.

Step Two: This is a part that if you are not familiar with making an external Javascript file follow closely. The site you will be getting the copy and paste code tells you to:



From that point everything to including the below


}
// end of SliderControl class

You now need to paste what you just copied into a "Notepad" and save as a Text document and name it"slider.js". If you have a Notepad replacement and not using the Microsoft® Notepad, this will not work. You Need To Save it with the Microsoft® Notepad. Reason being is quite simple. Not everyone is using the notepad replacement you are. And by uploading it in the replacement, not all systems will be able to read the external Javascript.If this is a little unclear on howto save as a .js file in a notepad, grab the below link and this should clarify it.
[ See Example Of Howto ]

Once you save as ( slider.js ), you should see something that looks a lot like:

Now upload that file (slider.js) into the directory where your effect will be located.

Step Three: Add the below section of code into the <HEAD> section of your document.
<script type="text/javascript" src="slider.js"></script>

This is what will be calling the uploaded slider.js external Javascript file.

Step Four: Now repeat Step two: and copy from the below



From that point everything to including the below

//listens for the hs slider change
//calculates html color and rgb slider values
function calculateHs(x,y) {
slHue.setValue(x,x,false);
slSaturation.setValue(1-y,1-y,true);
}

<-------- Stop Copy Here -------->

Note of Importance ~ In reference to the above } (right curly bracket) character. Make sure when you copy the code to be pasted that character is included. In computer programming, curly brackets sometimes denote the beginning and ending of a sequence of statements. In this case, it is signifying the ending of a sequence. Without it the computer reading it will not understand and produce an error message.

And paste the above into a "Notepad" and save as a Text document and name it"color.js". If you have a Notepad replacement and not using the Microsoft® Notepad, this will not work. You Need To Save it with the Microsoft® Notepad. Reason being is quite simple. Not everyone is using the notepad replacement you are. And by uploading it in the replacement, not all systems will be able to read the external Javascript.If this is a little unclear on howto save as a .js file in a notepad, grab the below link and this should clarify it.
[ See Example Of Howto ]
Once you save as ( color.js ), you should see something that looks a lot like:

Now upload that file (color.js) into the directory where your effect will be located.

Step Five: Add the below section of code into the <HEAD> section of your document.
<script type="text/javascript" src="color.js"></script>

This is what will be calling the uploaded color.js external Javascript file.

Step Six: Now you need to insert a "body onload" event handler directly into the <BODY> tag of the document you have made for this effect. If you are unsure of howto, see the below example:

Default Body Tag

Reconfigured Body Tag With onload Event Handler Inserted

onload="init();"

Note of Importance ~ in reference to the above <BODY> tag. Besides inserting the onload event handler, replace the ?" with a 6 figure HEX code.

Step Seven: Once that is done, we are starting to wind down and are almost done (Whew). Now, on the document you have built for this effect, you need to:

T he above is what you will see from the script site. Just below that is the code that needs to be inserted into the <BODY> section of your document. Once that is done, the "Slider Control Color Chart" should be fully operational.

Note of Importance ~ The code that is pasted into the <BODY> section of the document is setup with absolute div positioning tags. In other words, if you plan on adding anything else into that page, you need to have a working knowledge of absolute positioning tags. If you would like to refresh your memory on this, grab the below link and you are there.
[ Absolute Positioning Tags ]

I f you still feel a little uncomfortable in adding scripts into an external Javascript file, we have made it a little easier. Just save* the two below .js scripts to your harddrive then upload them to the directory you will have this effect located.

* Right click on the below links and when the box appears, select "Save Target As...".
[ slider.js (8k) ] [ color.js (7k) ]

Once you do this, another box will appear [ Save As ] that will want you to "Save As" either "color" or "slider" (Depending on which link you are Saving Target As...)".

The .js will be inserted automatically because if you will notice it is being saved as a "JScript Script File".

Once you select where you want to save it to, then once saved it will look something [ Like This ]

After you have both .js files ("color" and "slider" ) saved to your harddrive, upload them into the same directory as the effect will be located.

T he next thing to be covered is if you are going to upload the two .js scripts into a different directory other than your "Top" directory where the effect will be located. To do this, you must reconfigure Step Three and Step Five to reflect the change in directory to where the external .js scripts will be called. We have our .js files in a directory we named "/jscripts"

Default <HEAD> Section Of Code

Reconfigured <HEAD> Section Of Code To Reflect Different Directory

B asically all we did was to add the name of the directory ( jscripts/ ) in front of the color.js and slider.js. Also take particular notice we Did Not Add the / in front of the new directory. If you do, it Will Not Work.. If this is slightly unclear see the below examples:

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

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

T he above name of the directory we used is just as an example. ( jscripts/ ). You can use any directory name or location you have setup or want it to be located.

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! and you will receive an error message. If this sounds confusing, see the below example:

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

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

Note of Importance ~ in reference to Step Two and Step Four ~ As silly as it may seem, we have had some feedback from a few people about copying and pasting the external Javascripts into a notepad and the script would not work correctly. We came to find out that the people who inquired why the script would not work copied and pasted from our examples and of course it would not work. Our examples are just that, partial examples and not the complete code. You need to either copy and paste those portions of code from the script site or download the .js scripts we prepared.

I f you would like a full tutorial on howto make and upload .js files, grab the below link and you are there.
[ Full Tutorial On Making And Uploading .js Scripts ]

I f you would like to add this effect into your pages, 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 ]