Biggerlink – jQuery plugin

Purpose

A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.

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

More to read in my blog post: Bigger link: easier clicking with jQuery

Requires jQuery version 1.3+

Tested successfully in:
Firefox 3.x
IE 6,7,8
Safari 3,4
Opera 9

Simple demo

With links to more demos. View the source for the CSS, HTML and JavaScript.

Basic demonstration

Updated for jQuery 1.3

With the release of jQuery 1.3 I have revisited this plugin to improve my understanding of the new event object and fixed some bugs and added some features while I was at it.

If you are stuck with jQuery version 1.2 try jquery.biggerlink version 1.

How to use it

Here are some typical configurations.

Defaults

Normally this plugin will need very little configuration - although you do need to point it at the element/s on which you wish it to act.

HTML of an element which contains a link whose behaviour you wish the element to inherit. In this case the <li> elements. 

<ul class="links">
    <li><a href="http://www.fusion.com.au/">Fusion</a></li>
    <li><a href="http://jquery.com/">jQuery</a></li>
    <li><a href="http://www.google.com.au/">Google</a></li>
</ul>

JavaScript in the document head

<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
    $('.links li').biggerlink();
</script>

With JavaScript pop-ups

Using JavaScript to open the link in a new window is one likely scenario where you will to want to prevent the link’s default action.

HTML as above. (Note the added title attributes will be applied 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. 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. 

<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
    $('.links a').click(function(){
        window.open(this.href);
        return false;
    });
    $('.links li').biggerlink({follow:false});
</script>

As of version 2 of biggerlink there is now a new default value for follow of 'auto'. In the code above where biggerlink is bound next after the pop-up event setting follow to false in unnecessary. If the click event before biggerlink returns false biggerlink will not cause the link to be followed. Any other events bound to the link will be triggered normally.

Multiple links in each biggerlink container

By default biggerlink will force all clicked links in the specified container to trigger the first (master) link instead. Although click events bound to other links will fire as well as any applied to the master link. This is typically useful when the multiple links point to the same href.

This version of biggerlink introduces a new setting otherstriggermaster (for want of a shorter name!). By default it is set to true. Setting it to false allows links following the first in the assigned container to be independent. Clicking them will not trigger the click events on the master link.

Directly hovering or focusing an 'other' link with otherstriggermaster set to false will add an additional class to the biggerlink container - bl-hover2 by default.

HTML. Note each li contains two links:

<ul class="links">
    <li>
    	<h3><a href="http://www.fusion.com.au/">Fusion</a></h3>
    	<p>Where Ollie works in Adelaide <a href="http://www.google.com/search?q=fusion">Google search</a></p>
    </li>
    <li>
    	<h3><a href="http://jquery.com/">jQuery</a></h3>
    	<p>The write less, do more, JavaScript library <a href="http://www.google.com/search?q=jquery">Google search</a></p>
    </li>
    <li>
        <h3><a href="http://www.google.com.au/">Google</a></h3>
        <p>Find out more about everything <a href="http://www.google.com/search?q=everything">Google search</a></p>
    </li>
</ul>

JavaScript.

<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
    $('.links li').biggerlink({otherstriggermaster:false});
</script>

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.

Version 2 introduces a couple more

biggerclass - class added to all the contained <a> elements, unless otherstriggermaster is false, in which case it is only applied to the first (master).

hoverclass2 - If otherstriggermaster is set to false this additional class is added to the containing element when links other than the first are moused over or focused. CSS applied with this class can override the styles applied by hoverclass to provide visual hints that the function or destination of this link differs from the first.

HTML. Nothing new here:

<ul class="links">
    <li><a href="http://www.fusion.com.au/">Fusion</a></li>
    <li><a href="http://jquery.com/">jQuery</a></li>
    <li><a href="http://www.google.com.au/">Google</a></li>
</ul>

JavaScript. If by chance these classes conflict with other classes in your document they may be customised: 

<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
    $('.links li').biggerlink({clickableclass:'yum',hoverclass:'roll'});
</script>

Things not likely to work as expected

Known issues

Download version 2

Thanks

Plugin by Oliver Boermans. Made easy by jQuery.

The first version of this code was 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.