Website Development Resources
CHouseLive

Sometimes it might happen that you would like a link to open in a new page. The html code for such an event is to add target="_blank" to the hyperlink, however this does not validate.

Using the JavaScript snippet found on Elanman's Drawers, this demonstration shows how such an event can be achieved while still allowing the page's html to validate. In addition, with CSS we can also add a little image to the link to show that it will open a new page.

• Hyperlink (notice the rel="ext")

  <a href="http://www.google.com" rel="ext">Google</a>

• Link Box

  <dl>
    <dt>Find out more!</dt>
    <dd><a href="http://en.wikipedia.org/wiki/Structure_of_the_Earth" rel="ext">Sturcture of the Earth</a></dd>
    <dd><a href="http://geology.about.com/od/core/a/about_the_core.htm" rel="ext">About the Earth's Core</a></dd>
    <dd><a href="http://scign.jpl.nasa.gov/learn/plate1.htm">Learn about the structure of the Earth</a></dd>
  </dl>

• Styling the "ext" links

  a[target = '_blank']{
    padding-right:15px;
    background: url(images/new-window-link.gif) no-repeat right top;
  }

• Styling the link list

  dl{
    margin: 0;
    padding: 0 0 5px 0;
    background: #E3B9B9;
    width: 300px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 5px 0 #B2B2B2;
    -webkit-box-shadow: 2px 2px 5px 0 #B2B2B2;
    box-shadow:2px 2px 5px 0 #B2B2B2;
  }
  
  dt{
    padding: 10px;
    background: #C77373;
    color: #000;
    text-align: center;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
  }
  
  dd{
    margin:0;
    padding: 5px 10px;
  }

Simply include this script in the head of your document. There after add rel="ext" to any link which you want to open in a new page.

<script type="text/javascript">
  window.onload = function () {
  	var anchors = document.getElementsByTagName('a');
  	for (var i = 0; i < anchors.length; i  ) {
  		if (anchors[i].getAttribute('rel') == 'ext') {
  		anchors[i].setAttribute('target','_blank');
  		}
  	}
  }
</script>

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org