Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Multiple anchors with different rel attribute problem

    Hi,

    I've been using this script to open a page in a new window
    Code:
    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;
    Code:
    <a href="http://alink.com" rel="external" class="menusubitem">A link name</a>
    I wanted to add this script for an overlay.
    Javascript:
    Code:
    $(function() {
    
    	// if the function argument is given to overlay,
    	// it is assumed to be the onBeforeLoad event listener
    	$("a[rel]").overlay({
    
    		mask: 'grey',
    		effect: 'apple',
    
    		onBeforeLoad: function() {
    
    			// grab wrapper element inside content
    			var wrap = this.getOverlay().find(".contentWrap");
    
    			// load the page specified in the trigger
    			wrap.load(this.getTrigger().attr("href"));
    		}
    
    	});
    });
    Code:
    <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.

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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    $("a[rel='#overlay']").overlay({.....})

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Thanks for the reply

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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Hmm. Tried some test code and making the jQuery selector more specific fixes the issue for me here. Could there be anything else on your page causing the issue?

  • Users who have thanked SB65 for this post:

    friz (08-14-2010)

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    73
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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
    Last edited by friz; 08-14-2010 at 08:27 PM.


  •  

    Posting Permissions

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