Position of the pop-up window: javascript smart popups that don't pop off screen

Javascript smart popups that don't pop off screen
By nannette Thacker-02/04/2001 updated: 6/4/01

6/4/01 Update:Unfortunately, please 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:

Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
200,
300,
(Version4? Event: NULL); "href =" javascript: void (0) ">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/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/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/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/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/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 return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> 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: Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) ">Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> Test popclick Return true "onclick =" displaypopup (1,
'/Articles/JavaScript/popuptext. asp ',
'Popup3 ',
Document. formtest. testheight. value,
Document. formtest. testwidth. value,
(Version4? Event: NULL); "href =" javascript: void (0) "> 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 abve the cursor, instead of below the cursor.

Below is the entire code for the above form.

<Form name = "formtest" Action = "/articles/JavaScript/popups. ASP "method =" Post "> test width: <input maxlength = 3 size = 3 type = textvalue =" 220 "name =" testwidth "> test height: <input maxlength = 3 size = 3 type = textvalue = "120" name = "testheight"> <br>

<A href = "javascript: void (0)" onmouseover = "window. status = 'click for more information'; return true "onclick =" displaypopup (1, '/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/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/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/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>

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 centervar properties = "toolbar = 0, location = 0, Height =" + heightproperties = Pr Operties + ", width =" + widthvar leftprop, topprop, screenx, screeny, cursorx, cursory, padamtif (navigator. appname = "Microsoft Internet Explorer") {screeny = document. body. offsetheightscreenx = 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. screenxcursory = evnt. screenypadamtx = 10 padamty = 10if (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 (navigat Or. appname = "Microsoft Internet Explorer") {leftprop = cursorx + padamtxtopprop = cursory + padamty} else {// adjust Netscape coordinates for Signature = (cursorx-pagexoffset + padamtx) topprop = (cursory-pageyoffset + padamty)} else // center {leftvar = (screenx-width)/2 rightvar = (screeny-height)/2if (navigator. appname = "Microsoft Internet Explorer") {leftprop = leftvartopprop = Rightvar} else {// adjust Netscape coordinates for scrollingleftprop = (leftvar-pagexoffset) topprop = (rightvar-pageyoffset)} If (evnt! = NULL) {properties = properties + ", Left =" + leftpropproperties = properties + ", Top =" + topprop} closepopup () popuphandle = open (URL, name, properties )} // --> </SCRIPT>