SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    external.js help!

    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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neil, you need to show us what's in external.js!
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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

  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So ... external.js doesn't even exist, nevermind have any JavaScript code in it?
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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

  7. #7
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •