ColorPicker, IE, Firefox, Opera, Safar_javascript

The color selector ColorPicker. For more information, see. From: color selector colorpicker
Http://jscolor.com/
Http://dematte.at/colorPicker/
Http://www.free-color-picker.com/color-picker-samples.php
Http://www.nogray.com/color_picker.php
Http://www.mattkruse.com/javascript/colorpicker/

ColorPicker2.js code

The Code is as follows:

// ================================================ ==================================
// Author: Matt Kruse
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, either cial or
// Private, without any further permission from the author. You may
// Remove this notice from your final code if you wish, however it is
// Appreciated by the author if at least my web site address is kept.
//
// You may NOT * re-distribute this code in any way within T through its
// Use. That means, you can include it in your product, or your web
// Site, or any other form where the code is actually being used. You
// May not put the plain javascript up on your site for download or
// Include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// To the URL instead.
// Please do not link directly to my. js files from your site. Copy
// The files to your server and use them there. Thank you.
// ================================================ ==================================

/* Source file: AnchorPosition. js */
Function getAnchorPosition (anchorname) {var useWindow = false; var coordinates = new Object (); var x = 0, y = 0; var use_gebi = false, use_css = false, use_layers = false; if (document. getElementById) {use_gebi = true;} else if (document. all) {use_css = true;} else if (document. layers) {use_layers = true;} if (use_gebi & document. all) {x = AnchorPosition_getPageOffsetLeft (document. all [anchorname]); y = AnchorPosition_getPageOffsetTop (document. all [anchorname]);} else if (use_gebi) {var o = document. getElementById (anchorname); x = AnchorPosition_getPageOffsetLeft (o); y = random (o);} else if (use_css) {x = AnchorPosition_getPageOffsetLeft (document. all [anchorname]); y = AnchorPosition_getPageOffsetTop (document. all [anchorname]);} else if (use_layers) {var found = 0; for (var I = 0; I Function getAnchorWindowPosition (anchorname) {var coordinates = getAnchorPosition (anchorname); var x = 0; var y = 0; if (document. getElementById) {if (isNaN (window. screenX) {x = coordinates. x-document.body.scrollLeft + window. screenLeft; y = coordinates. y-document.body.scrollTop + window. screenTop;} else {x = coordinates. x + window. screenX + (window. outerWidth-window.innerWidth)-window. pageXOffset; y = coordinates. y + window. screenY + (window. outerHeight-24-window.innerHeight)-window. pageYOffset ;}} else if (document. all) {x = coordinates. x-document.body.scrollLeft + window. screenLeft; y = coordinates. y-document.body.scrollTop + window. screenTop;} else if (document. layers) {x = coordinates. x + window. screenX + (window. outerWidth-window.innerWidth)-window. pageXOffset; y = coordinates. y + window. screenY + (window. outerHeight-24-window.innerHeight)-window. pageYOffset;} coordinates. x = x; coordinates. y = y; return coordinates ;}
Function AnchorPosition_getPageOffsetLeft (el) {var ol = el. offsetLeft; while (el = el. offsetParent )! = Null) {ol + = el. offsetLeft;} return ol ;}
Function AnchorPosition_getWindowOffsetLeft (el) {return AnchorPosition_getPageOffsetLeft (el)-document. body. scrollLeft ;}
Function AnchorPosition_getPageOffsetTop (el) {var ot = el. offsetTop; while (el = el. offsetParent )! = Null) {ot + = el. offsetTop;} return ot ;}
Function AnchorPosition_getWindowOffsetTop (el) {return AnchorPosition_getPageOffsetTop (el)-document. body. scrollTop ;}

/* Source file: PopupWindow. js */
Function PopupWindow_getXYPosition (anchorname) {var coordinates; if (this. type = "WINDOW") {coordinates = getAnchorWindowPosition (anchorname);} else {coordinates = getAnchorPosition (anchorname);} this. x = coordinates. x; this. y = coordinates. y ;}
Function PopupWindow_setSize (width, height) {this. width = width; this. height = height ;}
Function PopupWindow_populate (contents) {this. contents = contents; this. populated = false ;}
Function PopupWindow_setUrl (url) {this. url = url ;}
Function PopupWindow_setWindowProperties (props) {this. windowProperties = props ;}
Function PopupWindow_refresh () {if (this. pName! = Null) {if (this. use_gebi) {document. getElementById (this. pName ). innerHTML = this. contents;} else if (this. use_css) {document. all [this. pName]. innerHTML = this. contents;} else if (this. use_layers) {var d = document.layers?this.pname=0000d.document.open({d.document.writeln(this.contents=d.doc ument. close () ;}} else {if (this. popupWindow! = Null &&! This. popupWindow. closed) {if (this. url! = "" Specify ument. close () ;}this. popupWindow. focus ();}}}
Function PopupWindow_showPopup (anchorname) {this. getXYPosition (anchorname); this. x + = this. offsetX; this. y + = this. offsetY; if (! This. populated & (this. contents! = "") {This. populated = true; this. refresh ();} if (this. pName! = Null) {if (this. use_gebi) {document. getElementById (this. pName ). style. left = this. x + "px"; document. getElementById (this. pName ). style. top = this. y; document. getElementById (this. pName ). style. visibility = "visible";} else if (this. use_css) {document. all [this. pName]. style. left = this. x; document. all [this. pName]. style. top = this. y; document. all [this. pName]. style. visibility = "visible";} else if (this. use_layers ){ Document. layers [this. pName]. left = this. x; document. layers [this. pName]. top = this. y; document. layers [this. pName]. visibility = "visible" ;}} else {if (this. popupWindow = null | this. popupWindow. closed) {if (this. x <0) {this. x = 0;} if (this. y <0) {this. y = 0;} if (screen & screen. availHeight) {if (this. y + this. height)> screen. availHeight) {this. y = screen. availHeight-this. height ;}} if (screen & screen. availWidth ){ If (this. x + this. width)> screen. availWidth) {this. x = screen. availWidth-this. width ;}} var avoidAboutBlank = window. opera | (document. layers &&! Navigator. mimeTypes ['*']) | navigator. vendor = 'kde' | (document. childNodes &&! Document. all &&! Navigator. taintEnabled); this. popupWindow = window. open (avoidAboutBlank? "": "About: blank", "window _" + anchorname, this. windowProperties + ", width =" + this. width + ", height =" + this. height + ", screenX =" + this. x + ", left =" + this. x + ", screenY =" + this. y + ", top =" + this. y + "");} this. refresh ();}}
Function PopupWindow_hidePopup () {if (this. pName! = Null) {if (this. use_gebi) {document. getElementById (this. pName ). style. visibility = "hidden";} else if (this. use_css) {document. all [this. pName]. style. visibility = "hidden";} else if (this. use_layers) {document. layers [this. pName]. visibility = "hidden" ;}} else {if (this. popupWindow &&! This. popupWindow. closed) {this. popupWindow. close (); this. popupWindow = null ;}}}
Function PopupWindow_isClicked (e) {if (this. pName! = Null) {if (this. use_layers) {var clickX = e. pageX; var clickY = e. pageY; var t = document. layers [this. pName]; if (clickX> t. left) & (clickX <t. left + t. clip. width) & (clickY> t. top) & (clickY <t. top + t. clip. height) {return true;} else {return false;} else if (document. all) {var t = window. event. srcElement; while (t. parentElement! = Null) {if (t. id = this. pName) {return true;} t = t. parentElement;} return false;} else if (this. use_gebi & e) {var t = e. originalTarget; while (t. parentNode! = Null) {if (t. id = this. pName) {return true;} t = t. parentNode;} return false ;}
Function PopupWindow_hideIfNotClicked (e) {if (this. autoHideEnabled &&! This. isClicked (e) {this. hidePopup ();}}
Function PopupWindow_autoHide () {this. autoHideEnabled = true ;}
Function PopupWindow_hidePopupWindows (e) {for (var I = 0; I Function PopupWindow_attachListener () {if (document. layers) {document. captureEvents (Event. MOUSEUP);} window. popup1_woldeventlistener = document. onmouseup; if (window. popup1_woldeventlistener! = Null) {document. onmouseup = new Function ("window. popup1_woldeventlistener (); PopupWindow_hidePopupWindows ();");} else {document. onmouseup = PopupWindow_hidePopupWindows ;}}
Function PopupWindow () {if (! Window. popup1_windex) {window. popup1_windex = 0;} if (! Window. popupWindowObjects) {window. popupWindowObjects = new Array ();} if (! Window. listenerAttached) {window. listenerAttached = true; PopupWindow_attachListener ();} this. index = popup1_windex ++; popupWindowObjects [this. index] = this; this. pName = null; this. popupWindow = null; this. width = 0; this. height = 0; this. populated = false; this. visible = false; this. autoHideEnabled = false; this. contents = ""; this. url = ""; this. windowProperties = "toolbar = no, location = no, status = no, menubar = no, scrollbars = auto, resizable, alwaysRaised, dependent, titlebar = no"; if (arguments. length> 0) {this. type = "DIV"; this. pName = arguments [0];} else {this. type = "WINDOW";} this. use_gebi = false; this. use_css = false; this. use_layers = false; if (document. getElementById) {this. use_gebi = true;} else if (document. all) {this. use_css = true;} else if (document. layers) {this. use_layers = true;} else {this. type = "WINDOW";} this. offsetX = 0; this. offsetY = 0; this. getXYPosition = PopupWindow_getXYPosition; this. populate = PopupWindow_populate; this. setUrl = PopupWindow_setUrl; this. setWindowProperties = PopupWindow_setWindowProperties; this. refresh = PopupWindow_refresh; this. showPopup = PopupWindow_showPopup; this. hidePopup = PopupWindow_hidePopup; this. setSize = PopupWindow_setSize; this. isClicked = PopupWindow_isClicked; this. autoHide = PopupWindow_autoHide; this. hideIfNotClicked = PopupWindow_hideIfNotClicked ;}


/* Source file: ColorPicker2.js */

ColorPicker_targetInput = null;
Function ColorPicker_writeDiv () {document. writeln ("");}
Function ColorPicker_show (anchorname) {this. showPopup (anchorname );}
Function ColorPicker_pickColor (color, obj) {obj. hidePopup (); pickColor (color );}
Function pickColor (color) {if (ColorPicker_targetInput = null) {alert ("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickcolor' function to handle the picked color! "); Return;} ColorPicker_targetInput.value = color ;}
Function ColorPicker_select (inputobj, linkname) {if (inputobj. type! = "Text" & inputobj. type! = "Hidden" & inputobj. type! = "Textarea") {alert ("colorpicker. select: Input object passed is not a valid form input object "); window. colorPicker_targetInput = null; return;} window. colorPicker_targetInput = inputobj; this. show (linkname );}
Function ColorPicker_highlightColor (c) {var thedoc = (arguments. length> 1 )? Arguments [1]: invalid argument Doc ument; var d = thedoc. getElementById ("colorPickerSelectedColor"); d. style. backgroundColor = c; d = thedoc. getElementById ("colorPickerSelectedColorValue"); d. innerHTML = c ;}
Function ColorPicker () {var windowMode = false; if (arguments. length = 0) {var pname = "colorPickerDiv";} else if (arguments [0] = "window") {var pname = ''; windowMode = true ;} else {var pname = arguments [0];} if (pname! = "") {Var cp = new PopupWindow (pname);} else {var cp = new PopupWindow (); cp. setSize (225,250);} cp. currentValue = "# FFFFFF"; cp. writeDiv = ColorPicker_writeDiv; cp. highlightColor = ColorPicker_highlightColor; cp. show = ColorPicker_show; cp. select = ColorPicker_select; var colors = new Array ("#000000", "#000033", "#000066", "#000099", "# 0000CC", "# 0000FF ", "#330000", "#330033", "#330066", "#330099", "# 3300CC ",
"# 3300FF", "#660000", "#660033", "#660066", "#660099", "# 6600CC", "# 6600FF", "#990000 ", "#990033", "#990066", "#990099 ",
"# 9900CC", "# 9900FF", "# CC0000", "# CC0033", "# CC0066", "# CC0099", "# CC00CC", "# CC00FF ", "# FF0000", "# FF0033", "# FF0066 ",
"# FF0099", "# FF00CC", "# FF00FF", "#003300", "#003333", "#003366", "#003399", "# 0033CC ", "# 0033FF", "#333300", "#333333 ",
"#333366", "#333399", "# 3333CC", "# 3333FF", "#663300", "#663333", "#663366", "#663399 ", "# 6633CC", "# 6633FF", "#993300 ",
"#993333", "#993366", "#993399", "# 9933CC", "# 9933FF", "# CC3300", "# CC3333", "# CC3366 ", "# CC3399", "# CC33CC", "# CC33FF ",
"# FF3300", "# FF3333", "# FF3366", "# FF3399", "# FF33CC", "# FF33FF", "#006600", "#006633 ", "#006666", "#006699", "# 0066CC ",
"# 0066FF", "#336600", "#336633", "#336666", "#336699", "# 3366CC", "# 3366FF", "#666600 ", "#666633", "#666666", "#666699 ",
"# 6666CC", "# 6666FF", "#996600", "#996633", "#996666", "#996699", "# 9966CC", "# 9966FF ", "# CC6600", "# CC6633", "# CC6666 ",
"# CC6699", "# CC66CC", "# CC66FF", "# FF6600", "# FF6633", "# FF6666", "# FF6699", "# FF66CC ", "# FF66FF", "#009900", "#009933 ",
"#009966", "#009999", "# 0099CC", "# 0099FF", "#339900", "#339933", "#339966", "#339999 ", & quot; # 3399CC & quot;, & quot; # 3399FF & quot;, & quot; #669900 & quot ",
"#669933", "#669966", "#669999", "# 6699CC", "# 6699FF", "#999900", "#999933", "#999966 ", "#999999", "# 9999CC", "# 9999FF ",
"# CC9900", "# CC9933", "# CC9966", "# CC9999", "# CC99CC", "# CC99FF", "# FF9900", "# FF9933 ", "# FF9966", "# FF9999", "# FF99CC ",
"# FF99FF", "#00CC00", "#00CC33", "#00CC66", "#00CC99", "#00 CCCC", "#00 CCFF ", "#33CC00", "#33CC33", "#33CC66", "#33CC99 ",
"#33 CCCC", "#33 CCFF", "#66CC00", "#66CC33", "#66CC66", "#66CC99", "#66 CCCC ", "#66 CCFF", "#99CC00", "#99CC33", "#99CC66 ",
"#99CC99", "#99 CCCC", "#99 CCFF", "# CCCC00", "# CCCC33", "# CCCC66", "# CCCC99 ", "# CCCCCC", "# CCCCFF", "# FFCC00", "# FFCC33 ",
"# FFCC66", "# FFCC99", "# FFCCCC", "# FFCCFF", "#00FF00", "#00FF33", "#00FF66", "#00FF99 ", "#00 FFCC", "#00 FFFF", "#33FF00 ",
"#33FF33", "#33FF66", "#33FF99", "#33 FFCC", "#33 FFFF", "#66FF00", "#66FF33 ", "#66FF66", "#66FF99", "#66 FFCC", "#66 FFFF ",
"#99FF00", "#99FF33", "#99FF66", "#99FF99", "#99 FFCC", "#99 FFFF", "# CCFF00 ", "# CCFF33", "# CCFF66", "# CCFF99", "# CCFFCC ",
"# CCFFFF", "# FFFF00", "# FFFF33", "# FFFF66", "# FFFF99", "# FFFFCC", "# FFFFFF "); var total = colors. length; var width = 18; var cp_contents = ""; var windowRef = (windowMode )? "Window. opener.": ""; if (windowMode) {cp_contents + =" Select Color"; Cp_contents + ="

";} Cp_contents + =" '; If (I + 1)> = total) | (I + 1) % width) = 0) {cp_contents + ="";}} If (document. getElementById) {var width1 = Math. floor (width/2); var width1 = width = width1; cp_contents + =" "; Var use_highlight = (document. getElementById | document. all )? True: false; for (var I = 0; I ";} Cp_contents + ="

# FFFFFF

"; If (windowMode) {cp_contents + =" ";}Cp. populate (cp_contents +" \ n "); cp. offsetY = 25; cp. autoHide (); return cp ;}

The Code is as follows:

Color Picker, Internet Explorer, Firefox, Opera, Safar, Ace Explorer, Avant Browser, Flock, Google Chrome, Konqueror, Netscape, SeaMonkey