Menu Example - Color Tool

SlidingMenu example : Color Tool

Menu Examples home

R	G	B

Click on the Rainbow, to copy the color code to your clipboard.

RGB Full Gamut

Compelling as it is this SlidingMenu is itself rather simple (though the content is not, see the JS tab), just a couple of SlidingMenu Groups wrapping the HTML markup of the different color tools.

Here I show only how to make the Named Web Colors Group as there is too much HTML to show it all here. However, click the Clipboard button to copy all the XML/HTML markup necessary for this example to your clipboard and then paste it anywhere between the <FORM></FORM> tags in your .aspx-file.

SlidingMenu markup is blue, Comments are green.

0.	<wm:SlidingMenu id="smColorTool" runat="server">
1.		<SlidingMenuStyle Width="704" Height="425" SlideDelay="0" BorderWidth="2" BorderColor="snow" />
2.		<GroupHeaderStyle Height="23" BorderWidth="0" BackgroundColor="snow" />
3.		<GroupCanvasStyle BackgroundColor="Snow" />
4.		...
5.		<AddManualGroup>
6.			<GroupCanvasStyle BackgroundColor="red" ScrollbarArrowColor="snow" ScrollbarFaceColor="red" ScrollbarTrackColor="snow" ScrollbarHighlightColor="snow" Scrollbar3dlightColor="snow" ScrollbarDarkshadowColor="snow" ScrollbarShadowColor="snow" />
7.			<GroupHeader>
8.				<table width="700" cellpadding="0" border="0" cellspacing="0">
9.					<tr>
10.						<td width="120"><img src="/images/color3header2_23.gif"></td>
11.						<td width="460" align="center">
12.							<table width="400" class="color_tool_header_inner_table" border="0" cellpadding="0" cellspacing="0">
13.								<tr bgcolor="red">
14.									<td align="center"><span class="color_tool_header" style="color:snow">Named Web Colors</span></td>
15.								</tr>
16.							</table>
17.						</td>
18.						<td><img src="/images/pixel_transparent.gif" width="50" height="1"></td>
19.						<td><img src="/images/slidingmenu/example_ColorTool/ex_color_belt_2.gif"></td>
20.						<td><img src="/images/pixel_transparent.gif" width="47" height="1"></td>
21.					</tr>
22.				</table>
23.			</GroupHeader>
24.			<GroupCanvas>
25.				<table width="100%" border="0" cellpadding="0" cellspacing="0">
26.					<tr>
27.						<td align="center">
28.							<table border="0" cellpadding="0" cellspacing="0">
29.								<tr>
30.									<td><font id="tip_namedWebColor1"></font> <span class="color_tool_bread" style="color:snow;font-weight:bold">Click
31.										on a color to copy the color name to your clipboard.</span></td>
32.								</tr>
33.							</table>
34.						</td>
35.					</tr>
36.					<tr>
37.						<td><div id="namedColorTable" align="center"></div>
38.						</td>
39.					</tr>
40.				</table>
41.			</GroupCanvas>
42.		</AddManualGroup>
43.		...
44.	</wm:SlidingMenu>

While there is no JavaScript involved in the SlidingMenu itself, JavaScript is what making all the color tools inside the SlidingMenu working. There is far too much JavaScript to show it all here, therefore I show only the JavaScript necessary to make the Named Web Colors Tool. However if you click the clipboard button, all the JavaScript for the whole example will be copied to your clipboard, just paste it anywhere in your .aspx-file (remember to wrap it inside <script type="text/javascript"></script> tags). Though for the last color tool (RGB Full Gamut) there are some extra considerations there to place some of the JavaScript code to make the handle-dragging work, these requirements are explained in comments in the code copied to the clipboard.

Comments are green.

