Dynamic Drive DHTML Scripts- Open select links in new window

New Revised CSS Library Forums Web Tools

Open select links in new window

Author: Dynamic Drive

Description: This one of a kind script makes it easy to specify certain links on your page open in a new window, and with greater control than HTML's "target" attribute. You can designate arbitrary links- or even entire groups of links- open in a new window by doing one of the following:

1) Give the link a class="nwindow" attribute.
2) Or, to get an entire group of links to open in a new window, wrap them all inside a container with class="nwindowcontainer", such as <div class="nwindowcontainer">links here</div>.

And to make it all worthwhile, this script supports two modes of operation- automatic or manual. In the former, the designated links (by doing one of the above steps) will automatically open in a new window. In "manual" mode however, visitors use a checkbox to toggle between the designated links opening in a new window or current instead. Control and versatility is what this script is all about!

Demo: (mode 2 "manual" shown)

Last two links below given class="nwindow"	Links below wrapped in <td class="nwindowcontainer">
JavaScript Kit Coding Forums CSS Drive * TheFreeSite *	Google * Yahoo * MSNBC * BBC News *

Directions:

Simply add the following script to the <BODY> section of your page, at the very end following all links on the page:

Select All
<script type="text/javascript"> /*********************************************** * Open select links in new window script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ /*****************USAGE NOTES:***************** Add: <form name="targetmain"><input type="checkbox" name="targetnew" checked onClick="applywindow(targetlinks)">Open designated links in new window</form> anywhere on your page to automatically switch the script to manual mode, whereby only checking a checkbox will cause designated links to open in a new window. Customize the form as desired, but preserve key information such as the name attributes and onClick command. Remove form to switch back to auto mode. ***********************************************/ var linktarget="_blank" //Specify link target added to links when set to open in new window var formcache=document.targetmain function applywindow(){ if (typeof targetlinks=="undefined") return if (!formcache || (formcache && formcache.targetnew.checked)){ for (i=0; i<=(targetlinks.length-1); i++) targetlinks[i].target=linktarget } else for (i=0; i<=(targetlinks.length-1); i++) targetlinks[i].target="" } function collectElementbyClass(){ if (!document.all && !document.getElementById) return var linksarray=new Array() var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className=="nwindow") linksarray[inc++]=alltags[i] if (alltags[i].className=="nwindowcontainer"){ var alldivlinks=document.all? alltags[i].all.tags("A") : alltags[i].getElementsByTagName("A") for (t=0; t<alldivlinks.length; t++) linksarray[inc++]=alldivlinks[t] } } return linksarray } if (formcache && formcache.targetnew.checked) //overcome IE bug, manually check checkbox that has "checked" attribute setTimeout("document.targetmain.targetnew.checked=true",100) var targetlinks=collectElementbyClass() applywindow() </script>

Usage notes

As noted, the script lets you designate links to open in a new window using two ways:

1) Give the link a special class:

<a href="http://www.dynamicdrive.com" class="nwindow">Dynamic Drive</a>

2) Wrap groups of links in a container with a special class:

<div class="nwindowcontainer">
link 1
link 2
etc
</div>

Furthermore, you have the option of letting the visitor decide whether these links should open in a new window, by adding a checkbox to your page:

<form name="targetmain"><input type="checkbox" name="targetnew" checked
onClick="applywindow(targetlinks)">Open designated links in new window</form>

The mere presence of this checkbox will cause the script to switch to "manual" mode.