New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

DHTML Suite - window

Demo | Demo 2 | Demo 3 | Demo 4

Bookmark and Share

Download files

There are two ways to download this script. You can download the entire zip file from the DHTML Suite page, or you can download the individual files needed for the scripts from the links below.

Files

Css and image files for the windows are available in this zip file. Unzip the files and put them in a sub folder called "themes".

You also need these js files:

Configuration

The first thing you need to do is to include the javascript files in your HTML file. Example:

<script type="text/javascript" src="../js/dhtmlSuite-common.js"></script>
<script type="text/javascript" src="../js/dhtmlSuite-dynamicContent.js"></script>
<script type="text/javascript" src="../js/dhtmlSuite-windowWidget.js"></script>
<script type="text/javascript" src="../js/dhtmlSuite-dragDropSimple.js"></script>
<script type="text/javascript" src="../js/dhtmlSuite-resize.js"></script>

Next, you need to specify path to your layout files. Inside the zip file, you will find four folders, each one containing layout files for different window themes.

Extract the files and put them in a sub folder called "themes". Then, add this to your HTML page:

<SCRIPT type="text/javascript">
var DHTML_SUITE_THEME_FOLDER = 'themes/';
</SCRIPT>

This line specifies that the layout files are located inside a sub folder of your HTML files named "themes".

By default, your window(s) will be displayed using the "blue" theme. You can specify a different theme in the DHTML_SUITE_THEME variable. You can choose between

  • blue
  • gray
  • light-cyan
  • zune

I.e. name corresponding with the name of the folders you extracted from the zip file.

If you want to use a different theme, you can do that with these lines:

<SCRIPT type="text/javascript">
var DHTML_SUITE_THEME = 'zune';
</SCRIPT>

Creating a window

We should now be ready to create our window. There are several ways to do that. The first method is to create it from HTML markup. What we do is to add some nested divs to our page which describes the window.

Example:

<div id="myWindow"
windowProperties="title:My window,width:440,height:380,maxWidth:900,cookieName:window,
xPos:5,yPos:170,minWidth:365,minHeight:250,activeTabId:windowTab2">
<div id="windowTab1" class="DHTMLSuite_windowContent" tabProperties="tabTitle:This is a tab,overflow:hidden">
Content of second window
</div>
<div id="windowTab2" class="DHTMLSuite_windowContent" tabProperties="tabTitle:This is also a tab,overflow:hidden,contentUrl:myFile.html">
</div>
</div>

This code describes a window with two tabs. Properties for the window are inserted into the custom attribute "windowProperties" of the main DIV. It's a comma separated list of different properties. These are the available properties:

  • isVisible - Is the window visible - default = true (Optional)
  • isClosable - Is the window closable - default = true (Optional)
  • isDragable - Is the window dragable - default = true (Optional)
  • isResizable - Is the window resizable - default = true (Optional)
  • isMinimizable - Is the window minimizable - default = true (Optional)
  • cookieName - Cookie name where properties are remembered (Optional)
  • title - Title inside title bar
  • icon - Icon in window title bar(Not yet supported)
  • width - Initial width of window - this value may be overridden by value stored in cookie
  • height - Initial height of window - this value may be overridden by value stored in cookie
  • xPos - X position of window
  • yPos - Y position of window
  • activeTabId - Id of active window tab (Optional)
  • minWidth - Minimium width of window (Optional)
  • maxWidth - Maximum width of window (Optional)
  • minHeight - Min height of window (Optional)
  • maxHeight - Max height of window (Optional)
  • windowsTheme - Display window with windows theme (true or false) (Optional)
  • callbackOnClose - Call back to execute when the window is closed. (Optional)

As you can see, there are a lot of attributes to choose from. However, you don't have to specify all of them. Almost all attributes are optional and will be assigned to default values in case you omit them.

You should also notice that the window DIV has it's unique id.

Window tabs are described by divs inside the main window div. Properties for a tab is defined in the custom attribute "tabProperties". These are the supported attributes:

  • tabTitle - Title of tab
  • contentUrl - Url to load from the server (Optional)
  • id - Id of tab
  • htmlElementId - Id of HTML element. (Optional)
  • isDeleted - Is the tab flagged as deleted, i.e. not visible(Optional)
  • overflow - What to do when content is wider or higher than the window - css overflow attribute like "auto","scroll" or "hidden". Default is "auto" (Optional)

In the code above, we will have two tabs. The content of the first window will simply be "Content of second window", i.e. the content inside the DIV tag. The second window will be populated with the content of the file myFile.html(the contentUrl attribute).

We are now ready to write the Javascript code needed to create the window. It looks like this:

<SCRIPT type="text/javascript">
var windowModel = new DHTMLSuite.windowModel();
windowModel.createWindowModelFromMarkUp('myWindow');
var colorWindow = new DHTMLSuite.windowWidget();
colorWindow.setLayoutThemeWindows();
colorWindow.addWindowModel(windowModel);
colorWindow.init();
</SCRIPT>

windowModel is an object which stores information about our window. We fill it with information by pointing it to the window markup we added before. This is done by the createWindowModelFromMarkUp method. As you can see, we are sending in the id of the main DIV.

The last thing we have to do is to create the window widget object. This is done in the last four lines. The first line

var colorWindow = new DHTMLSuite.windowWidget();

creates the window widget object. setLayoutThemeWindows is used to define that I want a "windows style" sub theme of zune. Each window got two sub themes, so you have actually 8 themes to choose from.

addWindowModel is used to connect our window widget with our window model. Finally, we call init() to initalize and display the window.

Create window without use of HTML markup.

You can also create a window with Javascript only. This is useful if you need to create it dynamically at runtime, i.e. after the content of your page has been rendered by the browser. Example: when a user clicks on a link on your page.

This is example of how to do that:

<script type="text/javascript">
function createNewWindow()
{
var newWindowModel = new DHTMLSuite.windowModel({windowsTheme:true,id:'newWindow',title:'New dynamically created window',xPos:200,yPos:200,minWidth:100,minHeight:100 } );
newWindowModel.addTab({ id:'myTab',htmlElementId:'myTab',tabTitle:'tab1',
textContent:'Hello' } );
var newWindowWidget = new DHTMLSuite.windowWidget(newWindowModel);
newWindowWidget.init();
}
</script>
<a href="#" onclick="createNewWindow();return false">Create window</A>

You have the same properties to work with here as you had when you created a window from markup. The difference is that you send them directly to the objects in associative arrays.

NB! It's not possible to display windows with different themes on the same web page. All windows on a web page has to use the same theme.

For more information, please see the class documentation.

Comments

Steve Davis
Hi,

Thank you for the excellent script.

For some reason, the theme I want, light-cyan, is displaying the same as the blue theme. I've tried all the other themes and they display as advertised. The images in the light-cyan folder seem to be correct. I'm stumped. Any idea what might be happening?

Best,
Steve
Steve Davis at 08:12PM, 2011/12/20.
Ralph
@Steve: You have to replace the link to window-theme-windows.css with window.css in all JavaScript files!
Ralph at 01:23PM, 2012/01/06.
Kathy Small
Using IE9 for VS2012 debug, dhtmlSuite-windowWidget.js gives javascript error for iframeEl=document.createElement('<IFRAME src="about:blank" frameborder=0>') and table=document.createElement('<TABLE cellpadding="0" cellspacing="0" border="0">') since IE9 supports only createelement with name of Element. Do you have a updated version for IE9 support? Thanks in advance.
Kathy Small at 05:40PM, 2014/08/13.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com