Blog of Guido Smeets Front-end Developer

Latest Posts

• XHTML and target _blank
• It's Alive!
• Full Archive >

Topics

• jquery (1)
• javascript (1)
• development (1)
• random (1)

XHTML and target _blank

Development, jQuery / Finwize

99% of the website that I code are in XHTML 1.0 Strict. And as many of you will know this sharpens the rules of what tags and attributes you can use in your XHTML document. One of the things that isn't allowed in the strict version is the target _blank attribute.

For those who don't know, when using target _blank inside a link the link will open in a new window.

Opening links in a new window (or tab) is a fairly much discussed item. It is actually mentioned by the usability guru Jakob Nielsen in: The Top Ten Web Design Mistakes of 1999.

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!

So before someone mentions it, yes i know this isn't a best practise for usability/accessibility. But most clients i work for like a new window to open when a user clicks a link that goes to an external website. And now a days this is actually common use on the web.

To achive this and to validate in XHTML strict i'm gonna use the awesome jQuery library. If this is the only script that you are going to use it's recommended that you transform this script to native javascript so you don't need to include a full size library.

This script will check all your links within your page, if a link goes to an external page it sets an target _blank with javascript. Next to that we will set an icon next to the link with CSS so visitors can see wich links are referring to external pages.

                    
                    $("a[href^='http:']").not("[href*='" + window.location.host + "']").attr('target','_blank');
                  	
				

If you are using AJAX to load content dynamicly into your page, you should try out this:

                    
                        $("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function(){
                            $(this).attr('target','_blank');
                        });
                   
				

The .live event makes sure the new loaded content will also be checked for links, and where nescecery transformed.

Now for adding an icon to our link we just need to add the following code:

.addClass('external');

This adds the class external to the link. We can now use this class to style the link via CSS.

So our jQuery code is:

                    
                        $("a[href^='http:']").not("[href*='" + window.location.host + "']").attr('target','_blank').addClass('external');
                    
				

Now we create the CSS style:

                    
                        a.external {
                            padding-right: 20px;
                            background: (url: ../images/icons/external.png) no-repeat center right;
                        }
                    
				

That's actually it, with just these few lines of code you should get it working.

Comments

Make a comment

It's not possible to leave a comment yet! Work in progress.

Name:

insert your name

Email:

insert your emailadress

Website:

insert your website adress

Comment:

insert your message

All fields are mandatory, email won't be published.
Avatars will be loaded for people who use gravatar.