POP
- UP WINDOWS
The
big craze all over Cyberspace is the pop-up window. Here's EXACTLY
how to do all kinds...
It
doesn't get much easier than this:
Paste
into HEAD
<SCRIPT
language="JavaScript">
<!--
function my_win()
{
window.open('http://someplace.com/new_page.htm','mywindow',
'width=400,height=200,toolbar=yes,location=yes,directories=yes,
status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,
resizable=yes');
}
//-->
</SCRIPT>
Then
in the body:
<A
HREF="javascript:my_win()">Click
Here</A>
Change
the URL for the page you want to open in the pop-up window,
and specify whatever height and width you'd like. Works great
for linking thumbnails to larger pictures, as your visitors
won't have to travel from one page to the other to view them
both.
Now
we get more complex. Here's the script for an entry pop-up that
works only one time... when they enter.
Entry
Code Pop-Up
Insert
this part of the code into the very top of your web site, between
the
two head tags. It should be below <head> and above the
</head> tag.
Just copy and paste into the HTML.
<SCRIPT
LANGUAGE="JavaScript">
var expDays
= 1; // number of days the cookie should last
var page
= "only-popup-once.html";
var windowprops =
"width=300,height=200,location=no,toolbar=no,menubar=no,
scrollbars=no,resizable=yes";
function
GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" :
("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path))
+
((domain == null) ? "" : ("; domain=" +
domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + ";
expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function
checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);
window.open(page,
"", windowprops);
}
else {
count++;
SetCookie('count', count, exp);
}
}
// End -->
</script>
Insert the below code into the main part of the web site. Just
insert it anywhere
below the </head> tag.
<BODY
OnLoad="checkCount()">
Now
how about an EXIT pop-up?
Here's
the code:
Exit
Code Pop-Up
Insert
this part of the code between the two head tags.
It should be below the <head> tag and above the </head>
tag:
<SCRIPT
LANGUAGE="JavaScript">
var exit=true;
function leave() {
if (exit)
window.open('http://www.website.com/popup.html','',
'toolbar=no,menubar=no,scrollbars=yes,resizable=yes,
location=no,height=400,width=400');
}
// End -->
</SCRIPT>
Insert this anywhere in the web site below the </head>
tag:
<BODY
onUnload="leave()">
When You use a pop-up on exit code, you should also specify
which
links won't cause the popup to appear. For example, you won't
want
a link to your order form to pull up a pop-up box. Insert the
below code
into links you don't want to bring the pop-up.
onclick="exit=false"
This
would make a link look like this in HTML:
<a
href="http://www.biznetstation.com" onclick="exit=false">This
link won't popup</p>
Finally
A TIMED POPUP
<!--
This goes in your body tag -->
<body onLoad="setTimeout(window.close, 3000)">
<!-- Change the number, 3000 = 3 seconds -->
THIS SETS
A TIMER FOR THE POPUP WINDOW
Button
link: <form><input TYPE="button" VALUE="Close
Window"
onClick="window.close()"></form>
<BR>
Text link: <a href="javascript:window.close()"><B>
CLOSE WINDOW</B></a>
<BR>
Image link: <a href="javascript:window.close()">
<IMG SRC="closeme.gif"
BORDER=0
ALT="CLOSE ME"></a>
THESE
ARE BUTTON LINKS (3 TYPES) FOR CLOSING THE WINDOW
<A
HREF="javascript:void(0)"
ONCLICK="open('sample2.htm','miniwin','toolbar=0,location=0,
directories=0,status=0,
menubar=0,scrollbars=0,resizable=0,width=300,height=300')">
Open A Window</A>
HERE'S
A POPUP WITH ALL FEATURES TURNED OFF
A List
of Window Features ( 0=off , 1=on )
» TEST all values set to 1 (on)
» TEST toolbar=0 (back, reload, home, etc.)
» TEST location=0 (url input field)
» TEST directories=0 (favorites)
» TEST status=0 (at bottom of page)
» TEST menubar=0 (file, edit, view, etc.)
» TEST scrollbars=0 (can the person scroll?)
» TEST resizable=0 (can the window be stretched)
» TEST width=600 (width of window in pixels)
» TEST height=400 (height of window in pixels)
» TEST all values set to 0 (off)
<A
HREF="javascript:void(0)"
ONCLICK="open('sample.htm','miniwin','toolbar=1,
location=1,directories=1,
status=1,menubar=1,scrollbars=1,resizable=1,
width=300,height=300')">
Open a Window</A>
WINDOW
ATTRIBUTES
Lastly
I want to leave you with the window.open attributes.
Also a warning. Be careful how you use popups. And where you
use them.
The
supported features are:
alwaysLowered=[yes|no|1|0]
(Navigator 4.0 only)
Specifies whether to create a new window that floats below other
windows, whether it is active or not. This is a secure feature
and must be set in signed scripts.
alwaysRaised=[yes|no|1|0] (Navigator 4.0 only)
Specifies whether to create a new window that floats on top
of other windows, whether it is active or not. This is a secure
feature and must be set in signed scripts.
channelmode=[yes|no|1|0] (Internet Explorer 4.0 only)
Specifies whether to display the window in theater mode and
show the channel band.
dependent=[yes|no|1|0] (Navigator 4.0 only)
Specifies whether to create a new window as a child of the current
window. A dependent window closes when its parent window closes.
On Windows platforms, a dependent window does not show on the
task bar. It also has a narrow title bar, and a smaller "x"
button to close the dependent window.
directories=[yes|no|1|0]
Specifies whether to create the standard browser directory buttons.
In some browsers the directory buttons can be customized by
the user.
fullscreen=[yes|no|1|0] (Internet Explorer 4.0 only)
Specifies whether to display the browser in a full-screen or
normal window. Use Alt+F4 to close the window.
height=number
Specifies the height of the window in pixels. The minimum value
should be 100.
hotkeys=[yes|no|1|0] (Navigator 4.0 only)
Specifies whether to enable most hotkeys in a new window that
has no menu bar. The security and quit hotkeys remain enabled
in any case.
innerHeight=number (Navigator 4.0 only)
Specifies the height, in pixels, of the window's content area.
A signed script is required to create a window smaller than
100 x 100 pixels. This feature replaces height, which remains
for backwards compatibility.
innerWidth=number (Navigator 4.0 only)
Specifies the width, in pixels, of the window's content area.
A signed script is required to create a window smaller than
100 x 100 pixels. This feature replaces width, which remains
for backwards compatibility.
location=[yes|no|1|0]
Specifies whether to display the Location field, the input field
for entering URLs directly into the browser.
menubar=[yes|no|1|0]
Specifies whether to create the menu at the top of the window.
In Internet Explorer, this feature is yes by default. A menu
normally consists of a "File" option, an "Edit"
option, and other browser-specific options.
outerHeight=number (Navigator 4.0 only)
Specifies the vertical dimension, in pixels, of the outside
boundary of the window. A signed script is required to create
a window smaller than 100 x 100 pixels.
outerWidth=number (Navigator 4.0 only)
Specifies the horizontal dimension, in pixels, of the outside
boundary of the window. A signed script is required to create
a window smaller than 100 x 100 pixels.
resizable=[yes|no|1|0]
Specifies whether to display resize handles at the corners of
the window, which enable the user to resize the window. If this
feature is not turned on explicitly, the user cannot resize
the new window.
screenX=number (Navigator 4.0) left=number (Internet Explorer
4.0)
Specifies the distance the new window is placed from the left
side of the screen. In Navigator, to place a window offscreen,
set this feature in a signed scripts.
screenY=number (Navigator 4.0) top=number (Internet Explorer
4.0)
Specifies the distance the new window is placed from the top
of the screen. In Navigator, to place a window offscreen, set
this feature in a signed scripts.
scrollbars=[yes|no|1|0]
Specifies whether to display horizontal and vertical scroll
bars, when the content exceeds the dimensions of the window.
This feature is yes by default.
status=[yes|no|1|0]
Specifies whether to create a status bar at the bottom of the
window. In Internet Explorer, this feature is yes by default.
titlebar=[yes|no|1|0] (Navigator 4.0 only)
Specifies whether to create a window with a title bar at the
top. This feature is yes by default, but can be set to no in
a signed script.
toolbar=[yes|no|1|0]
Specifies whether to display the browser toolbar, with buttons
such as Back and Forward.
z-lock=[yes|no|1|0] (Navigator 4.0 only)
Specifies whether to create a new window that does not rise
above other windows when activated. This is a secure feature
and must be set in signed scripts.
width=number
Specifies the width of the window in pixels. The minimum value
should be 100.
Many
of these features can be either yes or no, 1 or 0. Alternatively,
if you want to turn a feature on, you can simply specify the
feature name in the comma-separated list.
How
the alwaysLowered, alwaysRaised, and z-lock features behave
depends on the windowing hierarchy of the platform. For example,
on Windows, an alwaysLowered or z-locked browser window is below
all windows in all open applications. On Macintosh, an alwaysLowered
browser window is below all browser windows, but not necessarily
below windows in other open applications. Similarly for an alwaysRaised
window.
For
compatibility reasons, you should always specify each feature
explicity.
