By Nannette Thacker - 02/04/2001 Updated: 6/4/01
6/4/01 Update: Unfortunately, many people trying to use this function are clueless how javascript works, so they are asking how to make it work without using the two form elements below to populate the width and height of the popup box. Replace the below lines with actual numbers:
document.formtest.testheight.value,
document.formtest.testwidth.value,
Here is an example of use without using the form fields:
POPCLICK with 200 height x 300 width
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', 200, 300, (version4 ? event : null));" ><b>POPCLICK with 200 height x 300 width</b></a> |
Original article: 2/4/2001
The code on this page allows you to create and display smart popups -- popups that will center on your screen, or will popup near your link without popping off the edge of the screen. It also shows how to create a clickable popup or a popup that displays when you hover over the link with your mouse.
When creating a popup, do you ever get tired of having to change your values repeatedly, until you find just the right height and width for your popup? The below form allows you to try different heights and widths. Once you have found a size that fits your text, you may use those sizes to create your popup code.
Use the Test links to test each kind of popup. Then change the sizes and click the Test links again.
The POPCLICK link requires that you click on the link. The test link will display the popup on the screen, near the link. If the link is near the edge of the screen -- left, right, top, bottom -- the javascript code will adjust the position of the popup so that it does not pop off the edge of the screen. The CLICK popups use the onClick event.
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICK</b></a> |
The POPCLICKCENTER test link will display the popup in the center of the screen when you click the link.
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICKCENTER</b></a><br> |
With both of the above links, you must close the window to remove the popup. If you fail to close the screen, however, it will go behind the active window, but selecting the test link again, or another one on your page, will close the previous screen and open the new link. (This keeps the user from having a lot of popup screens hidden behind the active screen.)
The POPUP test link will display the popup near the link, without going off the edge, when you hover over the link. The hover popups, use the onMouseOver event.
<a href="javascript:void(0)" onMouseOver="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup1', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUP</b></a><br> |
The POPUPCENTER test link will display the popup in the center of the screen when you hover over the link.
<a href="javascript:void(0)" onMouseOver="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup2', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUPCENTER</b></a><br> |
Here is an example of the Test POPCLICK falling on the edge of the screen. I'll place several on the screen so that depending on the width of your screen, hopefully one will be on the edge: Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK Test POPCLICK
Scroll your window so that the above line falls at the bottom of the screen, then click the link. You will see how it will pop above the cursor, instead of below the cursor.
Below is the entire code for the above form.
<form name="formtest" action="/articles/articles/javascript/popups.asp" method="post"> Test Width: <input maxlength=3 size=3 type=text value="220" name="testwidth"> Test Height: <input maxlength=3 size=3 type=text value="120" name="testheight"> <br> |
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICK</b></a> |
<a href="javascript:void(0)" onmouseover="window.status='Click for more information'; return true" onClick="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup3', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null));" ><b>Test POPCLICKCENTER</b></a><br> |
<a href="javascript:void(0)" onMouseOver="displayPopup(1, '/articles/articles/javascript/popuptext.asp', 'popup1', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUP</b></a><br> |
<a href="javascript:void(0)" onMouseOver="displayPopup(2, '/articles/articles/javascript/popuptext.asp', 'popup2', document.formtest.testheight.value, document.formtest.testwidth.value, (version4 ? event : null))" onMouseOut="closePopup()"><b>Test POPUPCENTER</b></a><br> |
</form> |
Below is the popup text file.
<HTML> <HEAD> <TITLE>My Popup</TITLE> </HEAD> <BODY> <B>This is a Popup Test</b><P> Now is the time for all good popups to come to the aid of the web programmer. Now is the time for all good popups to come to the aid of the web programmer.<P> </BODY> </HTML> |
And finally, below is the javascript which calculates where to display the popup.
<script language="JavaScript">
<!--
// by Nannette Thacker
// http://www.shiningstar.net
// This script allows you to display a popup that does not pop
// off the edge of the screen if the link is toward the edge
// If the link sits on the edge of the screen, the popup will
// pop the other direction
// also allows a popcenter in the middle of the screen
// -->
var version4 = (navigator.appVersion.charAt(0) == "4");
var popupHandle;
function closePopup() {
if(popupHandle != null && !popupHandle.closed) popupHandle.close()
}
function displayPopup(position,url,name,height,width,evnt)
{
// Nannette Thacker http://www.shiningstar.net
// position=1 POPUP: makes screen display up and/or left,
// down and/or right
// depending on where cursor falls and size of window to open
// position=2 CENTER: makes screen fall in center
var properties = "toolbar=0,location=0,height="+height
properties = properties+",width="+width
var leftprop, topprop, screenX, screenY, cursorX, cursorY, padAmt
if(navigator.appName == "Microsoft Internet Explorer")
{
screenY = document.body.offsetHeight
screenX = window.screen.availWidth
}
else
{ // Navigator coordinates
// screenY = window.outerHeight
// screenX = window.outerWidth
// change made 3/16/01 to work with Netscape:
screenY = screen.height;
screenX = screen.width;
}
if(position == 1) // if POPUP not CENTER
{
cursorX = evnt.screenX
cursorY = evnt.screenY
padAmtX = 10
padAmtY = 10
if((cursorY + height + padAmtY) > screenY)
// make sizes a negative number to move left/up
{
padAmtY = (-30) + (height*-1);
// if up or to left, make 30 as padding amount
}
if((cursorX + width + padAmtX) > screenX)
{
padAmtX = (-30) + (width*-1);
// if up or to left, make 30 as padding amount
}
if(navigator.appName == "Microsoft Internet Explorer")
{
leftprop = cursorX + padAmtX
topprop = cursorY + padAmtY
}
else
{ // adjust Netscape coordinates for scrolling
leftprop = (cursorX - pageXOffset + padAmtX)
topprop = (cursorY - pageYOffset + padAmtY)
}
}
else // CENTER
{
leftvar = (screenX - width) / 2
rightvar = (screenY - height) / 2
if(navigator.appName == "Microsoft Internet Explorer")
{
leftprop = leftvar
topprop = rightvar
}
else
{ // adjust Netscape coordinates for scrolling
leftprop = (leftvar - pageXOffset)
topprop = (rightvar - pageYOffset)
}
}
if(evnt != null)
{
properties = properties+",left="+leftprop
properties = properties+",top="+topprop
}
closePopup()
popupHandle = open(url,name,properties)
}
//-->
</script>
|