FreewayTalk
6 replies to this thread. Most Recent
link on a table cell hows it done
Hi all does anyone know how add a link to a table cell?? not the content just the table cell. I do need the style to be an inline too!! I cant for the life of me think how I can do it. its a real urgent one as well cheers for any help
max
it’s better to be lucky than clever.. :o)
Strictly speaking, you can’t do this. There are two ways around it, though. The first will work if your link is the only content in the table cell: use css to make the a (link) a block tag, and give it dimensions that fill your table cell. The second involves JavaScript: set a click observer on the cell and set it to redirect to the desired URL.
I’ll write more later when my net is back up and I’m not pecking away at mi iPhone.
Walter
On Jan 21, 2009, at 8:27 AM, “max” <email@hidden> wrote:
Hi all does anyone know how add a link to a table cell?? not the content just the table cell. I do need the style to be an inline too!! I cant for the life of me think how I can do it. its a real urgent one as well cheers for any help
max
Freeway user since 1997
hi walter don’t worry about rushing I have got around the problem for now
speak soon max
it’s better to be lucky than clever.. :o)
Longer explanation as promised.
CSS:
An A tag (anchor, href, link) is an inline tag by default, and cannot wrap around a block-level tag like a table cell. If your table cell contains nothing except the text of your link:
<td>
<p class="fw_lp"><a href="foo/bar">baz</a></p>
</td>
…then you can make the link appear to fill the cell by creating a style for a block-level link.
Make a new style. In the Tag field, enter ‘a.block’ (without the quotes), tab into the Name field and delete whatever is there, then tab back out to make sure it “sticks” that way. Click on the Extended button and then New, and in the Name and Value fields, enter ‘display’ and ‘block’, respectively (again, without the quotes). Okay that dialog, then press New again and enter ‘padding’ and ‘12px’, and okay that. (This is just a test, you can fiddle with this amount, or set it to be different on top and bottom than left and right — whatever you need — later.) Okay out of the stack of dialogs.
Make a second style in the exact same manner as above, tagging it ‘a.block:hover’. In the Character (+) drop-down, select Background Color, and set something pretty.
Finally, make sure your table is set to Height Can Shrink in the Inspector, and highlight your entire link. Open the Hyperlink dialog, and click on the Extended button. Add a new Name/Value pair of ‘class’ and ‘block’.
Preview. The link should affect the entire table cell (as long as there is no padding inside the cell to push it in from the edges) and the entire cell should change color when you mouse over it.
There’s a way to do this in JavaScript, and I started writing it out, but it’s taking too long and I still need to test it. If I find time later I will wrap it up for you. Using JS, you can set this effect to happen on table cells that contain more than just a link.
Walter
On Jan 21, 2009, at 9:15 AM, Walter Lee Davis wrote:
I’ll write more later when my net is back up and I’m not pecking away at mi iPhone.
Freeway user since 1997
JavaScript:
If your link is not alone in the table cell, but you want the entire cell to respond as if it was a link, you’ll need to simulate the effect with JavaScript, because IE cannot understand the :hover pseudo- class on anything except a link.
Apply the Protaculous Action to the page, and select prototype-packed from the Library picker.
Create a new style as above tagged ‘td.hover’, and give it the Background Color property and nothing else.
Now your table cell can contain only one link, but may contain lots of other text or images or whatnot. Click once on the table cell so it is selected (gray border inside) and click on the Extend… button in the Inspector. Click new and add ‘class’ and ‘link’ and okay out. (Never mind that you haven’t made a CSS class called link anywhere — we’re just using this as a way to identify the table cells that need this behavior. If you do have a class called link in your CSS styles, pick another name and adjust the following code to match.)
Click on the page, so nothing is selected, and then click the second Function Body button in the Protaculous tab of the Actions palette. Paste the following lump-o-code:
var fakeLinks = $$('td.link');
fakeLinks.each(function(elm){
elm.observe('mouseover',function(evt){
elm.addClassName('hover')
});
elm.observe('click',function(evt){
return document.location.href = elm.down('a').href;
});
document.observe('mouseover',function(evt){
var el = Event.element(evt);
if(elm != el && !el.descendantOf(elm))
elm.removeClassName('hover');
});
});
Now, when you hover over the table cell, it will change to have the background color you want, and when you click, it will navigate to the first link it finds in the table cell.
Walter
On Jan 21, 2009, at 11:06 AM, Walter Lee Davis wrote:
There’s a way to do this in JavaScript, and I started writing it out, but it’s taking too long and I still need to test it. If I find time later I will wrap it up for you. Using JS, you can set this effect to happen on table cells that contain more than just a link.
Freeway user since 1997
Max, I have an action that will pretty much do this by inserting a little javascript, it is my ‘Cell BG Colour On Rollover’ action although not the one that is available for download, I have a version I use myself that has a little more code added to link the cell onclick. If you want a copy to try and see if it suites your needs then just let me know and I can send you it by email.
HTH
Freeway, PHP and MySQL examples
Hi walter thanks for this that will probably work out fine and Mike yes please could I have a look at your adjusted action too
max.izzat(at)virgin.net
cheers everyone max
it’s better to be lucky than clever.. :o)
