This tutorial will show you how to create a chromeless window.
A chromeless window differs from a regular pop-up window in that you can fully customize it to fit in with your site.
An example can be seen at my site when you press the enter button.
1. Create a new, blank page. This page will hold the link to open your chromeless window.
2. Add this code to your <head> tag:
| CODE | <script src="chromeless_35.js"></script>
<script language="javascript">
// CREDITS:
// Chromeless window script by Gabriel Suchowolski ( www.microbians.com )
// Distributed with permission by Lissa ( www.lissaexplains.com )
function openIT(u,W,H,X,Y,n,b,x,m,r) {
var cU ='close_up.gif'
var cO ='close_ovr.gif'
var cL ='clock.gif'
var mU ='min_up.gif'
var mO ='min_ovr.gif'
var xU ='max_up.gif'
var xO ='max_ovr.gif'
var rU ='res_up.gif'
var rO ='res_ovr.gif'
var tH ='<font face=verdana size=1> Window title</font>'
var tW =' window title'
var wB ='#9966ff'
var wBs ='#FFFFFF'
var wBG ='#ffe0ff'
var wBGs='#9966ff'
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||true;
var tsz =20;
return chromeless(u,n,W,H,X,Y,cU,cO,cL,mU,mO,xU,xO,rU,rO,
tH,tW,wB,wBs,wBG,wBGs,wNS,fSO,brd,max,min,res,tsz)
}
</script>
|
3. Add this code to the <body> tag wherever you want the link to open your chromeless window to be:
| CODE | | <a href="#" onclick="mywindow=openIT('window.html',400,200,null,null,'mywindowname')">Open Chromeless</a> |
4. Change "window.html" to the url of the site to be displayed in your chromeless window. Change "400,200" to the width and height of your choice.
5. Download the required files here, and upload them to your server, no changes are needed.
To customise your chromeless window:
wB = Border color.
wBs = Border color on window drag.
wBG = Background of the title bar.
WBGs= Background of the title bar on window drag.
var tH = Title of your window.
To set an image as the link, simply replace "Open Chromeless" in the code from step 3 with the following code:
| CODE | | <img src="[b]your image[/b].gif" border="0"> |
If you feel this is too hard I have put together a blank html page with an image link and a text link along with the js file and images.
.::Preview::.
.::Download::. (Right click and select "save target as")
[marquee]Please report any problems.[/marquee]
hope this helps,
-rob
;)
|
|
|
