Unobtrusive JS :: A Project

The idea here is to sift through all the links on a page, and add some stuff to them. Stuff like helpful titles, external link icons, etc. It is almost worthless in IE right now, because I can’t be bothered to test for supported methods and such, but I’ll get around to cleaning it up.

To test it out, save the code below as linker.js (who knows where I get these names). Then make a very basic file with some links to internal pages, external pages, etc. Then include this file in at the top. It will help if you have some qbullet icons in a subfolder called qbullet…hmm…don’t really remember where I got those. I’ll post a URL when I find it.


//Gets your links straightened out:
// 1. sets up events to show and hide helper window
// 2. sets title if there isn't one
// 3. sets rel depending on whether link is internal or external
// 4. for external links, removes href and sets onclick to call warning function
// showWarn('theUrl');
// 5. appends helper icon to link
function fixLinks()
{
var allLinks = document.getElementsByTagName('a');
for (i=0;i<alllinks .length;i++)
{
if(allLinks[i].getAttribute('href'))
{
theRef = allLinks[i].getAttribute('href');
currRef = location.host;
allLinks[i].setAttribute('onmouseover','showHelper(this);');
allLinks[i].setAttribute('onmouseout','hideHelper(this);');
if(!allLinks[i].getAttribute('title'))
{
allLinks[i].setAttribute('title',theRef);
}
if(theRef.indexOf(currRef) == -1)
{
allLinks[i].setAttribute('rel','outside');
}
else
{
allLinks[i].setAttribute('rel','inside');
}
if(allLinks[i].getAttribute('rel') == "outside")
{
what = "showWarn('"+theRef+"');";
allLinks[i].setAttribute('onclick',what);
theRef = "#";
theImg = document.createElement('img');
theImg.setAttribute('src','qbullets/remote_a.gif');
theImg.setAttribute('alt','outside link');
theImg.setAttribute('hspace','1');
theImg.setAttribute('border','0');
allLinks[i].appendChild(theImg);
}
}
}
}
//This creates and shows the helper div
function showHelper(ourRef)
{
helpDiv = document.getElementById('helpBox');
if(!helpDiv)
{
helpDiv = document.createElement('div');
helpDiv.setAttribute('id','helpBox');
ourRef.parentNode.appendChild(helpDiv);
}
whereX = ourRef.offsetLeft;
whereY = ourRef.offsetTop;
helpDiv.style.display = "block";
helpDiv.style.position = "absolute";
helpDiv.style.backgroundColor = "Black";
helpDiv.style.color = "White";
helpDiv.style.padding = "10px";
helpDiv.style.borderWidth = "2px";
helpDiv.style.borderColor = "Gray";
helpDiv.style.borderStyle = "solid";
helpDiv.style.left = (whereX + 30)+"px";
helpDiv.style.top = (whereY + 40)+"px";
helpDiv.style.fontWeight = "bold";
theLink = ourRef.getAttribute('href');
theRel = ourRef.getAttribute('rel');
theTitle = ourRef.getAttribute('title');
newText = "This is a link that goes " + theRel + " our website.<br />"+theTitle;
helpDiv.innerHTML = newText;
}
//This hides and/or destroys the helper div
function hideHelper(ourRef)
{
helpDiv = document.getElementById('helpBox');
helpDiv.style.display = "none";
}
//We have to run our link fixer on load
window.onload=function()
{
fixLinks();
}

Latest Entries

Tag Cloud



www.flickr.com
smithellis' items Go to smithellis' photostream