0.	//rainbowTipArray is holding some colors to color up
1.	var rainbowTipArray1 = new Array("339933", "3333FF", "FF9900", "FF0000");
2.
3.	//TextToRainbowText takes each letter in a text and style it with a color from the supplied array of colors
4.	function TextToRainbowText(strSource, arrayToUse){
5.		var strResult = "";
6.		var i = -1;
7.		for (var c = 0; c < strSource.length; c++){
8.			i++;
9.			if (i >= arrayToUse.length){
10.				i = 0;
11.			}
12.			var chr = strSource.substring(c, c+1)
13.			strResult += '<span style="color:#' + arrayToUse[i] + '">' + chr + '</span>';
14.		}
15.		return strResult;
16.	}
17.
18.	//TextsToRainbowInitialize among other things collects all font objects which has an Id starting with "tip_", set in the text Tip: and color format it using the above TextToRainbowText function
19.	function TextsToRainbowInitialize(){
20.		var textMoreThanMillionColors = document.getElementById("moreThanMillionColors");
21.		var textMoreChanged = textMoreThanMillionColors.innerText;
22.		textMoreChanged = TextToRainbowText(textMoreChanged, rainbowArray1);
23.		textMoreThanMillionColors.innerHTML = textMoreChanged;
24.
25.		var tips = new Array();
26.		var groupHeaders = new Array();
27.		var allFont = document.getElementsByTagName("FONT");
28.		for (var f = 0; f < allFont.length; f++){
29.			if (allFont[f].id.indexOf("tip_") == 0){
30.				tips[tips.length] = allFont[f];
31.			}
32.			else if (allFont[f].id.indexOf("gh_") == 0){
33.				groupHeaders[groupHeaders.length] = allFont[f];
34.			}
35.		}
36.
37.		for (var t = 0; t < tips.length; t++){
38.			tips[t].innerHTML = TextToRainbowText("Tip:", rainbowTipArray1);
39.		}
40.		for (var gh = 0; gh < groupHeaders.length; gh++){
41.			var innerText = groupHeaders[gh].innerText;
42.			groupHeaders[gh].innerHTML = TextToRainbowText(innerText, rainbowArray3);
43.		}
44.	}
45.
46.	//This array of colors I found somewhere long forgotten already
47.	var color = new Array();
48.	function FillColor(){
49.		color[0]="aliceblue"; color[1]="antiquewhite"; color[2]="aqua"; color[3]="aquamarine";
50.		color[4]="azure"; color[5]="beige"; color[6]="bisque"; color[7]="black";
51.		color[8]="blanchedalmond"; color[9]="blue"; color[10]="blueviolet"; color[11]="brown";
52.		color[12]="burlywood"; color[13]="cadetblue"; color[14]="chartreuse"; color[15]="chocolate";
53.		color[16]="coral"; color[17]="cornflowerblue"; color[18]="cornsilk"; color[19]="crimson";
54.		color[20]="cyan"; color[21]="darkblue"; color[22]="darkcyan"; color[23]="darkgoldenrod";
55.		color[24]="darkgray"; color[25]="darkgreen"; color[26]="darkkhaki"; color[27]="darkmagenta";
56.		color[28]="darkolivegreen"; color[29]="darkorange"; color[30]="darkorchid"; color[31]="darkred";
57.		color[32]="darksalmon"; color[33]="darkseagreen"; color[34]="darkslateblue"; color[35]="darkslategray";
58.		color[36]="darkturquoise"; color[37]="darkviolet"; color[38]="deeppink"; color[39]="deepskyblue";
59.		color[40]="dimgray"; color[41]="dodgerblue"; color[42]="firebrick"; color[43]="floralwhite";
60.		color[44]="forestgreen"; color[45]="fuchsia"; color[46]="gainsboro"; color[47]="ghostwhite";
61.		color[48]="gold"; color[49]="goldenrod"; color[50]="gray"; color[51]="green";
62.		color[52]="greenyellow"; color[53]="honeydew"; color[54]="hotpink"; color[55]="indianred";
63.		color[56]="indigo"; color[57]="ivory"; color[58]="khaki"; color[59]="lavender";
64.		color[60]="lavenderblush"; color[61]="lawngreen"; color[62]="lemonchiffon"; color[63]="lightblue";
65.		color[64]="lightcoral"; color[65]="lightcoral"; color[66]="lightcyan"; color[67]="lightgoldenrodyellow";
66.		color[68]="lightgreen"; color[69]="lightgrey"; color[70]="lightpink"; color[71]="lightsalmon";
67.		color[72]="lightseagreen"; color[73]="lightskyblue"; color[74]="lightslategray"; color[75]="lightsteelblue";
68.		color[76]="lightyellow"; color[77]="limegreen"; color[78]="linen"; color[79]="magenta";
69.		color[80]="maroon"; color[81]="mediumaquamarine";color[82]="mediumblue"; color[83]="mediumorchid";
70.		color[84]="mediumpurple"; color[85]="mediumseagreen"; color[86]="mediumslateblue"; color[87]="mediumspringgreen";
71.		color[88]="mediumturquoise"; color[89]="mediumvioletred"; color[90]="midnightblue"; color[91]="mintcream";
72.		color[92]="mistyrose"; color[93]="moccasin"; color[94]="navajowhite"; color[95]="navy";
73.		color[96]="oldlace"; color[97]="olive"; color[98]="olivedrab"; color[99]="orange";
74.		color[100]="orangered"; color[101]="orchid"; color[102]="palegoldenrod"; color[103]="palegreen";
75.		color[104]="paleturquoise"; color[105]="palevioletred"; color[106]="papayawhip"; color[107]="peachpuff";
76.		color[108]="peru"; color[109]="pink"; color[110]="plum"; color[111]="powderblue";
77.		color[112]="purple"; color[113]="red"; color[114]="rosybrown"; color[115]="royalblue";
78.		color[116]="saddlebrown"; color[117]="salmon"; color[118]="sandybrown"; color[119]="seagreen";
79.		color[120]="seashell"; color[121]="sienna"; color[122]="silver"; color[123]="skyblue";
80.		color[124]="slateblue"; color[125]="slategray"; color[126]="snow"; color[127]="springgreen";
81.		color[128]="steelblue"; color[129]="tan"; color[130]="teal"; color[131]="thistle";
82.		color[132]="tomato"; color[133]="turquoise"; color[134]="violet"; color[135]="wheat";
83.		color[136]="white"; color[137]="whitesmoke"; color[138]="yellow"; color[139]="yellowgreen";
84.		color[140]="lime";
85.	}
86.
87.	//DrawNamedColors() just make a table structure to layout the colors in the color Array
88.	function DrawNamedColors(){
89.		columns = 5;
90.		cellWidth = 122;
91.		cellHeight = 30;
92.		if (color.length == 0){FillColor();}
93.		var theNamedColorTable = document.getElementById("namedColorTable");
94.		var str = "";
95.
96.		for (var c = 0; c < color.length; c++){
97.			if (c == 0){
98.				str = str + '<table border="0" class="color_tool_named_color"><tr>';
99.			}
100.			else if ( c % columns == 0){
101.				str = str + '</tr><tr>';
102.			}
103.			str += '<td width="' + cellWidth + '" height="' + cellHeight + '" bgcolor="' + color[c] + '" onclick="ColorToClipboard(\'' + color[c] + '\')">' + color[c] + '</td>';
104.
105.		}
106.		str = str + "</tr></table>";
107.		theNamedColorTable.innerHTML = str;
108.	}
109.
110.	//ColorToClipboard place the colorCode in your clipboard stripping an eventual hash
111.	function ColorToClipboard(colorCode){
112.		if (colorCode.indexOf("#") == 0){
113.			colorCode = colorCode.substring(1, 7);
114.		}
115.		window.clipboardData.setData("Text", colorCode);
116.	}