Guide to creating simple chromeless popup windows. by Michael Bloch
Popup windows - hate 'em or love 'em; they are a constant companion during our
Internet surfing. They can be quite useful, especially the chromeless variety.
A chromeless popup window is one that doesn't show the browsers menu or tool
bar, but does retain the title bar (for easy closing). Some visitors have so
many options on their tool bars that they take up over a quarter of the screen
height!
Chromeless popup windows are a great way to deliver list information and extra
help for filling in forms without bogging down your pages.
There are many scripts available for creating popups, but sometimes you'll just
want something simple that won't require you to incorporate 100 lines of
JavaScript!
This particular chromeless popup window procedure will work in Netscape and IE
Versions 4+. It will create a link activated window of a fixed size, but will
allow for scrollbars if necessary.
To view a demo, click on the "20 second site survey" link on the right hand
menu of our home page:
http://wwww.tamingthebeast.net
INSTRUCTIONS:
First, create and save a standard page with the information you wish to be
displayed in the popup window. The elements should be placed within a table
structure. Suggested width of table: around 330 - 350 pixels.
And if you want to create a "Close this Window" statement in the page:
Close this window< d>
If you choose not to include this snippet, visitors will still be able to close
the window via the popup window title bar controls.
Second, the script to launch the chromeless popup window. Copy and paste this
into the HTML (between the <body> and </body> tags) of the page you
wish to launch the popup from (change the properties in capital letters to
suit):
<script> function openpopup(){ var popurl="PATH TO PAGE YOU CREATED"
winpops=window.open(popurl,"","width=390,height=490,scrollbars,") }
</script> <!-- End -->
You can change width and height to suit, but don't make it too narrow,
otherwise site visitors will need to scroll horizontally to view the content.
Too wide a setting will cover the majority of the screen area for those users
still running 640x480 resolution.
When copying scripts like the one above, ensure you paste it into Notepad
first; then copy it again and transfer it to your HTML. Copying and pasting
code straight from a web page can produce some pretty weird results.
Next, the hyperlink to use to engage the script (Change the properties in
capital letters to suit):
CLICK HERE
Done!
If you are looking for a script to create an automated site entry or site exit
popup window, check out our free javascript code generators section,
specifically:
http://www.tamingthebeast.net/scripts/windowsframesjavascripts.htm
but, use with caution - I don't know many visitors who upon entering a site and
seeing a popup window yell, "whoopeee!!!"
Michael Bloch michael@tamingthebeast.net
http://www.tamingthebeast.net Tutorials, web content and tools,
software and community. Web Marketing, eCommerce & Development solutions.
_____________________________________________
Copyright information....If you wish to reproduce this article, please
acknowledge "Taming the Beast" by including a hyperlink or reference to the
website (www.tamingthebeast.net) & send me an email letting me know. The
article must be reproduced in it's entirety & this copyright statement must
be included. Thanks. Visit www.tamingthebeast.net to view other great articles
FREE for reproduction!
About the Author
Michael is an Australian Information Technologies trainer and web developer.
Many other free web design, ecommerce development and Internet articles,
tutorials, tools and Subscriptions are available from his award winning site;
Taming the Beast.net (http://www.tamingthebeast.net)
