Chromeless
Pop-Up
Window
by
kirupa
:
code by mariano klein
If you happen to browse design sites, you are
bound to see many javascript pop-up windows that display a
page in a smaller, less buttoned version of your browser. A modification of the
pop-up window is the Chromeless window. Unlike a regular
pop-up where you still see the browser window's title bar, a
Chromeless window takes out all of the extraneous details that
your OS/browser leaves on, and it gives you more freedom to
customize the appearance of your window.
The only glaring problem with this cool
effect is that you have to use Internet Explorer. Users with
Netscape or Mozilla browsers are out of luck. With that
said, click the button in the following Flash animation for
an example of the Chromeless window:
[ click
here....well, "click here" there above you! ]
Before I proceed any further,
the Chromeless window is a feature that has evolved and
changed over its existence. This code is not my creation,
but the variation I am using is by Mariano Klein featured on
chromeless.org. The
code used in the Flash file and HTML is also the exact
version from Mariano Klein's examples.
Creating the Chromeless Window:
Create a new document in Flash MX 2004.
Once the document has been created, draw a small rectangle
on the stage. Select your rectangle, press F8, select the
option for Button, and press OK.
[ select
Button and press OK ]
With your rectangle converted into a button, make sure
your button is selected and look at your Properties panel.
Let's give the button an instance name. In the area marked
< Instance Name >, enter the word chromeless:
[ give the
button the Instance name "chromeless" ]
With that done, select the first frame in the timeline of
your animation. Press F9 to display the Actions panel.
Copy and paste the following code:
chromeless.onPress = function()
{
getURL("javascript:myChromeless.openChromeless()");
}
[ copy and
paste the following code in your Actions panel ]
Now, save your animation and go to File | Publish. If you
go to the folder where your animation is, you will see 3
files from this animation: the fla, the swf, the htm.
Our work in Flash is pretty much done. Exit Flash...for
good!
There are a few files that you will need to finish your
effect. Download and extract the files from the following
link into the SAME folder as that of your Flash animation.
In case you are wondering, the files you
downloaded and extracted are the images and the
all-important JavaScript file that makes this effect
possible!
Now, open Flash's HTML file in a program like Notepad,
DreamWeaver, FrontPage, etc. Whichever! Find the </head>
tags, and after them, copy and paste the following code:
[ copy and
paste the following code after the </head> tags ]
Save and preview this page in your browser. If everything
worked well, you should be able to see a portion of the
navigation from this site's main page.
Customizing
Now, let's learn to customize this
animation. I am sure you are not too keen in displaying the
this site's title and color scheme in your implementation of this
tutorial! The brunt of your customizing occur in the HTML
file. It would only make sense to start there:
/////////////////////////////////////////////
//This are the attributes you can customize//
/////////////////////////////////////////////
var B =
"http://www.kirupa.com/newdesign/tutlist.htm";
// URL
var Y = "Example by Kirupa";
// title
var K = "c_title.gif";
// titlebarImage
var L = 23;
// titlebarHeight
var E = "Arial";
// titleFont
var I = 10;
// titleSize
var N = "#5596AE";
// titleColor
var C = false;
// scrollbars
var h = 500;
// width (w)
var r = 400;
// height (h)
var o = true;
// centered
var m = 0;
// xPos
var e = 0;
// yPos
var l = "#5596AE";
// borderColor
var e_= 5;
// borderSize
var s = "minimize.gif";
// minimizeBottom
var s_= "close.gif";
// closeBottom
The above code is actually a section from
the HTML that you copied and pasted. All aspects of your new
window that can be customized are displayed in the orange
color above.
Most of the information is
self-explanatory, and Mariano did a good job of commenting
the code to help you out. If there is anything you need to
change, you simply replace the existing values with your new
value. Pretty self-explanatory really!
Warnings
While this effect is
really cool, there are a few issues you have to be
aware of:
This feature only works on
Internet Explorer versions 5.5 and up running
Microsoft Windows. Netscape and Mozilla versions
will not display this effect. I have heard that
this effect works well in Firebird though.
If you go back to your Flash
animation and publish the animation, any changes
you made to your HTML file will be lost. You will
have to copy and modify the effect again. It's
best to create a copy of your HTML file and rename
it as something else so that Flash won't have the
tendency to overwrite what you have already done.
From a usability point of view,
Chromeless windows are bad. You should try to have
a non-Chromeless or regular windowed option for
your visitors to choose from.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx2004/chromeless.htm