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.

Answer 1

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);

Answer 2

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;
};

Answer 3

Try with the following method

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

Answer 4

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;
});

Answer 5

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.

Answer 6

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

Answer 7

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