Some XHTML surprises

I haven't played with raw HTML (or XHTML in this case) in a while. It's been even longer since I did a basic site with frames. Anyway, I discovered that the new XHTML (strict) specs does not allow you to use the "target" element in the HREF tag anymore. So I search around for a solution, and thanks to many people contributing on this topic all over the web, I finally used the advice from sitepoint.com.

Assuming you had the following frame set:

<frameset rows="25%,50%,25%">

<frame name="header" src="header.html">
<frame name="main" src="main.html">
<frame name="footer" src="footer.html">


Normally you would create a link something like this:
<a href="link.html" target="main">click here</a>
Now, depending on the target, our new solution will use a JavaScript piece to handle the "target" in the XHTML code. In your HEAD area, link to a JavaScript file with the following content:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "main")
anchor.target = "main";
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "header")
anchor.target = "header";
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "footer")
anchor.target = "footer";
window.onload = externalLinks;
As you can see from the above code, the "href" element with the "rel" element will be targeted to the appropriate target. So your link will now change to:
<a href="link.html" rel="main">click here</a>

And that's it !

Comments: Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?