How to open a new tab trigger by the scroll button

Question

I'm making a php/html app which show some data in a table, when the user clicks in the row (<tr>) jquery open that record.

This is the code:

$.fn.linkRow = function(element) {
    thisRow = this.find('tbody tr');

    thisRow.on('click', function() {
        hrefLocation = $(this).find('td.link:first a').attr('href');
        if (hrefLocation) {
            window.location.href = hrefLocation;
        };
    }).addClass((thisRow.has('td.link')) ? 'pointer' : '');
    return this;
};

The fact is: The user can't open a record in a new tab. The only way is copy&paste the href... And my users won't do that.

If make some research about the event fired by the scroll button and how to open a new tab, the later is almost impossible, so... Does anyone can figure a way?

EDIT: I mean the mouse-wheel... Normally this open a link in a new tab.

PS: I have to use tables, In some point I will make a css-based table layout for that (no javascript needed), but I can't do it in this version of the software.

Thanks!

This is the final code:

$.fn.linkRow = function(element) {
    thisRow = this.find('tbody tr');

    thisRow.not('a').on('mouseup', function(e) {
        hrefLocation = $(this).find('td.link:first a:first').attr('href');
        if ( hrefLocation ) {
           if (e.which == 2) { 
              window.open(hrefLocation);
           }
           else{
              window.location.href = hrefLocation;
           }
        };
    }).addClass( ( thisRow.has('td.link') ) ? 'pointer' : '' );
    return this;
};

BUT... The mouse-wheel click does not work for what I intend:

If you click a link (a tag) > open a new tab

If you click a no link (any other tag) > it will scroll based on your mouse position. if you move your mouse up, it scrolls up and so

So... I works but I definitively need to make a no-javascript solution.

What in the world do you mean by the scroll button? I have no idea how that plays into the story with a click. — epascarello, Apr 03 '13 at 13:16
I think I get it - I THINK he means middle-mouse-button clicking (in the way that clicking with the "3rd mouse button" (which maps to a scroll wheel click on many mice) automatically opens normal links in a new tab, and he wants to replicate that in JavaScript. — Iain Collins, Apr 03 '13 at 13:22
Assuming I'm correct in my assumption above, check out posts like http://stackoverflow.com/questions/5833928/jquery-alert-when-middle-mouse-button-clicked to see how to detect which mouse button was used (you won't be able to explicitly open in a new tab, but you can set the target to _blank as already suggested by someone below). — Iain Collins, Apr 03 '13 at 13:23
@IainCollins Ah, the scroll wheel which people may or may not have. :) — epascarello, Apr 03 '13 at 13:29

score 2 · Accepted Answer · answered Apr 03 '13 at 13:15

2

If you want to have the links open in a new tab and not in the same page, you need to replace

window.location.href = hrefLocation;

with

window.open(hrefLocation);

answered Apr 03 '13 at 13:15

epascarello

204,599
20
195
236

+1 - Although new tabs or new windows is completely browser dependent. – iambriansreed Apr 03 '13 at 13:16
Thanks... It works! Actually I just need to use Chrome and all the users have a mouse wheel (four... maybe five users)... Now when the user clicks whth the left button it open in the same tab, and when the user clicks with the mouse wheel it open in a new tab. Thanks again... – Axel A. García Apr 03 '13 at 13:34

Narek · Answer 2 · 2013-04-03T13:59:12.597

1

Change click with mouseup and catch e.with with value 2 (middle button):

$.fn.linkRow = function(element) {
    thisRow = this.find('tbody tr');

    thisRow.on('mouseup', function(e) {
        hrefLocation = $(this).find('td.link:first a').attr('href');
        if ( hrefLocation ) {
           if (e.which == 2) { 
              window.open(hrefLocation);
           }
           else{
              window.location.href = hrefLocation;
           }
        };
    }).addClass( ( thisRow.has('td.link') ) ? 'pointer' : '' );
    return this;
};

edited Apr 03 '13 at 13:59

answered Apr 03 '13 at 13:24

Narek

3,813
4
42
58

I works excellent too... Adding an 'e' in the ...'mouseup', function(). Thanks – Axel A. García Apr 03 '13 at 13:45

score 0 · Answer 3 · answered Apr 03 '13 at 13:16

0

Try with the following method

$(document).scroll(function(){
if(!tabOpen){
    window.open('url', 'window name', 'window settings');
    tabOpen = true;
}
});

answered Apr 03 '13 at 13:16

Anton Banchev

541
8
28

score 0 · Answer 4 · answered Apr 03 '13 at 13:17

I faced a similar problem a few months ago.

Either you wrap every td-content into a normal a-Tag (and use _target="blank"), no javascript required in this case!

...or you use js:

thisRow.click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

score 0 · Answer 5 · edited Apr 03 '13 at 13:49

0

To open in a new tab use:

window.open(hrefLocation);
window.open(hrefLocation,'_blank'); //Or this
window.open(hrefLocation,'_newtab'); //Or this

One of these should work.

edited Apr 03 '13 at 13:49

Sharlike

1,789
2
19
30

answered Apr 03 '13 at 13:20

user2240585

1

score 0 · Answer 6 · answered Apr 03 '13 at 13:23

window.open() will do the trick but it also depends on the browser configuration

Not sure what you mean with the scroll button, but if it's the mouse-wheel then you can use this script to fire events on wheel-up/-down.

http://brandonaaron.net/code/mousewheel/demos

score 0 · Answer 7 · edited May 23 '17 at 12:00

I'm unsure if you want to know how to make an middle click event with jquery or if you want to know how to open a new tab but here goes:

Middle click event:

$("tr").live('mousedown', function(e) { 
 if( (e.which == 2) ) {
   alert("middle button"); 
 }
   e.preventDefault();
});

New tab:

As all the others are saying, use the following:

window.open(href);

With both middle click and open link:

$("tr").live('mousedown', function(e) { 
 if( (e.which == 2) ) {
    window.open(href);
 }
   e.preventDefault();
});

EDIT: Some sources: Jquery: detect if middle or right mouse button is clicked, if so, do this:

The answer to Detect middle button click (scroll button) with jQuery can also help solve some compatibility issues with IE

Last time I tested Firefox's popup blocker didn't allow you to open new windows on `mousedown` events (which seemed a bit arbitrary since it's perfectly happy about `click` events), though that may be different in other browsers. — Anthony Grist, Apr 03 '13 at 13:52

How to open a new tab trigger by the scroll button

7 Answers7