JAVASCRIPT: 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

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.

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 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 –>


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:


var exit=true;
function leave() {
if (exit)
window.open(‘http://www.website.com/popup.html&#8217;,”,
‘toolbar=no,menubar=no,scrollbars=yes,resizable=yes,
location=no,height=400,width=400’);
}
// End –>


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&#8221; 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 explicitly. 

Advertisements