A common interface on modern-day websites is that of a title, summary and a “read more”-style link. Normally only the title and “read more” text is linked, however, the entire content would benefit from this behaviour.
An important principle when developing for interactive environments is that of Fitts’ Law, which states;
The time to acquire a target is a function of the distance to and size of the target.
Basically, this boils down to — the bigger the target area the better!.
“Fitted” is a simple solution to this common problem — a lightweight jQuery plugin which links entire blocks to a page defined within the block.
Further Reading…
Download…
Want to use “Fitted” on your own website? No problem. You can download the full version.
Write Your Own…
Want to write your own plugin? I start all my plugins with a simple “skeleton” wrapper. Simply download my jQuery Plugin Skeleton and get started.
Run Code…
This page makes use of Run Code, a simple jquery plugin which converts your code examples to live behaviour.
Examples…
A Normal Box
This is a container which hasn’t been “Fitted” with the plugin. You must click the link directly.
Defaults
This container has the default fitted box applied. By default, if a title appears on the link, the title is added to the container, and therefore is shown when you move over any area of the box.
$('.clickable').fitted();Meta Override
If the metadata plugin is available to the plugin, it will override default settings.
This example is setting the status to be true. This means, if your browser is configured to, it will show the anchor URL in the status bar, like a normal link. It is also turning off the title attribute for the box.
$('.clickable').fitted();A Customised Box
This has settings applied directly when the plugin is called.
$('#custom').fitted({
'status' : true,
'title' : false
})