ADVANCED
USES
Article
- How to create simple chromeless popup windows.
Hate 'em or love
'em; popup windows are a constant companion during our Internet surfing.
But 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:
<a href="javascript:self.close()">Close
this window</a></td>
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):
<a href="javascript:openpopup()">CLICK
HERE</a>
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.
One
More Frameless Popup
STEP 1.
Inserting the <script> in
your page
Put the following <script>
</script> in the head
section of your launching page.
Set the variables as indicated
in the script.
<script>
// Amazing Frameless Popup Window
- Version I
// (C) 2000 www.CodeLifter.com
// Free for all users, but
leave in this header
// set the popup window width
and height
var windowW=214 // wide
var windowH=398 // high
// set the screen position where
the popup should appear
var windowX = 260 // from left
var windowY = 100 // from top
// set the url of the page to
show in the popup
var urlPop = "yourpage.html"
// set the title of the page
var title = "This Is A Frameless
Popup Window"
// set this to true if the popup
should close
// upon leaving the launching
page; else, false
var autoclose = true
// ============================
// do not edit below this line
// ============================
s = "width="+windowW+",height="+windowH;
var beIE = document.all?true:false
function openFrameless(){
if (beIE){
NFW = window.open("","popFrameless","fullscreen,"+s)
NFW.blur()
window.focus()
NFW.resizeTo(windowW,windowH)
NFW.moveTo(windowX,windowY)
var frameString=""+
"<html>"+
"<head>"+
"<title>"+title+"</title>"+
"</head>"+
"<frameset rows='*,0' framespacing=0
border=0
frameborder=0>"+
"<frame name='top' src='"+urlPop+"'
scrolling=auto>"+
"<frame name='bottom' src='about:blank'
scrolling='no'>"+
"</frameset>"+
"</html>"
NFW.document.open();
NFW.document.write(frameString)
NFW.document.close()
} else {
NFW=window.open(urlPop,"popFrameless","scrollbars,"+s)
NFW.blur()
window.focus()
NFW.resizeTo(windowW,windowH)
NFW.moveTo(windowX,windowY)
}
NFW.focus()
if (autoclose){
window.onunload = function(){NFW.close()}
}
}
</script>
=================================================
STEP 2.
Triggering the popup window
Call the openFrameless function
from a link, like this:
<a href="javascript:openFrameless()">click
here</a>
==================================================
CLICK
HERE to see the Frameless Popup
BONUS
GOODIES
I try to deliver more
than I promised so here are a few choice web pages for you. They are self-intact
which means you can just load them up to your server.
Site
Search Engine
Web
Search choosing which search engine...and staying at your site.
Menu
Builder ... the name says it all. Just more customer service for traffic
building.
Rate
Our Site... always act like you really care and your visitors may shower
you with gifts!
|
