SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Chromeless Windows for IE : The Chromeless Window Layout

The openchromeless() function creates a window using a default frameset document. We found that framesets are the simplest way to layout the window. One frame is used for the "title-bar", another three frames for the edges, and finally one in the center for the content of the window. With frames the layout management becomes much simpler as the browser handles it automatically. 

<HTML>
<HEAD>
<TITLE>  chromeless window 1.0</TITLE>
</HEAD>
<frameset border=0 framespacing=0 frameborder=0 rows="22,100%,1">
 <frame name=chromewint src="chromelesstitle.html" scrolling=no noresize>
 <frameset border=0 framespacing=0 frameborder=0 cols="1,100%,1">
  <frame name=chromewinl src="about:blank" scrolling=no noresize>
  <frame name=main       src="contacting.html">
  <frame name=chromewinr src="about:blank" scrolling=no noresize>
 </frameset>
 <frame name=chromewinb src="about:blank" scrolling=no noresize>
</frameset>
</HTML>

After this frameset template finishes loading the specified URL is automatically loaded into the center frame. By using a template frameset all windows you can easily ensure that all windows have the same layout. This allows you to focus on the window contents without having to worry about layout out the surrounding chrome.

In frame main, contacting.html is displayed that notifies the user that the window is loading. Once the frame chromewint is finished loaded the main frame is replaced through a simple script included in the template with the specified document. The template is customized by passing the openchromeless() arguments into the frameset by appending parameters to the template URL. These parameters are separated by "|". The most important parameters are the URL and window title and are extracted as follows: 

theURL    = param.split("|")[0] // URL of the main HTML
windowTIT = param.split("|")[4] // HTML for the title

MOVING THE WINDOW

The code of the Chromeless Windows has to include code to allow the window to be dragged. This requires the position of the mouse to be determined with respect to the screen and not of the document. The events of the mouse in IE are usually only accessible when the mouse is within the window. However, when dragging sometimes the mouse leaves the window. What is really needed is the ability track the position of the mouse even if it leaves the window. While not included with this example, this can be accomplished in IE 5.0 or later by using the new mouse capturing feature. We will leave that to a future exercise.

This turns out to not be a serious issue. In most cases, the window will move in conjunction with the mouse thereby always leaving the mouse over an element. You would have to move the mouse fairly quickly to get outside of the window. Therefore, we simply track the mouse and calculate its position with respect to its position on the screen. We also track the mouse offset from the corner of the window to maintain the mouse's position within the window. This allows to place the window (window.moveTo) in the correct position.

Last when the mouse is dragging, we also need to clear the onselectstart and ondragstart events. This is to ensure that the default selection and drag behavior does not occur. Otherwise, you will see text being selected as you drag the mouse.

Next, you will find the commented script and sample files.

Page 1:Chromeless Windows for IE
Page 2:The Chromeless Window Layout
Page 3:The Code and Sample Files

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.