Posted by Maxim75 on April 16, 2010 at 1:00pm
7 followers
Jump to:
| Project: | Views |
| Version: | 6.x-2.10 |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Hi,
I am using views to list events in which the last field is a "more link" that links to the actual node containing the event.
If a visitor wishes to go to that node he has to click the more link, but I would really like him to be able to click anywhere on the whole row to go there, like in views bulk operations, where you can click anywhere on the row to check the row checkbox, but then in a manner that allows you to go to a configurable location indicated in one of the fields in that row (in my case the more link)
that would really be great functionality!
If anyone has any ideas, that would be great!
Thanks!
Max
Comments
#1
You have to use js to achive this. But with js its quite easy to achive.
But this required some custom coding. I would print the url in the html. Write a click function for query, and read out this url foreach row, and use this url to jump to this page on the browser.
#2
Thank you for your quick response!
although your solution makes perfect sense, considering my programming skill/experience i am afraid i would need a more detail-leveled description.
And I also wish to add that i don't want the url to be readable in the output. What is meant by query, jquery?
If anyone could give some pointers, I would be most grateful!
Greetz,
Max
#3
Read this: http://drupal.org/node/121997
#4
Automatically closed -- issue fixed for 2 weeks with no activity.
#5
I'm posting this comment on a closed thread because this URL keeps coming up in Google searches for this issue, and there is in fact a fairly straightforward Views + CSS solution (no need for Javascript). Hopefully it will be useful to someone.
The trick is documented here: http://stackoverflow.com/questions/1460958/html-table-row-like-a-link
1) In Views, make every cell in each row into a link to the node that you want.
2) In CSS, make those links into block elements that take up the entire cell, e.g. a { display: block; width: 100%; height: 100%; }
3) Use the :hover pseudoclass on your table rows to make them highlight, e.g. tr:hover { background-color: yellow; }
The whole row will now highlight when hovered, and should be clickable anywhere. Simple! And probably very useful to anyone who uses Views tables (at least it was to me).
The only downside? The table row highlighting won't work in Internet Exploder. If you want it to look the same in IE you need to find a way to add an onmouseover event to the table row that will change the color. You can find that documented elsewhere on the internet. Since the row clicking will still work in IE it may or may not be worth your effort; that is up to you ;-)
EDIT: I stand corrected; modern versions of IE (7+ I think) support :hover on table rows.
#6
Thanks for adding this non-javascript method!
Unfortunately it wasn't usable in my specific case, with views tables that included multiple links of which the first one needed to cover the whole table-row, but excluding the link images in the other table cells, that had their own target. I finally gave up my attempt, and went for a simpler solution.
To add to the possibilities, with the use of Jquery, this is also a workable option (it uses the first link it finds):
$(document).ready(function() {
$('tr.odd').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
$(document).ready(function() {
$('tr.even').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.open(href, '_blank'); 'use of new page'
}
});
});
$(document).ready(function() {
$('img').click(function() {
var href = $(this).find("img").attr("href");
if(href) {
window.open(href, '_blank'); 'use of images'
}
});
});
#7
@ alanpeart, thanks for your post (#5). Can you please take a look here http://treefish.co.uk/daily-mail
It seems that on the left only the text and not the entire cell or row is responding to hover.
Any suggestions please?
Thank you
My CSS:
.views-table tbody td {
border:5px solid pink;
}
.views-table tbody td a {
display: block;
width: 100%;
height: 100%;
}
.views-table tbody td a:hover {
display: block;
width: 100%;
height: 100%;
}
tr:hover {
background-color: yellow;
}
tr a:hover {
background-color: green;
}
#8
@juc1
It's pretty sure that the views issue queue is not the best place to ask css kind of questions :)
s
#9
@ dereine well it is Views CSS and relating to this thread but ok I have posted it in the main forum...
http://drupal.org/node/1287956