ColorPicker, IE, Firefox, Opera, Safar_javascript

Source: Internet
Author: User
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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.