JavaScript is disabled!

clickable

clickable( copyTitle );

This jQuery plugin adds a clickable() method that makes elements (non-links) clickable, linking to the location specified by the href attribute of the first descending link, where href is not "#" and does not start with "javascript:". If the link that provides the target location has a title attribute, this attribute will be copied to the element that's made clickable. This feature can be turned off with an optional argument.

Returns

jQuery object

Arguments

copyTitle [ Boolean | optional ]
Specifies whether or not to copy the title attribute from the link to clickable element if it has none yet (default: true).

DOM alterations

This method adds the following hooks:

  • on the matching elements:
    .jsClickable
    .jsClickableHover (onmouseover, as IE6 doesn't support :hover on elements other than links)
    .jsClickableFocus (when guiding link gets focus)
  • on the link that provides the target location:
    .jsGuide

Examples

<ul class="overview">
    <li>
        <p>Lorem ipsum dolor <a href="sitamet.html" title="Sit amet">sit amet</a> ...</p>
    </li>
    <li>
        <p>Vestibulum <a href="lorem.html">a lorem</a> a felis ...</p>
    </li>
    <li>
        <p>Donec sagittis <a href="#">nulla sed nisl</a> ...</p>
    </li>
    <li>
        <p>Curabitur et <a href="javascript:alert('...');">turpis non libero</a> luctus cursus ...</p>
    </li>
</ul>

Here $("ul.overview li").clickable(); will make the first two list items clickable (the last two are filtered out because of their href value), which will result in the following DOM structure:

<ul class="overview">
    <li class="jsClickable" title="Sit amet">
        <p>Lorem ipsum dolor <a class="jsGuide" href="sitamet.html" title="Sit amet">sit amet</a> ...</p>
    </li>
    <li class="jsClickable">
        <p>Vestibulum <a class="jsGuide" href="lorem.html">a lorem</a> a felis ...</p>
    </li>
    <li>
        <p>Donec sagittis <a href="#">nulla sed nisl</a> ...</p>
    </li>
    <li>
        <p>Curabitur et <a href="javascript:alert('...');">turpis non libero</a> luctus cursus ...</p>
    </li>
</ul>

The classNames that are added can be used like this in CSS:

li.jsClickable {
    cursor: pointer;
}

li.jsClickable:hover, li.jsClickableHover, li.jsClickableFocus,
li.jsClickable:hover a.jsGuide, li.jsClickableHover a.jsGuide, li.jsClickableFocus a.jsGuide {
    text-decoration: underline;
}

Downloads

jquery.clickable-0.1.9.js (1.89kB)

Versions