YUI Color Picker Script, Scrips, Java, DHTML, Express
Contact
 


Quick search

 



Scripts - DHTML

Scripts - DHTML (new)

Web Developer Blog

Web Developer Blog (new)

Scripts and Applications

Ajax
ASP
ASP.NET
C and C++
CFML
CGI and Perl
Flash
Java
JavaScript
PHP
Python
XML

Software Downloads

Linux

Windows

Mac

Mobile

Drivers

DHTML Scripts - Detail

 

YUI Color Picker

Date added: 2007-05-18 03:04:51
FF1+ IE5+ Opr8+

YUI Color Picker

Description: Need a color picker for your online forms or application? This advanced color picker is based on Yahoo's excellent UI library, more specifically, the slider widget. We've added additional code to help integrate the color picker with forms on your page, so clicking on specific form fields causes the selected color value to be populated inside them in real time. Furthermore, a color box is shown alongside the field to display the current input color in real time.

One known issue with this script is in Opera 8.x, where dragging of the color picker and selection ball is non functional. FYI this is the same color picker we're using in our Button Maker tool. Enjoy!

Demo:

 


R H
G S
B V

#
 

Click on a form field below to populate it:

# ____
# ____


Directions:

Simply download YUI-Color-Picker.html/yuicolorpicker.zip, and open up "YUI-Color-Picker.html/demo.htm" using any text editor for the code to insert onto your page.

Customization

While this script references multiple .js files, to integrate the color picker with your form in the fashion above, you do not need to be bothered with modifying any of these files. Instead, there are only two changes you need to make to the code of "YUI-Color-Picker.html/demo.htm" to integrate the color picker into your page:

1) Locate the code:

ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"

These two lines are used to prefill the color boxes to the right of the form fields in question with the color currently inside the field when the page first loads. Without this code, when your page loads, the color boxes will not be initially filled with the color values inside the form fields.

There are two fields in the demo, hence two lines. The first parameter of fillcolorbox(), "colorfield1", should be the ID of the form field, while the second parameter, the ID of the matching color box. See below for more information.

2) Locate the code:

<form>
# <input type="text" id="colorfield1" onFocus="ddcolorposter.echocolor(this, 'colorbox1')"> <span id="colorbox1" class="colorbox">____</span> <br />
# <input type="text" id="colorfield2" onFocus="ddcolorposter.echocolor(this, 'colorbox2')"> <span id="colorbox2" class="colorbox">____</span>
</form>

This code demonstrates how to integrate the color picker with any form field on your page. The key is the add the code:

onFocus="ddcolorposter.echocolor(this, 'colorbox1')"

inside the desired form fields, where "colorbox1" is the ID of color box. That's it!

 

Leave a comment




(optional)

What is 7-3?




0 comments


 

Related DHTML Scripts

