Color PIcker Widget (YUI Based) open from with in another window? [Archive]

CSF

08-02-2009, 09:56 PM

1) Script Title:
Color PIcker Widget (YUI Based)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

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">

<html>
<head>


<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>


<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
***********************************************/

</script>

<style type="text/css">

* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/picker_mask.png',sizingMethod='scale');
}

/*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;
}

</style>

</head>
</body>

<body>

<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>

<form>

<p>Select a Color:</p>

<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </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>

</form>



<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>
</div>

<script type="text/javascript">

ddcolorpicker.init({
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]
})

</script>
</div>

</body>
</html>