CWC index .

Javascript - about popup links

one popup link | links inside popup window | more than one popup link | external javascript

Each of the following three links opens in a popup window if Javascript is enabled. If the popup window is left open, the second and third popup links will open in the same popped window. If Javascript is disabled, the links open normally in the same window. This page shows you how you can achieve the same sort of links.    

a javascript to count characters | a javascript to count words | amazing clock javascript

One popup link

one popup link | links inside popup window | more than one popup link | external javascript

To display a popup link, use the following coding. Please look also at the coding for multiple popup links on a page.

Copy the following section and paste it below <body> in your HTML file.

N.B. It is essential that the line breaks stay the same as in the example.

code (between the dotted lines):
-------------------------dotted line-------------------------
<a href="http://link" title="link name"
onclick="window.name='main';
window.open(this,'popup','scrollbars=1,resizable=1,'+
'width=590,height=400,left=20,top=20'); return false;"
onmouseover="setAttribute('title', this.title + ' opens in a popup')">link</a>
-------------------------dotted line-------------------------

Setting Window Name

By placing window.name='main' in the coding for a popup link, you can have links in your popup windows that will open in your main window. (Of course you can name your parent window anything you like.)

Setting Popup Destination

You can safely change the bold sections. By adding this, directly after window.open(, the javascript will call up the same url that is placed after a href=". But with javascript enabled, the link will open in a popup window. Your page visitors will be able to access your link whether javascript is enabled or not. It is absolutely essential that each javascript section of the coding is on one line only in the source code. (ie: no line breaks)

Window Specs

The size of the popup window is determined with the width and height specs. Please remember that there are still some OS set to 800x600. It is inadvisable to make your popup window too large. (Make sure that your visitors will be able to close the window!) The width spec denotes the width of the popup window; the height spec denotes the height of the popup window; left spec is how far from the left margin the popup will be placed; the top spec is how far from the top margin the popup will be placed. Please see more about window specs here.

Title Specs

You can place different text in the title specs (indeed, this is often desirable). The title spec for javascript disabled browsers is placed first in the coding. The title spec for javascript enabled browsers is placed near the end of the coding.

It is okay to leave the first title="" empty. (Make sure the quotation marks are there though.) It just means that when the cursor is placed over the link in a browser with javascript disabled, there will be no specific description of the link.

Escaping Characters

Please note that "(quotation mark), <(lessthan), >(greaterthan) and &(ampersand) are integral to HTML coding. (And '(single quote) and /(forward slash) are integral to javascript coding.) If you wish to display one of those characters in the title spec after onmouseover="setAttribute(', you must use the character entity rather than the character itself. When typing your title spec, you may just want to avoid the use of the characters &, <, >, /, ' and " completely.... Please read more about escaping characters in javascript here and more about character entities here.

About Links inside the Popup Window

one popup link | links inside popup window | more than one popup link | external javascript

Close the Popup Window

It's nice to show a link on a popup window to remind people to close it. Of course, some people choose to disable popups so it's a good idea to fill in the title spec on the anchor tag.

code (between the dotted lines):
-------------------------dotted line-------------------------
<a href="#" onclick="self.close(); return false;" title="or 
return to main page using your browser buttons">Close this Window</a>
-------------------------dotted line-------------------------

Link inside the Popup

You'll see that you can just use regular coding in the popup window so that the link will open in the popup window.


<a href="http://link" title="link name">link to be opened popup window</a>

Link to main window

You may wish to provide a link to return to the main window. And you want to ensure that the link will open correctly whether javascript is enabled or not. Note that this coding has the added advantage in that it is friendly to your viewers who have popups or javascript disabled. For those with javascript enabled, the link will open in the main window. For those with javascript disabled, the link will open normally without causing a new window to open.

code (between the dotted lines):
-------------------------dotted line-------------------------

<a href="http://yourwebsite/mainpage.html" onclick="var w=window.open(this,'main'); w.focus(); return false;">Return to main page</a>

-------------------------dotted line-------------------------

Simultaneous Closing of Popup with Link to Main Window

Be careful about this one. Some of your viewers may have popups disabled but javascript enabled. When they hit that link, their browsers will close and open a new instance of the browser. This is probably not what you want to happen. Make sure you fill in the title spec with a warning of some kind. Again, for those with javascript disabled, the link will open normally without causing a new window to open.

code (between the dotted lines):
-------------------------dotted line-------------------------

<a href="http://yourwebsite/mainpage.html" onclick="self.close(); var w=window.open(this,'main'); w.focus(); return false;" onmouseover="setAttribute('title','the window will close when the link is chosen');">Close this window and return to main page</a>

-------------------------dotted line-------------------------

More than one popup link on a page?

one popup link | links inside popup window | more than one popup link | external javascript

It might be that you have several links that you want to open in the same popup window. You can safely change the sections that are bold. Note that each link will open in the same popup window - the width, height, left and top specs will always be the same as whatever you set in the first part of the code. Please read about setting the size of the popup window. The title that appears on the mouseover will depend on whether javascript is disabled or enabled. The javascript links will have the added phrase "(popup link)". You can change that to whatever you like. There are two parts to the coding for multiple popup links. (Please let "copy and paste" be your friend.)

Copy the following section and paste it below <body> in your HTML file.

N.B. The portion of code from ( to '+ must be on one line (ie: no line breaks). The same goes for the code portion on the next line from ' to );.

This first part of the coding goes above </head>.

code (between the dotted lines):
-------------------------dotted line-------------------------
<script type="text/javascript" language="javascript">
<!-- //hide from older browsers...
/* 
   many thanks to the folks at http://www.codingforums.com/
   for fixing this script so that it works properly 
*/

// make each link open in same window
function openLink(objLink) { // to do with onclick
var w=window.open(objLink, 'popup', 'scrollbars=1,resizable=1,width=680,'
+'height=465,left=20,top=20'); 
w.focus(); // make popped window open on top of other windows
return false;
}

/* add extra phrase to title in mouseover message */
function opensetAttribute(objLink){ // to do with mouseover
var addStr = " \(popup window\)"; // remember to add leading space
if (objLink.title.indexOf(addStr)==-1) { 
objLink.title = objLink.title + addStr; // add extra phrase 
('target','_blank'); // open in new window
 }
}
// -->
</script>
-------------------------dotted line-------------------------

If you haven't already done so, please read about escaping characters in javascript.

The coding for the links goes below <body>:

code (between the dotted lines):
-------------------------dotted line-------------------------

<a href="http://link1" title="link name 1"
onclick="return openLink(this);"
onmouseover="return opensetAttribute(this)">link name 1</a>

<a href="http://link2" title="link name 2"
onclick="return openLink(this);"
onmouseover="return opensetAttribute(this)">link name 2</a>

<a href="http://link3" title= [etc. etc.]

-------------------------dotted line-------------------------

Using an external javascript

one popup link | links inside popup window | more than one popup link | external javascript

You can also put the first part of coding for multiple popup links into an external javascript. Copy the following section and paste it into a text editor.

N.B. The portion of code from ( to '+ must be on one line (ie: no line breaks). The same goes for the line from ' to );

code (between the dotted lines):
-------------------------dotted line-------------------------
/* 
   many thanks to the folks at http://www.codingforums.com/
   for fixing this script so that it works properly 
*/

// make each link open in same window
function openLink(objLink) { // to do with onclick
var w=window.open(objLink, 'popup', 'scrollbars=1,resizable=1,width=680,'
+'height=465,left=20,top=20'); 
w.focus(); // make popped window open on top of other windows
return false;
}

/* add extra phrase to title in mouseover message */
function opensetAttribute(objLink){ // to do with mouseover
var addStr = " \(popup window\)"; // remember to add leading space
if (objLink.title.indexOf(addStr)==-1) { 
objLink.title = objLink.title + addStr; // add extra phrase 
('target','_blank'); // open in new window
 }
}
-------------------------dotted line-------------------------

Save the file as popup.js.

Copy the following section and paste it above </head> in your HTML file.

code (between the dotted lines):
-------------------------dotted line-------------------------

<script src="popup.js" type="text/javascript" language="javascript"></script>

-------------------------dotted line-------------------------

The coding for the links goes below <body>:

code (between the dotted lines):
-------------------------dotted line-------------------------
<a href="http://link1" title="link name 1"
onclick="return openLink(this);"
onmouseover="return opensetAttribute(this);" 
onmouseout="">link name 1</a>

<a href="http://link2" title="link name 2"
onclick="return openLink(this);"
onmouseover="return opensetAttribute(this);" 
onmouseout="">link name 2</a>

<a href="http://link3" title= [etc. etc.]
-------------------------dotted line-------------------------

Again, you can safely change the sections that are bold. Note that each link will open in the same popup window - the width, height, left and top specs will always be the same as whatever you set in the first part of the code. Please read about setting the size of the popup window. The title that appears on the mouseover will depend on whether javascript is disabled or enabled. The javascript links will have the added phrase "(popup link)". You can change that to whatever you like. There are two parts to the coding for multiple popup links. (Please let "copy and paste" be your friend.) If you haven't already done so, please read about escaping characters in javascript.

© llizard 2004, 2007 ( last modified 11 June 2009)

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page