Applying CSS Styles to ColdFusion Window

CFWINDOW is a new feature in CF8 that creates a pop-up window in the browser. Now to apply css to the cfwindow such as changing the header or body color, we can use the attributes in the <cfwindow> tag. The documentation for applying the css styles with the <cfwindow> tag are given in the Adobe’s help docs.

But what if we are creating the coldfusion window from javascript and need to apply the css styles? Hmm.. that’s a bit tricky..Ok let’s see how it’s done.

function CreatePopUp()

   {

ColdFusion.Window.create(“myWindow”, “Window Header”, “./yoururl.cfm”, {height:500,width:500,modal:true,closable:true, draggable:false,resizable:false,center:true,initshow:true});

document.getElementById(ColdFusion.Window.getWindowObject(“myWindow”).header.id).className = “windowHdr”;

    }

The above code creates a CFwindow with id myWindow when the CreatePopUp JS funtion is called. It also gets the id of the header of the cfwindow and apply a css class(windowHdr) to it. This css will only applicable to the header only. Now if we need to apply styles to the borders of the cfwindow, we need to specify the id of each html element (Thanks to our friends @ FireBug) in the border and apply style to it. To give color to the borders we are going to use an image (here we use cfwindowbg.gif) of suitable color and make it repeat within the html element.  It should be like this:-

 <STYLE>

.windowHdr {

background: url(‘/images/icons/cfwindowbg.gif’) repeat-x ;

color:#fff;

font:normal 11px tahoma, verdana, helvetica;

padding-top:100px;

padding:5px;

font-weight:bold;}

.x-dlg div.x-resizable-handle-east

{

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg div.x-resizable-handle-west {

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg div.x-resizable-handle-south {

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

}

.x-dlg .x-dlg-close{

padding-right:4px;

}

.x-dlg div.x-resizable-handle-southwest{

background: url(‘/images/icons/cfwindowbg.gif’) repeat ;

.x-dlg div.x-resizable-handle-southeast {

background: url(‘/images/icons/cfwindowbg.gif’) repeat-x ;

}

</STYLE>

Click here to see this example..

Advertisements

1 Comment (+add yours?)

  1. Nikitul
    Oct 12, 2011 @ 10:40:42

    Sample link not working anymore…

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: