Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Forums > Open External Forum Links in a New Tab
Mottie (SuperAdmin) 8/1/2011 8:06 PM EST : Open External Forum Links in a New Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Open External Forum Links in a New Tab

GuildPortal admin site link to the original post

This script searches for any link inside the forum posts and makes it open in a new tab/window. Additionally, it adds a css class name of "external-link" so you can style the link differently. In the example below, it adds an external link icon after the link.

Code
Ideally, add the following code to a Free Form Text/HTML widget on the Forums Page. But you could also add it to the Footer HTML (Control Panel > Custom HTML & Script > Footer Area).
<style>
a.external-link {
  background: url(
http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/forum_link.gif) top right no-repeat;
  padding-right:
20px;
}
</style>
<script>
$(function(){
  var guild = 'GuildID=' + getGroupId();
  $('.MessageBodyCell1 a').each(function(){
    if (this.href && !this.href.match(guild)){
      $(this).addClass('external-link').attr('target','_blank');
    }
  });
});
</script>
Customizing
  • Change or remove the background image by modifying the image url in orange. Adjust the padding-right in red to fit the image.
  • If you want to modify the link color, do it as follows:
     .external-link:link { color: #ffcc00; }
     .external-link:hover { color:
    #ffffff; }
     .external-link:visited, .external-link:active { color:
    #ff8800; }
    Modify the link colors in blue as desired.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%