Increase size of link area?

Mark2 · January 23, 2012, 3:28pm

Hi

I have a html item 275px wide by 140px high. There is a little html text in the top left corner. The text links to another page. Is there a way of increasing the size of the ‘link area’ to fill the item?

i.e. if someone moves the mouse anywhere over the html item they can click on the link (rather than having to move the mouse precisely over the text)?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 23, 2012, 3:37pm

You can, but it involves a little fiddling with the Extended dialog in the Link Style editor. Basically, what you need to do is declare your link as display:block, and then add some padding to it to give it shape. You can’'t do this with the normal style editing tools in Freeway, you have to know the CSS commands to do it.

Click on the box where your link appears. In the Inspector, look in the Style tab (second from the left) for the Link segment. Open that up, and click on the More… button. Link will be selected by default. Click on Extended, then in the resulting sub-dialog, press New. You will see a sub-sub-dialog with Name and Value fields. Enter:

display
block

respectively and okay out of the sub-sub-dialog. Click new again and enter

padding
12px 24px

and okay out of the entire stack. Now preview and see how you suddenly can hover over any part of the box and get a link cursor and be able to trigger the link.

Note that by doing this, you do end up with a block style for A, which is normally an inline style. What this means is that you will not be able to have any other text on the same line as your link – it will bump any other text to the next line. If you want to have the larger area but retain the inline property to your link, then change display block to display inline-block.

You may also want to add a background color to your link style so you can see the boundaries.

Walter

On Jan 23, 2012, at 10:28 AM, Mark wrote:

Hi

I have a html item 275px wide by 140px high. There is a little html text in the top left corner. The text links to another page. Is there a way of increasing the size of the ‘link area’ to fill the item?

i.e. if someone moves the mouse anywhere over the html item they can click on the link (rather than having to move the mouse precisely over the text)?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark2 · January 23, 2012, 4:04pm

Hi Walter

Urm I can’t get this to work. If you would be so kind, could you have a look at www.advocatedesign.co.uk/trial

I’ve only attempted to do the above on the ‘Text1’ item (the first case study) but would eventually apply it to all nine html items and remove the links from the corresponding images.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 23, 2012, 4:18pm

Take the comma out from between the two dimensions in the padding attribute. They should only be separated by a space, as I indicated.

Walter

On Jan 23, 2012, at 11:04 AM, Mark wrote:

Hi Walter

Urm I can’t get this to work. If you would be so kind, could you have a look at www.advocatedesign.co.uk/trial

I’ve only attempted to do the above on the ‘Text1’ item (the first case study) but would eventually apply it to all nine html items and remove the links from the corresponding images.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 23, 2012, 4:31pm

Looking at this design, I think you might be even better served by adding a little bit of JavaScript to the page. Apply Protaculous to your page, choose protaculous-packed as the Library, and paste the following into the top Function Body dialog:

$$('clicky').each(function(elm){
	if(elm.down('a')){
		var link = elm.down('a');
		elm.setStyle('cursor: pointer');
		elm.observe('click', function(evt){
			window.location.href = link;
		});
	}
});

Next, go through all of your project blocks (the DIV elements containing the link or links) and do the following to each:

Click once on the DIV.
Press Command + Option + X (or choose Item / Extended from the main menu)
Make sure the DIV segment of the dialog is selected, and press New.
Enter Name: class, Value: clicky in the sub-dialog, and okay out of the stack of dialogs.

This will apply the classname ‘clicky’ to each of these DIVs, and make them respond to clicks by firing the first link found inside them. This gives you a big friendly target for the click without much extra effort.

Walter

On Jan 23, 2012, at 11:04 AM, Mark wrote:

could you have a look atwww.advocatedesign.co.uk/trial

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark2 · January 23, 2012, 4:52pm

I’ve done the above but it hasn’t made the whole html item clickable.

I wasn’t able to choose ‘protaculous-packed’ as the Library, only ‘prototype-packed’.

See advocatedesign.co.uk/trial

Is there not another way of making a whole html item clickable? The first solution with the padding is a little tricky to get the exact size I want.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 23, 2012, 5:05pm

Typo. Change this line:

On Jan 23, 2012, at 11:31 AM, Walter Lee Davis wrote:

  	var link = elm.down('a');

To read:

var link = elm.down('a').readAttribute('href');

Hope this helps,

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

RichardLowther · January 23, 2012, 5:06pm

This caught my attention and I see that on the site in question all the boxes a clickable except the top left despite you saying that do not Mark

So – how did this happen?

I have tried to do this on a site with no success.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark2 · January 24, 2012, 4:28pm

Hi Walter

Thanks for your help with this. I decided (more in ignorance) that I don’t want to use Javascript - I only really want to have code that I understand.

So I used the padding on the link style and the ‘display:block’ that you suggested.

It works fine on my mac. Although having link styles for all nine case studies generates a lot of additional html code.

Thanks again

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mark2 · January 24, 2012, 4:35pm

Hi Richard

I’ve hopefully finalised the homepage, see www.advocatedesign.co.uk

The case studies are a html item with a set width and height. I then placed a background image, using the styles pallet, into the html item. I then wrote my text and followed Walter’s instructions above - to set up my link styles to create a big link/button to aim at. I also applied a background colour to the ‘hover’ state, so that on ‘mouse-over’ the link has a teal background colour.

Hope this helps

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options