Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Target Blank for Bootstrap 2.5.1

UKguyUKguy
edited March 2016 in Vanilla 2.0 - 2.8

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/

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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 ?

  • @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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I would also replace

    $(document).ready(function() {

    with this in order to avoid potential js errors

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

  • UKguyUKguy
    edited March 2016

    @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 :)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2016

    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
    });
    
  • Thank you :)

Sign In or Register to comment.