View Full Version : Multiple anchors with different rel attribute problem

08-13-2010, 03:12 AM

I've been using this script to open a page in a new window

function externalLinks() {
if (!document.getElementsByTagName && document.getElementById) 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") == "external")
anchor.target = "_blank";
window.onload = externalLinks;

<a href="http://alink.com" rel="external" class="menusubitem">A link name</a>

I wanted to add this script (http://flowplayer.org/tools/demos/overlay/external.html) for an overlay.

$(function() {

// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener

mask: 'grey',
effect: 'apple',

onBeforeLoad: function() {

// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");

// load the page specified in the trigger


<a href="apage.php" rel="#overlay">aPageName</a>

Separately they work fine. But combined the overlay script doesn't work anymore.
I'm guessing that's because they both use the "rel" attribute in the anchor??

If I delete the "rel" from the external link. The Overlay works again. But of course the external link doesn't work then. :rolleyes:

Is there a way to make both work on the same page?
Thank you in advance! :thumbsup:

08-13-2010, 09:31 AM
Well, the clash might be more complex than this, but you could try making your jQuery selector more specific to target elements with rel="#overlay" rather than just elements with any rel attribute:


08-13-2010, 06:45 PM
Thanks for the reply :thumbsup:

It looks like the problem is more complex, because it didn't solve the problem :(
Any other suggestions?

08-14-2010, 08:51 AM
Hmm. Tried some test code and making the jQuery selector more specific fixes the issue for me here (http://www.simonbattersby.com/test/test_overlay.htm). Could there be anything else on your page causing the issue?

08-14-2010, 05:39 PM
Thanks for taking the time to test this.

On another page I use a "Lightbox" gallery which also uses "rel=..." and I have the same problem there with the overlay.

I'll start again with the original overlay script. Maybe I made a mistake somewhere...

Thanks again!

Edit: The lightbox and the overlay both used id="Overlay". I used a different (and nicer) gallery script. So no more problems there :)