jQuery tips: External Links
Posted Thursday, January 15, 2009 at 8:14 pm
As I mentioned earlier today, I've been learning about jQuery at work during my spare time. I read some documentation on the jQuery website and went through some tutorials both on that site and on others. I've learned quite a bit since I started.
I wanted to share something that I thought was pretty cool. If nothing else, I wanted to save it for later reference for myself. And if someone else finds it useful, that's even better.
Let's say that you add classes to the links you have on your website (whether it's a blog or just a normal website) to indicate external links, such as the following:
Let's also say that you want to add either text or an image to the external links to indicate to your readers that they are links that will take them away from your website. Since they are external links, you probably also want to open the links in a new browser window.
Of course, you can always manually add the text or image after the external links, and you can add target="_blank" or target="windowname". But that just adds more work for you to do. And what if you're lazy?
Well, with jQuery, you can leave your links coded as above and add some code to do the rest of the work for you.
The first think you need to do is include the jquery.js file. If you're looking into jQuery, you probably are familar with how to set up an html page and include that file, so I'm not going to include that code (even though it is only one line).
You then have 2 options ... include the following code between some <script> tags directly on your page or create a separate javascript file and include that. I tend to do that latter to keep my pages clean. Now for the code ...
-
$(document).ready(function() {
-
// add your text or image to the end of the link
-
$("a.external").append("*");
-
-
// make the link open in a new window
-
$("a.external").click(function(){
-
window.open(this.href);
-
return false;
-
});
-
}
Now let's go through the pieces.
-
$(document).ready(function() {
This piece of code is a pretty basic part of jQuery (from what I understand). It is a wrapper (of sorts) that you put around the rest of your code. It's sort of like window.onload() only better. 
It makes your code available as soon as the DOM has finished loading. This means that your code can be executed before any images you have on the page while window.onload() doesn't (at least I think that's the case ... I'm no javascript expert).
-
// add your text or image to the end of the link
-
$("a.external").append("*");
This does what the comment says it does. It finds all of the links that have a class of "external" and adds the text (or image code) to the end of it.
-
// make the link open in a new window
-
$("a.external").click(function(){
-
window.open(this.href);
-
return false;
-
});
This code binds the custom "click" function to the links that have a class of "external". The custom function just opens the url that is in the href attribute in a new window. The return false just keeps the current browser window from following the link.
That's it. It's that simple. I really hope I didn't confuse you completely with my explanation. I also hope that I did the jQuery justice by explaining it the way I did (hopefully correctly). I'm going to try working this into this site some time soon ... at least the image indicators.
I may be doing more posts like this in the future as I find other tidbits that I find useful. They might be simple like this one is, and they may be more complex. It just depends on what I find useful. So consider yourself warned. 
Side note: Wow. This is my third post (here) today. And I even posted an entry on my other blog. That makes this my fourth post in one day. I think this is some sort of record. LOL
