I have an HTML table, with a link in the first column. I want to allow the user to click on anywhere in the row to activate that link. At the same time I would like to preserve the middle click and ctrl+click functionality of opening a new tab/window. Here is an example of the table:
<table id="row_link">
<tbody>
<tr>
<td><a href="link1.html">link</a></td>
<td>info 1</td>
</tr>
<tr>
<td><a href="link2.html">link</a></td>
<td>info 2</td>
</tr>
</tbody>
</table>
Using jQuery I can allow the user to left click anywhere in a row:
$("table#row_link tbody tr").click(function () {
window.location = $(this).find("a:first").attr("href");
});
This of course disables the standard middle click and ctrl+click functionality of opening a new tab. Is there a better way to allow users to click on the entire row, while preserving the standard middle click and ctrl+clcik behavior?
Source: Tips4all
Unfortunately there is no way to simulate a link and all associated behaviour in every browser. Therefore, the only way to achieve what you want is to have a link that follows the cursor around the <tr> element; this link would be invisible so, to the user, it looks like they're clicking on the <tr> but they're actually clicking on a hidden link. Using this method, the middle-button, ctrl+click and any other behaviours are left intact!
ReplyDeleteHere's a DEMO: http://jsbin.com/ufugo
And here's the code:
$("table tr").each(function(){
var $link = $('a:first', this).clone(true),
dim = {
x: [
$(this).offset().left,
$(this).offset().left + $(this).outerWidth()
],
y: [
$(this).offset().top,
$(this).offset().top + $(this).outerHeight()
]
}
$link
.click(function(){
$(this).blur();
})
.css({
position: 'absolute',
display: 'none',
// Opacity:0 means it's invisible
opacity: 0
})
.appendTo('body');
$(this).mouseover(function(){
$link.show();
});
$(document).mousemove(function(e){
var y = e.pageY,
x = e.pageX;
// Check to see if cursor is outside of <tr>
// If it is then hide the cloned link (display:none;)
if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {
return $link.hide();
}
$link.css({
top: e.pageY - 5,
left: e.pageX - 5
})
});
});
EDIT:
I created a jQuery plugin using a slightly better aproach than above: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/
EDIT
ReplyDeleteThis is simple problem that has a simple solution. I don't see a need for nasty hacks that might break on some browsers or take processing time. Especially because there is a neat and easy CSS solution.
First here is a demo
Inspired by @Nick solution for a very similar issue, I'm proposing a simple css+jquery solution.
First, here is the mini-plugin I wrote. The plugin will wrap every cells with a link:
jQuery.fn.linker = function(selector) {
$(this).each(function() {
var href = $(selector, this).attr('href');
if (href) {
var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
'text-decoration': 'none',
'display': 'block',
'padding': '0px',
'color': $(this).css('color')
})
$(this).children()
.css('padding', '0')
.wrapInner(link);
}
});
};
And here is a usage example:
$('table.collection tr').linker('a:first');
And All the CSS you need:
table.collection {
border-collapse:collapse;
}
It's as simple as that.
You can use the event object to check the mouse click type. This article is discussing a similar issue.
Anyway, here is how to do it:
$("table#row_link tbody tr").click(function () {
if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
if (!e.ctrlKey) {
// Left mouse button was clicked without ctrl
window.location = $(this).find("a:first").attr("href");
}
}
});
You want this:
ReplyDelete$('table#row_link tbody tr').mousedown( function(e){
if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
//middle mouse button or ctrl+click
} else {
//normal left click
}
});
This is tested in FF3.0.10, Chrome 1.0 and IE6. I use the mousedown event because neither firefox or IE passes the middle mouse button click to a .click(fn) event.
I would attack this from the HTML/css side. This used to be a common problem when most sites did all layout in tables.
ReplyDeleteFirst make the contents of all table cells into links. If you don't want them to look like links you can use CSS to remove the underline from the 'non link' cells. But they will be links, which is semantically what you want anyway.
Next you want to make the link expand to fill the entire cell. StackOverflow already knows the answer to this:
td a
{
display: block;
width: 100%;
height: 100%;
line-height: 100%;
}
With a typical table with no spaces between the cells the entire row will be clickable. And since this relies on no tricks or browser specific hacks it should work everywhere.
You could grab the event and look at it's event code. But there is no real way to know what a browser's behavior for those events.
ReplyDeleteHere's something that should work: Instead of using window.location, us .click() to emulate a click on the first inside the element. Also, use a conditional to check for Ctl+Click.
ReplyDeleteShould look like this:
$("table#row_link tbody tr").click(function (e) {
if(e.ctrlKey) {
// Run Ctl+Click Code Here
} else {
$(this).children('a').eq(0).click();
}
}
Hope this helps!
Dave Romero
This plugin for jQuery should do the trick:
ReplyDeletehttp://abeautifulsite.net/notebook/68
EDIT: Sorry, I misread your post. You want to "preserve" the middle and right click default capabilities. The script above would let you handle the right click. I am a bit surprised that handling the left click kills off the middle and right clicks. Does that happen in every browser? Or only certain ones?
You can make a link and let it floting around in your tr, biding to mouveover event, update href and position
ReplyDeletecreate one pixel link
<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>
update href and position on mouse over
$("#row_link tr").mouseover(
function(event){
//update href
$("#onepixel").attr("href",$(this).find("a:first").attr("href"));
//update position, just move to current mouse position
$("#onepixel").css("top",event.pageY).css("left",event.pageX);
}
);
Try putting the a around the td and then apply a display:block CSS element to the td.
ReplyDeleteThat should make the entire area of the td clickable with all buttons as a "normal" link.
An example is probably better:
<table id="row_link">
<tbody>
<tr>
<a href="link1.html"><td style="display: block;">link</td></a>
<td>info 1</td>
</tr>
<tr>
<a href="link2.html"><td style="display: block;">link</td></a>
<td>info 2</td>
</tr>
</tbody>
</table>
A similar approach has worked in the past for me, although it was not exactly for table elements. Untested with tables so try it.
I think the biggerlink plugin will do what you ask for. Here's the
ReplyDeletearticle, and
demo too.
you need to remove the < tbody > tag
ReplyDeleteand just use the 'href' attribute to get the link destination and dont to select the anchor < a > tag too because thats contains the href attribute.
$("table#row_link tbody tr a").click(function () {
window.location = $(this).attr("href");
});
or simply make the link open a new tab.
i hope that helps you.