SweetVision Javascript and other web programming topics

Complete JavaScript Color Picker

Welcome to the final installation of my JavaScript based Color Picker series. I have made a lot of changes to the color picker since my last installment.

Layout
I found some major problems based on the document type with the way I was laying out elements in the color picker dialog, so I decided that it needed to use the lowest common denominator in order to work reliably, so it is laid out with, *gasp* tables.

1
2
3
4
5
6
7
8
9
10
    if(this.Options.hueBarWidth){

        this.HueBar.setStyle("width", this.Options.hueBarWidth);

    }else{

        this.HueBar.setStyle("width", "30");

    }

    if(this.Options.hueBarHeight){

        this.HueBar.setStyle("height", this.Options.hueBarHeight);

    }else{

        this.HueBar.setStyle("height", "360");

    }

Options
I added the ability to pass in an Options object that gives the ability to customize many parts of the Color Picker.

1
2
3
4
    this.Options = {};

    if(objOptions){

        this.Options = objOptions;

    }

Open/Close
I created Open and Close member functions on the color picker object its self.

1
2
3
4
5
6
    open: function (){

        this.Container.setStyle("display", "block");

    },

    close: function (){

        this.Container.setStyle("display", "none");

    }

You can download the full source from the JavaScript Color Picker project page.