Chromeless Windows

Introduction
Chromeless windows was a concept started by Gabriel Suchowolski of microbians.com. The idea is creating a window that you the designer can have complete control over. This neat trick can be useful, but be warned that it's not compatible with all browsers, and has been known to crash a few Macs. When using chromeless, give your visitor two more alternatives, "regular pop-up", and "no pop-up".

See samples of chromeless windows here.

Download
Start by downloading this .zip folder, and un-zipping it.

See "How To Download" for information on downloading and un-zipping.

Contents
Go to the unzipped folder, and open it.

The folder will contain the following:

  1. content.html
  2. index.html
  3. license.txt
  4. folder: img
    1. clock.gif
    2. close_ovr.gif
    3. close_up.gif
    4. max_ovr.gif
    5. max_up.gif
    6. min_ovr.gif
    7. min_up.gif
    8. res_ovr.gif
    9. res_up.gif
  5. folder: javascript
    1. chromeless_35.js

You can edit all of these files and folders freely, but you must to edit the files in bold!

Editing
content.html
You put the content to display in the chromeless window here.

index.html
This should require a little more editing. Open it in your favorite text editor, such as notepad, or editpad.

<title>Chromeless Windows</title>

Change this to the title you want on the main page.

var cU ='img/close_up.gif'
var cO ='img/close_ovr.gif'
var cL ='img/clock.gif'
var mU ='img/min_up.gif'
var mO ='img/min_ovr.gif'
var xU ='img/max_up.gif'
var xO ='img/max_ovr.gif'
var rU ='img/res_up.gif'
var rO ='img/res_ovr.gif'
var tH ='<font face=verdana size=1>&nbsp;&nbsp;Jenni</font>'
var tW ='&nbsp;&nbsp;jenni'
var wB ='#CCCCCC'
var wBs ='#999999'
var wBG ='#CCCCCC'
var wBGs='#999999'
var wNS ='toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0'
var fSO ='scrolling=no noresize'
var brd =b||0;
var max =x||false;
var min =m||false;
var res =r||false;
var tsz =20;

If you look here, on the right of some of the lines there will be reminders as to what they control, after the // part. Here are some notes:

img/ : Make sure you place the proper address of the icons if you cange the location / name of folder.
<font face=verdana size=1>&nbsp;&nbsp;Jenni</font>: You can change the title of the window here.
&nbsp;&nbsp;jenni: Change the taskbar button here.

Look inside the HTML for more notes.

Now you have to make the link.

<a href="#" onclick="jenchrome=openIT('content.html',400,200,5,10,'jenwin001',1,false,false,false);">Open</a>

content.html: This should be the address of the window to open.
400: Width of window. Measured in Pixels. % is also allowed.
200: Height of window. Measured in Pixels. % is also allowed.
5: X coordinates of window. Set to "null" for center.
10: Y coordinates of window. Set to "null" for center.
jenwin001: title of window. Change this for every new window link you make. Ignore if you only need one chromeless window to open.
1: Width of border around window. Set to "0" for none.
false,false,false: maximize,minimize,resize. Set to "true" for yes, "false" for no.

To make a close link, use this code:

<a href="#" onclick="if (top.jenchrome) jenchrome.closeIT();">Close</a>

Main?