How to disable the option: Open in new tab

Question

I asynchronously loading content is responsible for what the code below:

jQuery:

$(document).ready(function()
{
    init();
    $(window).resize(init);

    $('#floatMenu,#smallMenu').find('>a').click(function()
    {
        var t = this;
        $('#wynik').animate({opacity:0}, 'fast', function()
        {
            $(this).load(t.href, function()
            {
                $(this).animate({opacity:1}, 'fast');
            })
        });

        //$('#wynik').load(this.href);

        $(this).addClass('active').siblings().removeClass('active');

    }).first().click();
});

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="list-group" id="smallMenu">
                <a href="text/bc/5" onclick="return false;" class="list-group-item active">TEXT</a>
                <a href="text/bc/1" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/2" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/3" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/4" onclick="return false;" class="list-group-item">TEXT</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3" id="menu-padding-top">
            <div class="list-group" id="floatMenu">
                <a href="text/bc/5" onclick="return false;" class="list-group-item active">TEXT</a>
                <a href="text/bc/1" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/2" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/3" onclick="return false;" class="list-group-item">TEXT</a>
                <a href="text/bc/4" onclick="return false;" class="list-group-item">TEXT</a>
            </div>
        </div>

        <div class="col-md-9">
            <div id="wynik">
                {* Here is content loading. *}
            </div>
        </div>                   
    </div>
</div>

I tried swapping to (jQuery code as well) and href to data-href - does not work.

add `preventDefault()`: `$('#floatMenu,#smallMenu').find('>a').click(function(event){ event.preventDefault(); /* your code */ })` — Frogmouth, Oct 13 '14 at 10:39
As a user, I hate sites that prohibit “Open in new tab” feature, as I use it mostly. — vyegorov, Oct 13 '14 at 13:01

score 0 · Answer 1 · answered Oct 13 '14 at 10:49

... try to add preventDefault() inside the .click() handler. Without it when you click the link the browser navigate to the page indicate to the href attribute.

Add this line:

e.preventDefault();

in your code:

$(document).ready(function()
{
    init();
    $(window).resize(init);

    $('#floatMenu,#smallMenu').find('>a').click(function(e)
    {
        e.preventDefault(); //ADD HERE
        var t = this;
        $('#wynik').animate({opacity:0}, 'fast', function()
        {
            $(this).load(t.href, function()
            {
                $(this).animate({opacity:1}, 'fast');
            })
        });

        //$('#wynik').load(this.href);

        $(this).addClass('active').siblings().removeClass('active');

    }).first().click();
});

now you block the loading of a new page. And javascript perform your handler without redirect you in a new page.

AN EXAMPLE...

Funny that, in your example, the "normal" link does not work on long click whereas the "preventDefault" link works normally at long click, with the item "Open in a new tab". — Nicolas Barbulesco, Sep 01 '15 at 01:11

score 0 · Answer 2 · answered Oct 13 '14 at 10:49

Just add the event.preventDefeult() function on the first line of your handler, like this:

$('#floatMenu,#smallMenu').find('>a').click(function(event)
{
    event.preventDefault();

    var t = this;
    $('#wynik').animate({opacity:0}, 'fast', function()
    {
        $(this).load(t.href, function()
        {
            $(this).animate({opacity:1}, 'fast');
        })
    });

    //$('#wynik').load(this.href);

    $(this).addClass('active').siblings().removeClass('active');

}).first().click();

Do you have a working example? – Nicolas Barbulesco Sep 01 '15 at 01:09 — Nicolas Barbulesco, Sep 01 '15 at 01:09

How to disable the option: Open in new tab

2 Answers2