ColorJack DHTML color picker
Date Added: 2007-05-18
-User Submitted ColorJack DHTML color picker is a cross browser, sleek color picker that's compact to boot. Licensed under Creative Commons, use it on your sites or web apps....
pathGenerator
Date Added: 2007-06-16
-User Submitted _pathGenerator is an online wizard that allows anyone to easily create an animating layer that follows any desired path. Just drag your mouse to map out its course,...
VML Editor
Date Added: 2007-06-16
-User Submitted VML (Vector Markup Language) is a text based vector graphics format proprietary to Internet Explorer. Jacco has created the following powerful VML editor to allow you to use your...
Time-based Progress Bar
Date Added: 2007-06-16
-User Submitted This is a fully customizable "time based" progress bar. Set any duration (ie: 10 seconds) for the script to finish loading the bar. A great script to prov...
Event-based Progress Bar
Date Added: 2007-06-16
-User Submitted This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control prec...
WinXP Progress Bar
Date Added: 2007-06-16
-User Submitted A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can ...
Pie Graph script
Date Added: 2007-06-16
-User Submitted This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page....
Line Graph script
Date Added: 2007-06-16
-User Submitted Based on the same library as the Pie Graph script, this is a purely DHTML/ CSS based Line Graph script. It loads fast and blends in with the rest of the page....
Find In Page Script
Date Added: 2007-06-16
-User Submitted This cross browser DHTML script simulates the Edit> Find In Page feature of the browser to allow your visitors to easily search for a particular text on your page.&nb...
Tip of the day dialog
Date Added: 2007-06-16
-User Submitted Provide daily tidbits of interesting information to your visitors, in an even more interesting way, with this ultimate tip of the day script!...
Copy text to clipboard script
Date Added: 2007-06-16
-User Submitted This "demo" script does two things: 1) identifies the selected text on the page 2) copies this text to clipboard. As part of a larger application...
onMouseover scrollbar effect
Date Added: 2007-06-16
-User Submitted Use this unique script to apply a rollover effect to your webpage's scrollbar!...
Ajax load XML file script
Date Added: 2007-06-16
-User Submitted This script demonstrates the concept of using Ajax to load a simple XML file and display it on the page....
Gradient Bar
Date Added: 2007-06-16
-User Submitted An impressive demonstration of using DHTML code to render a gradient bar. Easily change the bar's color, position and direction, all through the setting of a few variabl...
Phong
Date Added: 2007-06-16
-User submitted Phong is an incredible ping-pong game with an even more impressive AI (artificial intelligence). Play against the computer, and see if you can win (take it for us, it's pos...

Last 20 Scripts

 
1. JamUba AJAX Stock Script
JamUba AJAX Stock Script allows the user to embed a flexible
2. YouTube Video Script
YouTube Video Script runs on YouTube API and fetches million
3. Smooth Navigational Menu
Smooth Navigational Menu is a multi level, CSS list based me
4. JamUba ftpsync Script
JamUba ftpsync Script is a Perl utility to synchronize the h
5. Easy 2Checkout Integrator
Easy 2Checkout Integrator script provides a simple and easy
6. Wussa
Wussa is a script suitable for webmasters planning to create
7. WPJobAds
WPJobAds is a WordPress job board plugin that lets you sell
8. Wallpaper Website Creator
Wallpaper Website Creator is a PHP based script that helps y
9. Flex2 Advanced ColorPicker
Flex2 Advanced ColorPicker is a color picker component for F
10. Tree CheckBox
Tree CheckBox is a Flex3 component resulted from the customi
11. ResizeTool
ResizeTool is a simple and easy to use resize tool to be imp
12. Flickr Cube Viewer
Flickr Cube Viewer is a small utility based on Flex that all
13. Font Reader
Font Reader is an Actionscript 3 based true type font parser
14. iPod like Scroller
iPod like Scroller is a simple component which can simulate
15. AMFPHP
AMFPHP is a free open-source PHP implementation of the Actio
16. FlashFlickr PhotoGallery
FlashFlickr PhotoGallery is an image gallery made in Flex2/A
17. jQuery.popeye
jQuery.popeye script is an inline lightbox alternative.
18. prettyComments
prettyComments script provides a solution for comment boxes
19. prettyPopin
prettyPopin provides a nice way to display simple content or
20. MYRE Realty Manager
MYRE Realty Manager is a complete realty listing management

DownloadTube Editor Reviews

 
1. Server2Go
Server2Go is a Webserver that runs out of the box without an...
2. PPT to EXE Converter
PPT to EXE Converter is an easy-to-use, friendly and reliabl...
3. Shine DVD To FLV Converter
Shine DVD to FLV Converter is a powerful and easy-to-use con...
4. Speed Shop & Inventory Log
Speed Shop & Inventory Log is an easy inventory and shopping...
5. Excel Delete Rows or Columns Based On Cell Content Software
Excel Delete Rows or Columns Based On Cell Content Software ...
6. WordTempl
WordTempl is a user-friendly software designed to accelerate...
7. Jocsoft MP4 Video Converter
Jocsoft MP4 Video Converter is a powerful and yet easy to us...
8. Easy Time Logs Express
Easy Time Logs is a time tracking, timesheet, and project ma...
9. Flash Menu Maker
You may use this 3D Flash Menu Builder with special text eff...
10. 1-abc.net Hard Drive Washer
Windows and nearly all other software that is installed on i...

Software Reviews Full List



Top Downloads

 
1. Canon PIXMA iP1000 Printer Driver
2. Canon PIXMA iP1200 Printer Driver
3. Canon PIXMA iP1300 Printer Driver a
4. Canon PIXMA MP210 MP Drivers
5. Canon i-SENSYS LBP2900 Printer Driver R
6. Realtek ALC/ 262/ 265/ 268/ 660/ 861/ 880/ 882/ 883/ 885/ 888 Audio
7. Asus EZVcr II
8. Canon PIXMA iP1300 Printer Driver c
9. JavaScript Page Preloader
10. Canon PIXMA MP140 MP Drivers
11. Canon PIXMA MP160 MP Drivers xp64
12. Canon PIXMA MP130 MP Drivers 2kxp
13. Canon PIXMA MP220 MP Drivers
14. Realtek RTL8139C(L)+/RTL8139D(L)/RTL8100(L)/RTL8130/RTL8139B(L) Driver
15. Canon PIXMA iP5000 Printer Driver b
16. Canon PIXMA iP1600 Printer Driver
17. Canon PIXMA MP170 MP Navigator
18. Canon PIXMA iP1200 Printer Driver x64 d
19. Realtek RTL8100B(L)/RTL8100C(L)/RTL8101L/RTL8139C(L) Driver XP
20. Lite-On Cd-Rw LTR-48327S firmware