|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
This is a color picker in Javascript. It allows the user to select a color from a palette of 70 predefined colors. The selected color can be assigned to HTML element properties.
See palette-example.html for a working example of the code. The example shows how to set the background and font color of a page dynamically using the Color Picker.
palette.js
| <!--
var palette, color = '';
function setColor(c){
eval(color+'="'+c+'"');
}
function showPalette(el, prop){
color = prop;
palette.style.left = getObjX(el) + 57;
palette.style.top = getObjY(el);
palette.style.visibility = 'visible';
}
function getObj(name) {
return (document.getElementById && document.getElementById(name))||document[name]||(document.all && document.all[name]);
}
function getObjX(el){
var left = 0;
if(el.offsetParent){
while(1){
left += el.offsetLeft;
if(!el.offsetParent)break;
el = el.offsetParent;
}
}else if(el.x)left += el.x;
return left;
}
function getObjY(el){
var top = 0;
if(el.offsetParent){
while(1){
top += el.offsetTop;
if(!el.offsetParent)break;
el = el.offsetParent;
}
}else if(el.y)top += el.y;
return top;
}
function init(){
palette = getObj('palette');
}
--> | |
palette.html
| <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Colour Picker</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="MSSmarttagsPreventParsing" content="TRUE" />
<meta name="robots" content="index,follow" />
<script type="text/JavaScript">
<!--
var colours = new Array("#FFFFFF", "#FFCCCC", "#FFCC99", "#FFFF99", "#FFFFCC", "#99FF99", "#99FFFF", "#CCFFFF", "#CCCCFF", "#FFCCFF", "#CCCCCC", "#FF6666", "#FF9966", "#FFFF66", "#FFFF33", "#66FF99", "#33FFFF", "#66FFFF", "#9999FF", "#FF99FF", "#C0C0C0", "#FF0000", "#FF9900", "#FFCC66", "#FFFF00", "#33FF33", "#66CCCC", "#33CCFF", "#6666CC", "#CC66CC", "#999999", "#CC0000", "#FF6600", "#FFCC33", "#FFCC00", "#33CC00", "#00CCCC", "#3366FF", "#6633FF", "#CC33CC", "#666666", "#990000", "#CC6600", "#CC9933", "#999900", "#009900", "#339999", "#3333FF", "#6600CC", "#993399", "#333333", "#660000", "#993300", "#996633", "#666600", "#006600", "#336666", "#000099", "#333399", "#663366", "#000000", "#330000", "#663300", "#663333", "#333300", "#003300", "#003333", "#000066", "#330099", "#330033");
var divPreview;
function mouseOver(el, Colour){
divPreview.style.background = Colour;
document.frmColour.ColorHex.value = Colour;
el.style.borderColor = '#FFFFFF';
}
function mouseOut(el){
el.style.borderColor = '#666666';
}
function mouseDown(Colour){
self.parent.setColor(Colour);
self.parent.palette.style.visibility = 'hidden';
}
function init(){
divPreview = Obj("divPreview");
}
function Obj(name) {
return document[name]||(document.all && document.all[name])||(document.getElementById && document.getElementById(name));
}
//-->
</script>
<style type="text/css">
td{text-align:center;vertical-align:middle;}
.tblPalette{cursor:pointer;background:#FFFFFF;width:100%;height:100%;line-height:1px;font-size:1px;}
.tblPalette td{border:1px #666666 solid;}
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="init();" onContextMenu="return false" onDragStart="return false" onSelectStart="return false" style="margin:0px;padding:0px;">
<table border=0 cellspacing=0 cellpadding=0 width="100%" height="100%">
<tr><td valign="middle" style="width:55px;height:25px;background:#FFFFFF;">
<center><div name="divPreview" id="divPreview" style="height:20px;width:50px;border:1px #000000 solid;"></div></center></td>
<td bgcolor="#FFFFFF" valign="middle" style=""><form name="frmColour" style="padding:0px;margin:0px;">
<input readonly type="text" name="ColorHex" value="" size=10 style="width:80px;font-size: 12px"></form></td>
<td bgcolor="#FFFFFF"><img src="close.gif" onclick=" self.parent.palette.style.visibility = 'hidden';" width="13" height="13" border="0" alt="Close" title='Close Palette'></td>
</tr>
<tr><td style="width:100%" colspan="3">
<script type="text/JavaScript">
<!--
code = "<table class='tblPalette' cellpadding='0' cellspacing='1' border='0'>";
for (i = 0;i < 70; i++){
if((i)%10 == 0)code += "<tr>";
code += "<td id='el_"+i+"' bgcolor="+colours[i]+" onMouseOver=\"mouseOver(this, '"+colours[i]+"');\" onMouseOut='mouseOut(this)' onClick=\"mouseDown('"+colours[i]+"');\"> </td>\n";
if((i+1)%10 == 0)code += "</tr>\n";
}
document.write(code+"</table>");
//-->
</script>
</td></tr>
</table>
</body>
</html> | |
Usage Example
| <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Color Picker - Example</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="MSSmarttagsPreventParsing" content="TRUE" />
<meta name="robots" content="index,follow" />
<style type="text/css">
body{font:bold 12px Verdana, Arial, sans-serif;}
</style>
<script type="text/javascript" src="palette.js"></script>
</head>
<body onload="init()">
<!-- This iframe is our color palette-->
<iframe width="150" height="115" name="palette" id="palette" src="palette.html" marginwidth="0" marginheight="0" scrolling="no" style="position:absolute;visibility:hidden;"></iframe>
<br>
<table style="width:100%;height:100%;">
<tr>
<td><center><table>
<tr><td><a href="javascript:void(0)" id='bgColorPreview' onclick="showPalette(this,'document.body.style.backgroundColor')" style="display:block;width:55px;height:30px;padding:0px;margin:0px;background:#FFFFFF;border:1px #333333 solid;"><img src="spacer.gif" width="55" height="30" border="0" alt=""></a></td><td>Set Background Color</td></tr>
<tr><td><a href="javascript:void(0)" id='bgColorPreview' onclick="showPalette(this,'document.body.style.color')" style="display:block;width:55px;height:30px;padding:0px;margin:0px;background:#FFFFFF;border:1px #333333 solid;"><img src="spacer.gif" width="55" height="30" border="0" alt=""></a></td><td>Set Font Color</td></tr>
<tr><td colspan="2"><p> </p>
<center><b>This is an example showing the usage of the color palette</b><br>Click on the box above to set the color. </center>
<p> </p></td></tr>
</table></center></td>
</tr>
</table>
<br><br>
</body>
</html> | |
|
|
| Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password.
improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Cool tool tip
Categories : Java Script, HTML, Web Design | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Javascript linked dropdowns
Categories : Java Script, HTML, Classes and Objects | | | Mordern Peroidic Table - Science
Categories : Java Script, HTML, Charts and Graphs | |
|
|
|
