ColorLine

About

ColorLine is an interactive widget that extends the jQuery UI library. It provides a set of six custom colors for a user to pick from, and the developer can then use that data to alter CSS elements on the current page. Below are instructions on how to set up and configure the widget to use on your own website.

Set Up

ColorLine is dependent on the jQuery core library, as well as two jQuery UI libraries, Core and Widget. If you prefer to link to hosted javascript libraries, all three can be found on Google Dev. Finally, the code for ColorLine can be found here. All of these files should be included in your page header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="/apps/colorline/jquery.ui.colorline.js"></script>

This widget consists of six customizable colors, which the developer can set themselves or use the default colors provided. The default colors are as follows:

• Dark Blue (Hex: #003366)
• Orange (Hex: #FCB43E)
• Magenta (Hex: #B51659)
• Slate Gray (Hex: #778899)
• Sea Green (Hex: #2E8B57)
• Dark Red (Hex: #8B0000)

The default constructor can be used for the colors above, however, all of the options available in the widget can initialized to custom values. To instantiate a widget, first create a <div> with a unique ID to attach the widget to. Then, use jQuery to call the constructor:

//Default Constructor
$('#divID').colorline();
//Or pass parameters using an array
$('#divID').colorline({
'color1':'#000',
'color2':'#222',
'color3':'#444',
'color4':'#666',
'color5':'#AAA',
'color6':'#FFF',
'selected':1
});

The seven configurable options are color1-color6 (corresponds to the six colors displayed on the widget, from left to right) as well as a selected option, which indicates the color currently selected. The selector is the gray square that borders the currently active color. Valid values for selected are the integers 1-6 (1 being the leftmost color), or a HEX color value that is present in your widget. Passing a HEX value that is not available will throw an error. The default value for selected is 1. All or a partial set of values can be passed into the constructor (values not passed will take on their defaults).

After calling colorline() on your div, the widget should appear on the page. Next, you'll need to use the widget's return values to configure CSS elements on your page.

Configuration

ColorLine has two public methods, getSelected() and setSelected(input). The getter will return the current HEX value of the selected color. The setter takes a positional integer (1 through 6) or a HEX color value that is present in your widget. It will move the selector over the specified position or color. By getting the currently selected color, the developer can use this value to dynamically edit CSS properties on the page with jQuery. Some examples of CSS color elements are: color, background-color, and border-color. As an example, we can create a ColorLine instance below and adjust the background-color of a <div>.

<div class="row">
	<div class="col-md-offset-1 col-md-3">
		<div id="sample"></div>
		<script>
			jQ('#sample').colorline();
		//Click Handler
		jQ("#sample").click(function(){
			var select = jQ('#sample').colorline('getSelected');
			jQ('#change').css('background-color',select);
			
			if(select == "#003366" || select == "#8B0000" || select == "#2E8B57")
			{
				jQ('#change').css('color','white');
			}
			else
			{
				jQ('#change').css('color','black');
			}
		});
	&lt;/script&gt;
&lt;/div&gt;
&lt;div class="col-md-2"&gt;
	&lt;div id="change" style="text-align:center"&gt;&lt;strong&gt;DIV&lt;/strong&gt;&lt;/div&gt;
&lt;/div&gt;

</div>

Below is the code used to create the example above. There are two <div> elements, #sample (which contains the ColorLine) and #change (which is our target <div>). The text color of the target <div> is also changed, based on the background color.

//Create the widget
$('#sample').colorline();
//Add a click handler
$("#sample").click(function(){
var select = $('#sample').colorline('getSelected');
$('#change').css('background-color',select);
if(select == "#003366" || select == "#8B0000" || select == "#2E8B57")
{
	$('#change').css('color','white');
}
else
{
	$('#change').css('color','black');
}

});

We can do even more customization with additional javscript code, such as using cookies to save a user's color selection. Javascript cookies are a useful way to save information to be used in future sessions. Quirksmode.org has a great set of simple functions to Create, Read, and Erase cookies. In your click function, you can create a cookie that saves the selected color to be loaded when the page loads.

//Get selected
var select = $('#sample').colorline('getSelected');
//Set cookie
if(readCookie("color_cookie") == null)
{
createCookie("color_cookie",select,365);
}
else
{
eraseCookie("color_cookie");
createCookie("color_cookie",select,365);
}

Error List

• Error 101: 'selected' option not properly set in constructor - This is caused by passing an invalid value for the selected parameter in the constructor. Valid values are integers 1-6 or a HEX color code available in your widget instance.
• Error 102: Invalid 'selected' option - Similar to Error 101, the selected option is currently invalid. Check your constructor and calls to setSelector() for invalid values.
• Error 103: Could not set selector icon - An invalid value was passed to the setSelector() method. Valid values are integers 1-6 or a HEX color code available in your widget instance.
• Error 104: Invalid color - The color code passed as the selected parameter in either the constructor or the setSelector() method does not exist in your current widget instance.
• The selector icon is not aligned with the color squares - This is usually caused by inherited CSS values. If your container <div> inherited a padding or margin value, try setting it to '0'. Also, if your <div> inherits a line-height of '20px' or greater, there will be a gap present in the gray selector icon.
• A blinking cursor appears when I click a square - This is a result of 'Caret Browsing', which is enabled on Mozilla Firefox and some older versions of Internet Explorer. It is a browser related functionality and must be disabled on the client side.
• There is a broken image hovering over the ColorLine - Please include this image with relative filepath '~/img/select_frame.png'.

---