Bigger link RequiresUsing defaultsSettings for JavaScript pop-upsUsing custom classesWorth notingMoreThanks

Bigger link RequiresUsing defaultsSettings for JavaScript pop-upsUsing custom classesWorth notingMoreThanks 介绍

Makes it really easy to enable specified element/s to behave as a proxy for
their first contained link.

Adds additional css classes to provide the means for the specified element to
visually reflect focus and hover states of it’s contained link/s.

Requires

jQuery version 1.2.1

Using defaults

normally this plugin will need very little configuration—although you do need
to direct it to the element/s on which you wish it to act.

Use the regular jQuery manner to select an element which contains a link whose
behavIoUr you wish the element to inherit. In this case the <li> elements.

HTML example. (Note the added title attributes will be copied to the
<li> elements by the plugin).

<ul class="links"> <li><a href="http://www.fusion.com.au/" title="Fusion web site in a new window">Fusion</a></li> <li><a href="http://jquery.com/" title="The write less, do more, JavaScript library">jQuery</a></li> <li><a href="http://www.google.com.au/" title="More about everything in a new window">Google</a></li> </ul>

JavaScript example :

$('.links li').biggerlink();

Settings for JavaScript pop-ups

Setting follow to false ensures the link will not be followed by the
browser as it would by default; Thus not interferring with the action os
JavaScript pop-ups applied to the same link. (Note that popwindow() is not
part of this plugin).

$('.links li').popwindow().biggerlink({follow:false});

Using custom classes

By default the plugin applies classes to the target elements:

hoverclass - class added to the parent element when hovering over it
with you cursor or focusing a link it contains. By default this class is
hover.

clickableclass - class added to each selected element which contains at
least one link. By default this class is hot. Particularly useful if you
wish to make the element appear ‘clickable’ when the link behavIoUrs are
assigned to it.

To avoid possible conflicts with other classes in your document they may be
customised:

$('.links li').biggerlink({clickableclass:'yum',hoverclass:'roll'});

Worth noting

The plugin will use the URL of the first link within the selected element.
If there is a second link with a different URL it’s action will be
overridden - using the URL of the first link instead.

Further details can be found on my blog post: Bigger link: easier clicking
with jQuery.

Thanks

This code is the product of a few Friday afternoons. During this time my
employer, Fusion, allows me and my fellow
Fusionites to work on the internal projects that interest us most.

I’m sharing biggerlink in the hope that it can be further polished by people
smarter than me; And to, in a small way, give back to others who have
contributed to making jQuery brilliant.