external.js help!

**neil_orr83** · Nov 5, 2007, 03:46

Can I just start by saying that I've only started learning xhtml so am a beginner in the language.

I'm working my way through Sam learning:Xhtml in 24 hours and am need a little help with the rel="external attribute.

I've tried the code written in the book a few times and I just can't get it to work! I've also tried google for an answer but again I can't see anything that I'm doing wrong!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<p>
<a href="http://www.google.com">Search</a>
</p>
<p>
<a href="http://www.google.com" rel="external">Search</a>
</p>
</body>
</html>

I have highlighted the required script and attribute in red. Can somebody see where I'm going wrong please?!

Many Thanks

Neil

**AutisticCuckoo** · Nov 5, 2007, 04:11

Neil, you need to show us what's in external.js!

**neil_orr83** · Nov 5, 2007, 04:26

Originally Posted by AutisticCuckoo

Neil, you need to show us what's in external.js!

You're probably going to laugh at me for asking this but do I need to have a file called 'external.js' somewhere to be able to use the script?!

There was no mention of having to create/download any files in the tutorial I was reading. All I've done is open a notebook file and typed in the code that I pasted in the first post.

Many Thanks

Neil

**siteguru** · Nov 5, 2007, 04:30

So ... external.js doesn't even exist, nevermind have any JavaScript code in it?

**AutisticCuckoo** · Nov 5, 2007, 05:05

We won't laugh at you. You're not expected to be an expert from day one.

Yes, you need that file. The rel="external" attribute does absolutely nothing by itself.

I'd expect external.js to contain JavaScript code that is set to execute once the whole page has loaded. The code would then trawl through the entire DOM tree (the internal representation of the page within the browser) looking for links with a rel="external" attribute. For each link, the code would add an event listener for the click event. The event listener would open a new window for the link's URL and tell the browser it's taken care of the event, so that the browser doesn't attempt to open the same link again in the original window.

**neil_orr83** · Nov 5, 2007, 05:54

Originally Posted by AutisticCuckoo

We won't laugh at you. You're not expected to be an expert from day one.

Yes, you need that file. The rel="external" attribute does absolutely nothing by itself.

I'd expect external.js to contain JavaScript code that is set to execute once the whole page has loaded. The code would then trawl through the entire DOM tree (the internal representation of the page within the browser) looking for links with a rel="external" attribute. For each link, the code would add an event listener for the click event. The event listener would open a new window for the link's URL and tell the browser it's taken care of the event, so that the browser doesn't attempt to open the same link again in the original window.

Thanks for the quick reply. I think I understand you now, I'm just surprised the book hasn't told me I need this file! http://www.informit.com/articles/art...&seqNum=4&rl=1 (This is the chapter I have just read regarding this, have I missed something obvious?).

Do I need to learn how to create the file myself or is it something downloadable?

Many Thanks

Neil

**neil_orr83** · Nov 5, 2007, 05:57

I've just re-read the chapter and I think they are just letting me know there is a javascript workaround but they are just showing me the xhtml used to activate it.

I will have to learn javascript to be able to create the file myself I suspect!

**AutisticCuckoo** · Nov 5, 2007, 06:32

Here's a crude version that does what I believe you're after.

Note, you should change the parameters in the window.open() call inside openWindow() to suit your needs.

Code JavaScript:

var addListener;
if (document.addEventListener) {
	addListener = function(element, eventName, listener) {
		element.addEventListener(eventName, listener, false);
	}
} else if (document.attachEvent) {
	addListener = function(element, eventName, listener) {
		element.attachEvent("on" + eventName, listener);
	}
} else {
	addListener = function(element, eventName, listener) {
		element["on" + eventName] = listener;
	}
}
 
function openWindow(e) {
	e = e || window.event;
	var uri;
	if (typeof e.target != "undefined") {
		uri = e.target.href;
	} else {
		uri = e.srcElement.href;
	}
	window.open(uri, "", "width=400,height=300,resizable=yes,scrollbars=yes");
	if (e.preventDefault) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
}
 
function addHandlers() {
	var links = document.getElementsByTagName("a");
	for (var i = 0; i < links.length; ++i) {
		var rel = links[i].getAttribute("rel");
		if (/(^| )external( |$)/.test(rel)) {
			addListener(links[i], "click", openWindow);
		}
	}
}
 
(function() {
	addListener(window, "load", addHandlers);
})();

Tested in Opera 9, Firefox 2 and IE6.

**neil_orr83** · Nov 5, 2007, 07:57

Thank you so much for your help. I was just worried that there was something I had missed and I didn't want to move on to the next chapter until I understood it!

Once I've finished reading up on xhtml/css and made a few basic sites etc I'm planning on moving on to PHP, possibly ASP.NET. I'm working as an IT Technician at the moment but am really enjoying the prospect of web developing!

Many Thanks, again!

Neil

The SitePoint Forums have moved.

User Tag List

Thread: external.js help!

Thread Tools

Display

external.js help!

Bookmarks

Bookmarks

Posting Permissions