View Full Version : Color PIcker Widget (YUI Based) open from with in another window?

08-02-2009, 09:56 PM
1) Script Title:
Color PIcker Widget (YUI Based)

2) Script URL (on DD):

3) Describe problem:

I already have been using DHTML Window Widget, so when I wanted to add a color picker and realized that Color PIcker Widget (YUI Based), uses DHTML Window Widget too, that integration should be pretty simple.

But I can not seam to get it to do what I want for anything.

What I have is a widow widget and inside that window widget I have some coloring options.

I would like to be able to launch the Color PIcker Widget from with in the other widget, for the user to select the color seeting, but it will not work.

I know its definitely possible to open up other widgets from with with in widgets, which leaves me to believe its something with the Color PIcker Widget that is the problom.

I also know that the code I have in the widget I am trying to launch Color PIcker Widget from works fine if its not inside that widget.

Here is an example of the code i am trying to get work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<!-- YUI Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js" ></script>

<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/colorpicker/colorpicker-min.js" ></script>

<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" type="text/css" href="windowfiles/dhtmlwindow.css" />

<script type="text/javascript" src="ddcolorpicker.js">

* Color PIcker Widget (YUI Based)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Requires: YUI Color Picker and DHTML Window Widget


<style type="text/css">

* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/

/*Style used in demos below. Edit if desired*/

.colorpreview{ /*CSS for sample Preview Control*/
border: 1px solid black;
padding: 1px 10px;
cursor: hand;
cursor: pointer;

form div{
margin-bottom: 5px;




<a href="#" onClick="divwin=dhtmlwindow.open('divbox', 'div', 'setbimg', '#4: DIV Window Title', 'width=450px,height=300px,left=200px,top=150px,resize=1,scrolling=1'); return false"><b>test</b></a></li>

<div id="setbimg"style="display:none" >
<h2>Example 1: Floating Color Picker</h2>


<p>Select a Color:</p>

<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview">&nbsp;</span></div>

<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>

<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>


<!--HTML for Color Picker. Should contain two unique IDs-->

<div id="ddcolorwidget">
Please choose a color:
<div id="ddcolorpicker" style="position:relative; height:205px"></div>
<a href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/" style="margin-left:5px; font-size:90%">YUI Color Picker Widget</a>

<script type="text/javascript">

colorcontainer: ['ddcolorwidget', 'ddcolorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]



08-03-2009, 10:22 PM
Are you saying inside the DHTML widget, you're displaying a page that somehow contains a link that when clicked on, should load a color picker (still within the DHTML Widget)? If so, have you tried simply creating a blank page with just the Color Widget on it and already shown (see example 2 here (http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/colorpicker.htm)), then link to this page from the other to load it when clicked on?