Inside Technique : Chromeless Windows for IE : The Code and Sample Files

You can download a .zip file containing all the script files and an example. This example includes the following files:

launch.html

Opens a sample window.

chromeless.html

The frameset that defines the template for the window

chromelesstitle.html

The HTML defines the title-bar and controls dragging of the window by means of pz_chromelesstitle.js

contacting.html

A simple HTML page that notifies the user the page is loading

pz_chromeless.js

The functions that open the chromless window using the fullscreen-resize trick introduced by webFX

pz_chromelesstitle.js

The routines that are loaded in chromelesstitle.html enabling window dragging, changing of colors when one drags, and managing the icon to close the window.

THE CODE WITH NOTES

Last we walk through the commented code:

// Chromeless window v1.1 (TITLE)
// www.microbians.com / Gabriel Suchowolski power[z]one - powerz@microbians.com
//
// Distributed under the terms of the GNU Library General Public License
//
// - Routines modified from Steinman DynAPI, http://www.dansteinman.com/dynduo/
// - Chromeless trick by webFX. http://www.eae.net/webfx/
// - Chromeless mouse control to handled like a 
//   normal window by Gabriel Suchowolski power[z]one
 
///////////////////////////////////////////////////// Title bar control //////
 
var isinit     = false; // is false at start, true onload of chromelesstitle.html
var mywindowok = true;  // True when you can drag the window
 

// PART1 
// Control of the parameters from search part of URL of chromeless.html 
var param = parent.location.search.toString()
    param = unescape( param.substring(1, param.length) )
 
if ( param.split("|").length>=9 ) {
 theURL           = param.split("|")[0]
 windowCERRARa      = param.split("|")[1]
 windowCERRARd      = param.split("|")[2]
 windowCERRARo      = param.split("|")[3]
 windowTIT      = param.split("|")[4]
 windowBORDERCOLOR   = param.split("|")[5]
 windowBORDERCOLORsel= param.split("|")[6]
 windowTITBGCOLOR    = param.split("|")[7]
 windowTITBGCOLORsel = param.split("|")[8]
}
else {  
 // If no parameters a default set for debug was used
 theURL="about:blank"
 windowCERRARa   = "img/close_a.gif"
 windowCERRARd   = "img/close_d.gif"
 windowCERRARo   = "img/close_o.gif"
 windowTIT       = "<font face=verdana size=1> � window title</font>"
 windowBORDERCOLOR    = "#000000"
 windowBORDERCOLORsel = "#FF8A00"
 windowTITBGCOLOR     = "#d7dcd9"
 windowTITBGCOLORsel  = "#ffffff"
}
 
// Image objects for onmouseover of the close icon

// On activate
var windowCERRARImg_a = new Image(); windowCERRARImg_a.src=windowCERRARa;
// Normal state
var windowCERRARImg_d = new Image(); windowCERRARImg_d.src=windowCERRARd;
// Mouseover
var windowCERRARImg_o = new Image(); windowCERRARImg_o.src=windowCERRARo;
 

// Sets the border colors maked with frames of 1 pixel defined on chromeless.html
// but it whait for the frames was accesible
function whaitborders() {
 if ( parent.chromewinb && parent.chromewinl && parent.chromewinr ) {
  parent.chromewinb.document.bgColor=windowBORDERCOLOR
  parent.chromewinl.document.bgColor=windowBORDERCOLOR
  parent.chromewinr.document.bgColor=windowBORDERCOLOR
 } else {
  setTimeout('whaitborders()', 100);
 }
}
whaitborders()
 
// Creates an object to handle the mouse and all his data
function mouseSTATUS() {
 this.x       = null;
 this.y       = null;
 this.bt      = "up";
 this.oldx    = null;
 this.oldy    = null;
 this.dx      = null;
 this.dy      = null;
 this.screeny = null;
 this.screenx = null;
 
 this.element = null;
 this.event   = null;
}
 
// Creation of the mouse object I will use
var mouse = new mouseSTATUS();
 
// This function will called onmousemove, onmousedown and onmouseup.
// It actualizate all de mouse data, buton status and position offset
//   from the document and from the screen.
function actualizateMouseSTATUS(e) {
 if (!e) var e = event
 if ( (e.type=="mousedown" || e.type=="mouseup") && e.button!=1) return true
 
 var x=e.x+document.body.scrollLeft
 var y=e.y+document.body.scrollTop
 
 mouse.x   = x;
 mouse.y   = y;
 
      if ( e.type == "mousedown" ) mouse.bt = "down";
 else if ( e.type == "mouseup" )   mouse.bt = "up";
 
 if (window.event) {
  mouse.screenx=window.event.screenX;
  mouse.screeny=window.event.screenY;
 } else {
  mouse.screenx=-1;
  mouse.screeny=-1;
 }
 
}
 
// Initializate all the events
// It also make null the ondragstart and onselectstart
function initMouseEvents() {
 document.onmousedown = actualizateMouseSTATUS
 document.onmousemove = actualizateMouseSTATUS
 document.onmouseup   = actualizateMouseSTATUS
 document.onselectstart = selectstart
 
// ondragstart will send to actualizateMouseSTATUS to take the 
// on screen mouse position on IE4 (IE5 no need it)
 
 document.ondragstart   = new Function("actualizateMouseSTATUS(event); return false;")
}
 
