QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

Have I Ever Mentioned That I <3 jQuery?

Posted on January 1, 2008 at 2:13 AM in General, jQuery

I don't know if I've ever mentioned it before, but I really love jQuery. It's such a lightweight, yet very powerful tool. There are so many really cool things that you can do with jQuery, and I'm really no authority on the matter, but here is one really basic task that I use it for.

Many times a client will want off-site links to open up in a new window. Simple enough task, I know. Way back when in the "dark ages of the internets", we wrote markup kinda like this:

1. <a href="http://mylink.com/" target="_blank">click me!</a>

However, when working with XHTML Strict DTDs, the target attribute is not permitted. So people just used a little bit of JavaScript, like so...

1. <a href="http://mylink.com/" onclick="window.open(this.href); return false;">click me!</a>

Slightly more code to write, but it still works just fine. The problem is, neither of these solutions is all that particularly elegant. Besides, who wants to have the pressure of remembering all to add that kinda crap to every off-site link in all of your pages? Worse yet, what happens if later on the client decides he/she wants the links to stay in the same browser window?

jQuery to the rescue!

1. <a href="http://mylink.com/">click me!</a>

"Now wait just a doggone minute there, Quack! That markup has absolutely zero indication of opening in a new window!"

Correct you are! That's just basic markup. Ain't it a wonderful thing?

"Yeah, it's nice and clean, but does it produce the desired result?"

With this nice little jQuery script, it damn sure does.

1. /* external links */
2. $(document).ready(function() {
3. $("a").click(
4. function() {
5. var href = $(this).attr('href');
6. var a1 = href.split("quackfuzed.com");
7. if ( a1 == href ) {
8. window.open(href, 'QuackFuzedOffsite');
9. return false;
10. }
11. }
12. );
13. });

So what did we do here? Basically, we told the browser that any anchor that is clicked on, split it using our domain name, and if we end up with two identical strings, it's an off-site link, so open up the new window. Schweeet!

Be sure to check out all of the jQuery plugins as well. They are pretty spectacular, in my opinion. And the jQuery list is one of the most active community lists that I'm subscribed to.

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 1/2/08 at 11:28 AM, ColdFusion Ninja said:

One of my new years resolutions is to learn jQuery and apply it whenever possible. I forget that it can quickly and cleanly do many JS functions and I just have to keep that in the back of my mind when coding.

On 1/2/08 at 5:24 PM, Andy Matthews said:

Wouldn't it have been easier to simply test for the http(s) in a link?

You could also get fancy and add a little icon after (or before) a link to indicate that it opens in a new window.

On 1/2/08 at 5:29 PM, Matt Quackenbush said:

@ CF Ninja - Let us know how soon you break that new year's resolution ;-)

@ Andy - If you're asking what I think you're asking (e.g. 'is the link a full URL, beginning with http(s)://'), that would work with any application that does not use full links. However, if you're utilizing certain flavors of SES URLs, every link has the full link, so every link would open in a new window.

On 1/2/08 at 5:34 PM, Andy Matthews said:

I am asking what you thought I was. But, not every URL, even ones in an SES environment, hrequire the http://.

It's simple enough to reference an SES URL absolutely (or from doc root) like so:

This link:
http://www.andyandjaime.com/index.cfm/searchdate/2...

referenced like so:
/index.cfm/searchdate/2008-01

would work on any page of my site, no matter how deep you currently were in the dir structure.

Your method works perfectly fine, just throwing out an alternate idea is all.

On 1/2/08 at 5:45 PM, Andy Matthews said:

For example, this code should work fine anywhere:

$("a").click(function() {
   var test = $(this).attr('href').indexOf('://');
   if ( test != -1) {
      window.open($(this).attr('href'), 'NuWindow');
      return false;
   }
});

And it has the benefit that your domain name isn't hardcoded.

On 1/2/08 at 5:45 PM, Matt Quackenbush said:

@ Andy - Point well taken. Yet another fine example of "there's more than one way to skin a cat". I am brand new to SES URLs myself (using them, not knowledge of their existence), and the implementations that I have seen (as my guides) all use full URLs. Hence the reason I wrote the script the way I wrote it. I obviously have more studying to do! :-)

On 1/2/08 at 5:48 PM, Andy Matthews said:

Glad I could help out. I love jQuery and I'm constantly amazed at it's terseness. The code I posted is shorter than yours, but I'm sure that some of the guys on the jQ list could cutmine in half!

[Add Comment]