Hello,

I would like all external links to my website open in new browser window and when the user clicks on the external link a popup message should be dispalyed.

"You are about to leave the main site & will be directed to external website. Close the new window to return to this site"

When user clicks "OK" it should proceed and if user clicks "Cancel" it should stay on my main site

Is this possible my modifying template.php in someway ?

Thanks a lot in advance.

Comments

mooffie’s picture

If you're using Drupal 5.0, you can use the following JS code to visually mark external links:

$(function() {
	$('a[@href^=http').not('[@href*=XXX]').addClass('external-link');
});

(replace 'XXX' with your domain name.)

I won't show you how to actually pop alert messages, because I think it would be horrible for your users. You can extend on the above code.

taherk’s picture

Thanks for the reply...

But i am not sure where this code will go to...will it be in template.php

______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com

mooffie’s picture

It's a Javascript code. For a start, put it in your 'drupal.js'.

The code is for drupal 5.0, because it utilizes the new jQuery library (that's the '$' you see there).

(But you can use it with drupal 4.7 too, provided you install jquery47 and then change all '$' to 'JQ'.)

What the code does?

It adds the 'external-link' class (think CSS) to each absolute link which doesn't contain your domain name.

You're supposed to style this class in your 'style.css'. For starter, put the following in your style sheet:

.external-link {
background: red;
}

Later you can make it fancier: a common design for external links is to have a little icon beside them.

BTW, I forgot to make these links open in a new window, but it's easy and I'll do that -- if everything else here works for you.

taherk’s picture

Thanks for the details and your help, I entered this code in my drupal.js

$(function() {
$('a[@href^=http').not('[@href*=www.techpoint.in]').addClass('external-link');
});

and edited the style.css for garland theme to enter

.external-link {
background: red;
color:red;
}

Expecting to see the red thick like but nothing happened... what am i doing wrong.... sorry i havent worked much on JS before.
______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com

mooffie’s picture

I entered this code [...] but nothing happened

Arghh... I made a typo. I forgot the closing brackets after the "http".

The correct code is:

$(function() {
  $('a[@href^=http]').not('[@href*=techpoint.in]').addClass('external-link');
});

(I also removed your "www." prefix, which isn't necessary.)

It should work now. I tested it on both Opera and Firefox. If it doesn't work for you, please provide a link in your reply.

Let me know how it's going.

taherk’s picture

It did not work, can you check at http://techpoint.in/path

______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com

mooffie’s picture

I see the problem. If you look at the source of the page, you'll notice that the Javascript files are not linked in (I.e., no <script src="..."> tag is present). That's because no module triggers this linking, for the main page.

I'll post a solution soon.

mooffie’s picture

Ok, here's how to do it.

1. Create a file 'taherk.js' in your 'misc' folder.

2. Move the above javascript code into this file.

3. Append the following line to your 'template.php' file (which is in the 'garland' folder):

drupal_add_js('misc/taherk.js', 'theme');

That's all.

I just did this on my website and I'm going to send you the link (privately, via your contact form).

taherk’s picture

That worked.

Thanks a lot, now how do I make it open in new window...

______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com

mooffie’s picture

how do I make it open in new window...

To open in a new window, replace the above javascript code with the following:


$(function() {
  $('a[@href^=http]').not('[@href*=techpoint.in]')
    .addClass('external-link')
    .click(function() {
      window.open(this.href, '_blank');
      return false;
    });
});

Another issue:

Coloring external links in red is ugly. A common design for such links is to display a little icon next to them. You do this with CSS: use the background-image property (and the padding-left or padding-right in order not to write the text of the link over the icon).

taherk’s picture

Super

This works great and thanks a lot for you tip on adding icon... I will work on that.
______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com

geste’s picture

Just want to say thanks for whipping up this javascript. I just put it in place and it works great. Since this for a departmental intranet, I may just publicize a general rule that anyhing not on myserver.domain opens another window/tab (and forego the icon/colors).

Jim

halftone’s picture

I am running JQuery with 4.7 (for the Nodeorder module) so tried

JQ(function() {
  JQ('a[@href^=http]').not('[@href*=tonysleep.co.uk]')
    .addClass('external-link')
    .click(function() {
      window.open(this.href, '_blank');
      return false;
    });
});

It does cause an external link to open in a new browser window but the external link is ALSO opened over the top of my site in the original window. It does not add the 'external-link' style class either.

Regards
Tony Sleep http://tonysleep.co.uk

cylan97’s picture

Hi,

I'm pretty new to drupal and has just sent up a testing site for my company. I am using "bluemarine" as the theme where it does not have a template.php file.

Can you tell me where I should add this javascript code in the system? Thanks.

CY

halftone’s picture

Template.php doesn't exist by default but you can create one and Drupal will read it if it exists. Just 'save as template.php' a text file in the folder for your theme (/themes/bluemarine), containing the line described up thread.

Not that this stuff is working for me - if I use the JS it ignores 'rel="external" and if I use the JQ version it opens a new window as well as opening the linked page over the top.

Regards
Tony Sleep http://tonysleep.co.uk

cylan97’s picture

Thanks. It works.

ursnagi1’s picture

Hi,

I'm using bluemarine theme in my drupal site so where i have to place my drupal_add_js('misc/taherk.js', 'theme'); code?

Please help me as soon as possible.

Nagendran Neelamegam
NJAY Consulting Company

mooffie’s picture

There are now modules that do all this for you. Please see my followup:

http://drupal.org/node/105248#comment-268438

Marandb’s picture

I also thank you for putting this together. This has solved a LONG standing issue I have had on my plate.

Thanks,
Marandb

Jim@drupal.be’s picture

works perfectly, shouldn't this be added tot the handbook somewhere.

There are no stupid questions. Only stupid anwsers.

Chill35’s picture

Another solution that makes no use of Javascript is to use CSS attribute selectors, but not for opening windows, just for styling.

However, this pure CSS (alternate) solution is not suitable for intranet, as attribute selectors are not supported in IE6. The CSS attribute selector solution works in IE7 and most other browsers.

It involves adding 2 CSS rules to style.css, in that order :

a[href^="http:"] {
 /* special styling for external links */
}
a[href*="myWebsite.com"] {
 /* styling for internal links, to undo previous styling... */
}

^= is a substring matching attribute selector. It selects elements (anchor elements in this example) that have an attribute that begins with letters some string

*= is a substring matching attribute selector. It selects elements that have an attribute that contains a bunch of letters in that order: some string

Thanks for the great info, Mooffie.

[edit] I improved on the CSS rules based on Mooffie's jquery code!

To Mooffie, you've really got me interested in jquery with that very simple example. Thanks.

Caroline
More info on attribute selectors
Who am I | Where are we
11 heavens

concowboy’s picture

This use to work and all of a sudden it stopped .. Any suggestions? I looked over the code and
everything is as what was posted here.

Thanks....

from template.php

drupal_add_js('misc/taherk.js', 'theme');

from the taherk.js

$(function() {
  $('a[@href^=http]').not('[@href*=consumercowboy.com]')
    .addClass('external-link')
    .click(function() {
      window.open(this.href, '_blank');
      return false;
    });
});

www.consumercowboy.com rounding up the best deals on the web !!

concowboy’s picture

Correction it only does not work for the home page. What could be causing this...?

Thanks

cmm324’s picture

Worked great. Thanks for this post.

Chris

bsuttis’s picture

Moofie's snippet wasn't working for me with jquery_update.module installed (jquery 1.1.2), however, the snippet below works great:

$('a[@href^=http]').not('[@href*=localhost]').addClass('external-link').attr('target','_blank');

Change localhost to your domain.

mooffie’s picture

Months passed since I wrote that answer. In the meantime several modules have been written:

http://drupal.org/project/extlink (the newest)

http://drupal.org/project/olf
http://drupal.org/project/urlclass

shadowhitman’s picture

Hi,
Im trying to open a new window only for certain internal link,
it' s only 2 links actually, not much so I don't need an auto.
Can you teach me how to do it?

Thank you very much