// onselectstart is anulate for all elements that are no INPUT or TEXTAREA...
// may be you will like to put a form in the title (?)
function selectstart(){
 if ( event.srcElement.tagName != "INPUT" && event.srcElement.tagName != "TEXTAREA") 
    { return false; } 
 else 
    { mouse.bt="up"; return true; }
}
 
// Call to init all the mouse control
initMouseEvents()
 ///////////////////////////////////////////////////// WINDOW DRAG //////
 
var mywindowbt    ="up"; // Status for the window title
var wincloseSTATUS="up"; // Status for the close icon
 
var ofx=0;  // X Offset betwen the mouse and the (0,0) of the document on 
            // the mousedown over the title (like startdrag)
var ofy=0;  // Y Offset betwen the mouse and the (0,0) of the document on 
            // the mousedown over the title (like startdrag)
var opx=0;  // X Old position of the window
var opy=0;  // Y Old position of the window
var px=0;   // X Window position
var py=0;   // Y Window position
 
// Will be the area of the close icon
var wcpx1=-1, wcpy1=-1;  
// that will be init on init == true inside initToMoveWin function
var wcpx2=-1, wcpy2=-1;  
 
var wclosechanged = false; // To control the close icon
 
// The function that move the window && control de color changes on drag and the close control
function initToMoveWin() { 
 if (mywindowok) {
  if (wincloseSTATUS=="up" && ( mywindowbt=="up" || mywindowbt=="over") ) {
   if (isinit) {
    wcpx1 = document.all["mywindowCLOSE"].style.pixelLeft=document.body.clientWidth-18
    wcpy1 = document.all["mywindowCLOSE"].style.pixelTop =4
    wcpx2 = wcpx1 + 11 - 1 
    wcpy2 = wcpy1 + 11 - 1
    if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2) { 
     if (wclosechanged == false) {
      document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_o.src
      wclosechanged = true
     }
      
    } else if (wclosechanged == true) {
     document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_d.src
     wclosechanged = false
    }
   }
  }
 
       if (   mouse.y <= 22 && mouse.y >= 1   && mywindowbt == "up"   && mouse.bt =="up"    ) 
         { mywindowbt = "over" }
  else if ( ( mouse.y  > 22 || mouse.y <  1 ) && mywindowbt == "over" && mouse.bt =="up"    ) 
         { mywindowbt = "up"   }
  else if (   mouse.y <= 22 && mouse.y >= 1   && mywindowbt == "over" && mouse.bt == "down" ) { 
   self.window.focus();
 
   if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2 ) { 
    wincloseSTATUS="down"
    document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_a.src
   } else {
    document.all["mywindowTITLE"].style.backgroundColor = windowTITBGCOLORsel
    document.body.style.borderColor = windowBORDERCOLORsel
    parent.chromewinb.document.bgColor=windowBORDERCOLORsel
    parent.chromewinl.document.bgColor=windowBORDERCOLORsel
    parent.chromewinr.document.bgColor=windowBORDERCOLORsel
    ofx =  mouse.x;
    ofy =  mouse.y;
    opx =  mouse.x;
    opy =  mouse.y;
   } 
   mywindowbt="down"; 
  }
  else if ( mouse.bt =="up" && mywindowbt == "down" ) { 
   mywindowbt="up"; 
   ofx=0; 
   ofy=0; 
   opx=0; 
   opy=0; 
 
   if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 
      && mouse.y <= wcpy2 && wincloseSTATUS=="down" ) 
     { top.window.close() }
 
   wincloseSTATUS="up"
  
   if ( document.all["mywindowTITLE"] ) {
    document.all["mywindowTITLE"].style.backgroundColor = windowTITBGCOLOR
    document.body.style.borderColor = windowBORDERCOLOR
    parent.chromewinb.document.bgColor=windowBORDERCOLOR
    parent.chromewinl.document.bgColor=windowBORDERCOLOR
    parent.chromewinr.document.bgColor=windowBORDERCOLOR
   }
 
  }
  else if ( mywindowbt == "down" && wincloseSTATUS == "up") {
   var m_scrx = mouse.screenx;
   var m_scry = mouse.screeny;
   opx = px + ofx - m_scrx;
   opy = py + ofy - m_scry;
   px = m_scrx - ofx;
   py = m_scry - ofy;
   top.window.moveTo(px , py);
  }
 }
 setTimeout('initToMoveWin()',20);
}
initToMoveWin()
 
// Call onload of chromelesstitle.html and set the title content and the close icon
function init() {
 document.all["mywindowTITLE"].innerHTML='<' + 
    'table width=100% height=20 border=0 cellpadding=0 cellspacing=0><tr>' +
    '<td valign=middle align=left>'+windowTIT+'</td></tr></table>'
 document.all["mywindowTITLE"].style.backgroundColor  = windowTITBGCOLOR
 document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_d.src
 
// This will start load the main URL you like to have inside the window on the main frame
 setTimeout('parent.main.location.replace("'+theURL+'")',200)
 
 isinit=true
}

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