Navigation - Open New Browser Windows - Tested in IE7.0, Netscape8.1, Opera9.02, Firefox1.5.0.7 and AOL Explorer1.2

When using strict doctypes the "target" attribute is not allowed for opening new windows. This script will accomplish that task easily and unobtrusively. In other words, the below is not allowed to have a link open in a new window.

We have tested the code in IE7.0, Firefox1.5.0.7, Opera9.02, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> and <BODY> sections. It also makes use of an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="openNewWindows.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

openNewWindows.js File Reconfigurations

On the external file you have uploaded and saved into your directory, there is one reconfiguration that can be made. If you notice in our example
Click Here
after the words "Click Here" there is some text associated with the link "[ file opens in a new window ]". This can be changed or removed if you so desire. See below on where and howto. This section of code is located about half way down in the external ,js file:

/* Add the openInNewWindow function to the onclick event
of links with a class name of "new-window" */

function getNewWindowLinks() {
// Check that the browser is DOM compliant
if (document.getElementById && document.createElement &&
document.appendChild) {
// Change this to the text you want to use to alert the user that a new window will be opened
var strNewWindowAlert = " [ file opens in a new window ]";

For your Information: If you are going to remove all the text associated with the notification that the link (file) opens in a new window, "Do Not remove the quotation marks ( " ") before and after or the link(s) will open in the same window and defeat the purpose of the script. If this is a little unclear, see the below two examples:

Right way var strNewWindowAlert = " ";

Wrong way var strNewWindowAlert =;

<BODY> Section Reconfigurations

In this section, all you need to do is enter into every URL you want this effect to be used the attribute of class="non-html". In other words the link will look something like the below:

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]