Results 1 to 2 of 2

Thread: Color PIcker Widget (YUI Based) open from with in another window?

  1. #1
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Color PIcker Widget (YUI Based) open from with in another window?

    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

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    
    <!-- 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
    ***********************************************/
    
    </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">&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>
    
    </form>
    
    <!--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>
    </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>

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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), then link to this page from the other to load it when clicked on?
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •