Customizing YUI Dialog Box Appearance

You may override the default YUI dialog style. For example if your dialog ID is named "MyDialog" you could provide your own custom close icon as fllows:

#MyDialog.yui-panel .container-close { top:5px; right:8px; height:21px; width:21px; background-image:url(myicon-close.gif);}

Above myicon-close.gif may be the URL of your custom icon.

Similarly you may override the header and the panel styles:

#MyDialog.yui-panel .hd {cursor:move; padding:0; border:none; color:#00ff00; height:36px; margin-left:8px; margin-right:8px; text-align:left; vertical-align:middle; overflow:visible; }
#MyDialog.yui-panel .hd span {cursor:move; line-height:30px; vertical-align:middle; }

#MyDialog.yui-panel { position:relative; border:none; overflow:visible; background:transparent no-repeat top right; }

Centering and Positioning Dialogs

YUI provides the "fixedcenter" property that allows you to center your dialog boxes at all times. that is if user scrolls down a long page, your modeless dialog is still centered and will scroll down along with the rrest of the page. For example the fixedcenter below positions the dialog box at the center of the screen.

YAHOO.mydialog.container.dialog1 = new YAHOO.widget.Dialog("divDisalog",
{
width : "256px",
fixedcenter : true,
constraintoviewport : false,
close :true,
x:180,
draggable: true,
underlay:"none"
} );

However in certain cases you may want to shift your dialog slightly off the center while still having it scroll down or be shifted off center at all times. To shift your dialog add a margin to the dialog boxes HTML style. for example to shift it to the left from the center you may use code such as this example that may be applied to your div tag. Below we get the benfits of centering but we have also shifted 128 pixels to the left:


id="divFlrsDisalog" style="margin-left:-128px;

Drag Drop Essentials

Drag drop of HTML elements (DIV, TABLE, IMG, etc.) could be achieved using the following set of functions found here:
http://www.nofunc.com/Drag_Drop/

Alternatively, you could drop the definition of $(v) and use these subset of functions:

function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) {
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function dragOBJ(d,e) {
function drag(e) { if(!stop) { d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; }; }


- As noted you need to attach style="position: relative; top: 0; left: 0;" onmousedown="dragOBJ(this,event); return true;" to the element you wish to drag.

- If your drag div contains input fields you should disable the dragging effect within the input fields. Otherwise, users will loose the ability to select the input field's text with their mouse. So for inout fields you may add the following call to CancelDrag() to disable the dragging that may be inherited from an outer div tag. So you may add an onmousedown event to your input field:

input id="stfName" class="name" type="text" onmousedown="return CancelDrag(event)"
Where CancelDrag() is defined as:

function CancelDrag(A)
{
A.cancelBubble=true;
return true;
}



YUI provides the "draggable" property for dialog boxes that allow you to make a dialog box draggable provided you include that YUI drag-drop .js files:


10
type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js">

However YUI drag-drop .js files may have cause javascript errors when integrated with Virtual Earth 6.0 header files.

To correct the errors you may choose not to use or include the YUI drag drop files and instead rely on the traditional drag-drop functions presented above to make a YUI dialog box draggable. This approach also brings in less code that the YUI drag-drop .js files. The functions above were tested in IE 6, IE 7, FireFox 2.x and Safari 3.0.