SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone help me with this <a> replacement function.

    Hi,

    Because I am using Google analytics across multiple domains it requires me to change some of my links (not all of them)

    So I will need to change links like this:

    Code:
    <a href="https://www.secondsite.com/?login=parameters">Log in Now </a>
    To THIS:

    Code:
    <script type="text/javascript"> document.write( '<a href="javascript:pageTracker._link(\'https://www.secondsite.com/?login=parameters\');">Log in Now</a>' ); </script>

    I am not a javascript wiz and am not too sure how to go about doing this....

    I thought somebody better than me (at JS) could help me come up with an onload function which would go through the document and search for <a>'s with a class of 'othersite' (Does not really matter what the class is - but I do need some easy way to identify the ones which need the process done on them) or watever and then process the link to make it into the above.

    I think it's best to make it as unobtrusive as possible etc...

    Anyone who knows how to acheive this would be a massive help!!!

    Thanks for any help in advance
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It is a bad thing to use the javascript pseudo protocol because it breaks several things. Instead, you should assign an onclick event that will do the appropriate work for you.

    Place the following script at the bottom of the body.

    Code javascript:
    var links = document.getElementsByTagName('a');
    var link;
    for (var i = 0; i < links.length; i++) {
        link = links[i];
        if (link.className.match(/\bothersite\b/)) {
            link.onclick = function () {
                var regex = new RegExp(this.href);
                pageTracker._link(regex);
                return false;
            }
        }
    }
    Last edited by paul_wilkins; Feb 26, 2008 at 17:28.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome pmw57!!!

    I have no real way of testing it but I am sure its fine - I will know if it has worked in 24h when google analytics updates

    (One tiny thing - u've used a square bracket instead of a curly one on the link.onclick function...)

    Seriously pmw.. thank you

    ps... What is '/\b'???
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JimmyPaddy View Post
    Awesome pmw57!!!

    (One tiny thing - u've used a square bracket instead of a curly one on the link.onclick function...)
    Thank you and yes, that is supposed to a curly bracket. The code sample above has been updated to reflect that.

    Quote Originally Posted by JimmyPaddy View Post
    ps... What is '/\b'???
    That's a word boundary. It ensures that the word we're looking for isn't a part of another word, and also means that you can apply other class names on to that element without causing any trouble.

    In other words, it a best-practice technique for targeting a specific class name.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57, I just found out recently that a word boundary isn't bulletproof.

    Consider...

    Code:
    >>> anchor.className = 'one-two three';
    "one-two three"
    >>> anchor.className.match(/\bthree\b/)
    ["three"]
    >>> anchor.className.match(/\bone-two\b/)
    ["one-two"]
    >>> anchor.className.match(/\bone-two\b/)
    ["one-two"]
    >>> anchor.className.match(/\bone\b/)
    ["one"]
    >>> anchor.className.match(/\btwo\b/)
    ["two"]
    >>> anchor.className.match(/\bfoo\b/)
    null
    @ http://www.robertnyman.com/2005/11/0.../#comment-1583

    Here's the custom function that I use (I believe the indexOf method is from Stuart Langridge's book - DHTML Utopia).

    Code:
    	    function getElementsByClass(class, node, tag) {
    		node = node || document;
    		var els = tag || '*';
    		var elements = node.getElementsByTagName(els);
    		var matchedArray = [];
    		for (var i=0, l=elements.length; i<l; i++) {
    		    if ((' ' + elements[i].className + ' ').indexOf(' ' + class + ' ') >= 0) {
    			matchedArray.push(elements[i]);
    		    }
    		}
    		return matchedArray;
    	    }

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That's a nice solution. Like many other people, I'm used to not using hyphens as class names because they in javascript aren't allowed as identifiers, but in CSS they are.

    So if you're in the habit of using hyphens in your class name identifiers, you will be wanting to use more advanced class matching techniques such as the getElementsByClass function.

    The only trouble I forsee with the above code is that IE5 doesn't understand the wildcard attribute '*'

    Happily though, there are some work arounds.
    http://insidedhtml.com/tips/contents/ts16/page3.asp

    I would want to use a slightly different technique than what they use there though. It seems that try/catch would work much better though.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member rofokken's Avatar
    Join Date
    Nov 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since this thread helped me when making a mootools solution to solve the same problem i thought it might be helpfull to post it here.

    Code JavaScript:
    window.addEvent("domready", function()
    {
    	$$('a.analytics_booklink').each( function(el)
      {
     		el.addEvents(
    	  {
    			'click': function()
    			{
    				sLink = el.getProperty('href');
    				if (sLink)
    				{
    					pageTracker._link( sLink );
    				}
    			}.bind(this)
    		});
      });
    });


    In the above example i do not understand the return false wich is also in the onclick event.
    Maybe it's important so if anybody could tell me

    Code JavaScript:
    link.onclick = function () 
    {            
    	var regex = new RegExp(this.href);            
    	pageTracker._link(regex);            
    	return false;        
    }

  9. #9
    SitePoint Member rofokken's Avatar
    Join Date
    Nov 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks, i can understand that but the link already has the href attribute and i think you want to follow the default behavior of the link but only extend it with the given onclick event. The analytics function does not open the url but only logs the click. So if you return false it would not open the link but only log the click with analytics...Is this what you want?

    Regards,

    Robert

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You're dead right. I have just had to look back over the start of the thread because it was so long ago.

    The return false should not be there at all as in this aprticular usage you are wanting to default link action of following the link to still occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member rofokken's Avatar
    Join Date
    Nov 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay maybe you can edit your previous posts because when searching google on "pageTracker._link unobtrusive" this thread is on top. It might help someone... It helped me

  12. #12
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The analytics function will take care of opening the link:

    Code JavaScript:
    _link=function(b,e){
        if(g.I&&b){
            a._initData();
            a.a[n].href=a._getLinkerUrl(b,e) // a.a[n] == window.location
        }
    }

    Edit:


    I sure was an idiot back in February! ... Trying to use the JavaScript pseudo protocol, silly me!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  13. #13
    SitePoint Member rofokken's Avatar
    Join Date
    Nov 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you are right i see it now. Google talks about this "not unobtrusive" example:

    Code HTML4Strict:
    <a hre="link" onclick="pageTracker._link(this.href); return false;">Order now</a>

    So i guess the mootools code i created is also wrong, i corrected it:

    Code JavaScript:
    window.addEvent("domready", function()
    {
    $$('a.analytics_booklink').each( function(el)
      {
     		el.addEvents(
    	  {
    			'click': function(e)
    			{
    				e.stop();
    				sLink = el.getProperty('href');
    				if (sLink)
    				{
    					pageTracker._link( sLink );					
    				}
    			}.bind(this)
    		});
      });
    });

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rofokken View Post
    Okay maybe you can edit your previous posts because when searching google on "pageTracker._link unobtrusive" this thread is on top. It might help someone... It helped me
    I had the same idea but unfortunately the posts appear to be too old to allow them to be edited, which is a shame.

    It;s great that they were able to help you though.
    Last edited by paul_wilkins; Nov 4, 2008 at 13:32.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •