ansaurus

Question

jQuery Tools Overlay Fired onClick of a Table Row? How?

Answer 1

A:

Just replace 'myTable' below with the id of the table in which you want the rows to be clickable.

$('#myTable tr').click(function(){
  //Whatever you want to happen when the row is clicked goes here, for example:
  $('#overlay').click(); //Fires the previously defined onclick event for #overlay.
});

Jon Weers 2010-06-26 19:47:32

Hmm... I see what you're getting at here. How would I pass the URL to the function?

Sam 2010-06-26 20:36:50

Answer 2

+1 A:

Yea you can do it simply. put the anchor tag inside the Table Row and make its display style to block.

<tr>
<td><a rel="#overlay" href="content.html" style="display:block;">Overlay</a></td>
</tr>

Muneer 2010-06-26 19:48:01

Okay! I like it! The only problem is that anchor doesn't take up the full height of the cell... not even with height="100%" tacked on to the style. Any way around this?

Sam 2010-06-26 20:35:25

Yes Sam, I understand it. If you put display:block; it will automatically fit to full width and full height. No need of using width:100%.

Muneer 2010-06-26 20:44:36

@Sam - Does the cell have padding?

Nick Craver 2010-06-26 21:40:52

@Muneer... right, thanks. The problem is that other cells in the row that have more content are making that cell too tall. The anchor (with display:block) won't fill up the whole cell height. I hope I'm explaining that well!@Nick Yes, the cell has padding. Is the impacting the behavior? Thanks all!

Sam 2010-06-27 02:53:17

Alright... I was able to dynamically set the height of the anchor based on the calculated height value of the table cell. Here's what I came up with (feel free to let me know if there's a better way to do this! Admittedly, it feels a bit inelegant):$('#anchor').css('height', $('#cell').height());What do you guys think? Reasonable?

Sam 2010-06-27 03:14:27

@Sam, there is no problem of other contents in the cell while you making it display:block; And it is must the first child of the cell must be the anchor tag.I think you have padding for your cells. that is why anchor is not stretching to its full. You can remove the cellpadding of the specific cell using styles. Then It should work.

Muneer 2010-06-27 09:42:24

@Sam make it like this <td style="padding:0"><a rel="#overlay" href="content.html" style="display:block;">ANY OTHER CONTENTS YOU NEED TO PLACE</a></td>This should work fine.

Muneer 2010-06-27 09:44:13

ansaurus

tags:

views:

answers:

jQuery Tools Overlay Fired onClick of a Table Row? How?

related questions