Color picker : Color Picker « Rico « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Rico » Color Picker 
Color picker
 
<!--
Apache License, Version 2.0

Revised from Rico 2.0  demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico-Popup Controls</title>

<script src="rico21/src/prototype.js" type="text/javascript"></script>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type='text/javascript'>
Rico.loadModule('Calendar','ColorPicker');
Rico.loadModule('Color');  // only required for ProcessColorSelection()
var cal1,cal2,cal3,cal1Box,cal2Box,cal3Box;
var colorpicker,colorBox

Rico.onLoadfunction() {

  // initialize calendar  (addHoliday calls are optional)
  cal1Box=$('CalendarValue1');
  cal1=new Rico.CalendarControl("cal1");
  cal1.addHoliday(25,12,0,'Christmas','#F55','white');
  cal1.addHoliday(1,1,0,'New Years','#2F2','white');
  cal1.atLoad();
  cal1.returnValue=function(newVal) { cal1Box.value=newVal; };
  SetDateFormat();

  // initialize calendar #2 (show week #)
  cal2Box=$('CalendarValue2');
  cal2=new Rico.CalendarControl("cal2"{showWeekNumber:1});
  cal2.atLoad();
  cal2.returnValue=function(newVal) { cal2Box.value=newVal; };

  // initialize calendar #3 (no "Today is")
  cal3Box=$('CalendarValue3');
  cal3=new Rico.CalendarControl("cal3"{showToday:0});
  cal3.atLoad();
  cal3.returnValue=function(newVal) { cal3Box.value=newVal; };

  // initialize color picker
  colorpicker=new Rico.ColorPicker("colorpicker1");
  colorpicker.atLoad();
  colorpicker.returnValue=ProcessColorSelection;
  colorBox=$('ColorValue');
});

function CalendarClick1(e) {
  if (Element.visible(cal1.container)) {
    cal1.close();
  else {
    RicoUtil.positionCtlOverIcon(cal1.container,$('CalendarButton1'));
    cal1.open(cal1Box.value);
    cal2.close();
    cal3.close();
    colorpicker.close();
  }
  Event.stop(e);
}

function SetDateFormat(e) {
  cal1Box.value='';
  cal1.setDateFmt($F('CalFormat'));
}

function CalendarClick2(e) {
  if (Element.visible(cal2.container)) {
    cal2.close();
  else {
    RicoUtil.positionCtlOverIcon(cal2.container,$('CalendarButton2'));
    cal1.close();
    cal3.close();
    cal2.open(cal2Box.value);
    colorpicker.close();
  }
  Event.stop(e);
}

function CalendarClick3(e) {
  if (Element.visible(cal3.container)) {
    cal3.close();
  else {
    RicoUtil.positionCtlOverIcon(cal3.container,$('CalendarButton3'));
    cal1.close();
    cal2.close();
    cal3.open(cal3Box.value);
    colorpicker.close();
  }
  Event.stop(e);
}

function ProcessColorSelection(newVal) {
  colorBox.value=newVal;
  // set text box background to the selected color
  colorBox.style.backgroundColor=newVal;
  colorBox.style.color= Prototype.Browser.WebKit ? 'black' : TextColor(newVal);
}

// choose black or white text - whichever gives the best contrast
function TextColor(hexval) {
  var objColor=Rico.Color.createFromHex(hexval);
  return (objColor.rgb.g > 160 || objColor.rgb.r+objColor.rgb.g+objColor.rgb.b > 480'black' : 'white';
}

function ColorClick(e) {
  if (Element.visible(colorpicker.container)) {
    colorpicker.close();
  else {
    RicoUtil.positionCtlOverIcon(colorpicker.container,$('ColorButton'));
    cal1.close();
    cal2.close();
    cal3.close();
    colorpicker.open();
  }
  Event.stop(e);
}

var PopupCnt=0;
function DisplayText(e,winFlag) {
  var txt=$('TextBox').value;
  if (!txt) {
    alert('Enter some text first!');
    return;
  }
  var options={
    hideOnClick: false,
    zIndex     : ++PopupCnt   // ensures shadows layer correctly
  };
  var popup=new Rico.Popup(options);
  popup.options.canDragFunc=true;
  if (winFlag) {
    popup.createWindow('Window #'+PopupCnt,txt,'10em','20em');
  else {
    popup.createPopup(document.body,txt,'10em','20em');
  }

  var color=colorBox.value || '#FFFFFF';         // get color picker value
  popup.contentDiv.style.backgroundColor=color;
  popup.contentDiv.style.color=TextColor(color);

  // pick a random location in the upper-left quadrant of the screen
  var x=Math.floor(Math.random()*RicoUtil.windowWidth()/2);
  var y=Math.floor(Math.random()*RicoUtil.windowHeight()/2);
  popup.openPopup(x,y);
  Event.stop(e);
}
</script>

<style>
body {font-family: Arial, Tahoma, Verdana;}
div.ricoPopup {
  background-color: white;
  border: 2px solid black;
  padding: 5px;
}
div.ricoWindow {
  border: 2px solid black;
}
.ricoTitle {
  padding: 3px;
  color: white;
  background-color: black;
}
#row1 span {
  font-size: 8pt;
}
#CalFormat {
  font-size: 8pt;
}
</style>
</head>

<body>

<h2>Popup Controls Example</h2>

<table border='1' cellspacing='0' cellpadding='7'>
<tr id='row1' valign='top'>
<td><button id='CalendarButton1' onclick='CalendarClick1(event)'>Calendar</button>
<br><select id='CalFormat' onchange='SetDateFormat(event)'>
<option>yyyy-mm-dd</option>
<option>dd-mm-yyyy</option>
<option>mm/dd/yyyy</option>
</select>
</td>
<td><button id='CalendarButton2' onclick='CalendarClick2(event)'>Calendar with<br>Week Number</button></td>
<td><button id='CalendarButton3' onclick='CalendarClick3(event)'>Calendar without<br>"Today is"</button></td>
<td><button id='ColorButton'    onclick='ColorClick(event)'>Color Picker</button></td>
</tr>
<tr>
<td><input type='text' id='CalendarValue1' size='10'></td>
<td><input type='text' id='CalendarValue2' size='10'></td>
<td><input type='text' id='CalendarValue3' size='10'></td>
<td><input type='text' id='ColorValue' size='8'></td>
</tr>
</table>

<p><table border='1' cellspacing='0' cellpadding='7' style='background-color:#DDD;'>
<tr><td>
<span style='font-size:small;'>
Type or paste some text into the box, then click the button.
<br>Open popups can be dragged around the page.
<br>Color picker result will be used for the background color.
<br>Type "Esc" to close the popups.
</span>
<br><textarea id='TextBox' rows='6' cols='70'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
<br><button id='TextButton' onclick='DisplayText(event,false)'>Display text as popup</button>
<button id='TextButton' onclick='DisplayText(event,true)'>Display text as window</button>
</td></tr>
</table>

</body>
</html>

   
  
Related examples in the same category
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.