Target Blank for Bootstrap 2.5.1

UKguy

Hi, got 2 vanilla forums and i am using a target blank plugin but i can not seem to be able to use target blank, please advise the easiest and best way to fix the issue.

https://vanillaforums.org/addon/bootstrap-theme

I appreciate your help a lot and hope i can find a fix from this amazing forum!

Thanks guys!

EDIT: should of mentioned the forums: https://seocompanys.xyz/ https://lowpricehosts.com/

vrijvlinder

Have you tested using the default theme ? Can you post a link that has target="_blank" on it but will not open in a new window ?

UKguy

@vrijvlinder said:
Have you tested using the default theme ? Can you post a link that has target="_blank" on it but will not open in a new window ?

Hi, thanks for the reply, yes works on the default theme but not when using the bootstrap theme, is their any code i can add to config.php to fix the issue? Using target blank plugin also on both sites, the bootstrap theme looks so nice and modern really want to keep the theme but the makers would prob take weeks to reply.

vrijvlinder

Bootstrap uses different class and Id names of elements. The TargetBlank plugin uses only javascript to add the target blank part. But the name and class of the element must be included in the script

Here is the code for the target blank plugin:

$.expr[':'].external = function(obj){
return !obj.href.match(/^mailto:/) && (obj.hostname != location.hostname);
};
$(document).ready(function() {
$(".Item .Message a:external").attr("target", '_blank');
$(" .Item .Message a").attr("target", '_blank');
$('#Menu li:first > a').attr('target', '_blank'); //it is .navbar in Bootstrap
$('.MessageList a').attr('target', '_blank'); 
$('#Foot a').attr('target', '_blank'); //this called footer .sticky-footer
$('.AptAdImg a').attr('target', '_blank'); 
$('.Attachment a').attr('target', '_blank'); 
$('.Meta a').attr('target', '_self'); 
$('a.ReactButton.Quote.Visible').attr('target', '_self'); 
});

You need to use a web inspector to find out the class or Id for the elements you are using the plugin on

for example

$('#Menu li:first > a').attr('target', '_blank');

That may not work on Bootstrap Because #Menu is called .navbar

You must replace the ones that do not apply to the theme with the ones that do.

vrijvlinder

I would also replace

$(document).ready(function() {

with this in order to avoid potential js errors

jQuery(document).ready(function($) {

UKguy

@vrijvlinder said:
I would also replace

$(document).ready(function() {

with this in order to avoid potential js errors

jQuery(document).ready(function($) {

I did this as quoted above

Hi, thanks again for your help, the other bit mentioned sounds quite tricky, i got it working on lowpricehosts.com but the new forum seocompanies.xyz seems to not be working in the same way as lowpricehosts, using another theme maybe the only option in my case. Though i will keep trying and will ask some friends to see if they can have a look over it too and refer to your very helpful replies

vrijvlinder

It is really not that complicated, you simply add the link class to the list

jQuery(document).ready(function($) {
$(".Item .Message a:external").attr("target", '_blank');
$(" .Item .Message a").attr("target", '_blank');
$('#Menu li:first > a').attr('target', '_blank'); //it is .navbar in Bootstrap
$('.MessageList a').attr('target', '_blank'); 
$('#Foot a').attr('target', '_blank'); //this called footer .sticky-footer
$('.Attachment a').attr('target', '_blank'); 
$('.Meta a').attr('target', '_self'); 
$('a.ReactButton.Quote.Visible').attr('target', '_self'); 
//for bootstrap themes
$('.navbar a').attr('target', '_blank');//this will make all menu links open in new window
$('a').attr('target', '_blank');//this will make all links open in a new window
$('h3 a').attr('target', '_blank');//this will make category list title links open in new window.
$('a.Title').attr('target', '_blank');//this will make discussion list title links open in a new window
});

UKguy

Thank you