Unobtrusive click-able boxes

The bigger the click area the better. But recurring links are kind of bad, considering SEO. Also, an anchor wrapping block-level elements should be avoided to maintain valid markup. But there is an easy way to accomplish a clean and unobtrusive Javascript solution. Below I introduce my simple to implement approach.

Just add the following javascript snippet to your JS file

$(document).ready(function () {
    $(".click_box").click(function(){
      $("a:first", $(this)).trigger("click");
    });
});

Ommit the onload initializer if already implemented

Here is a usage example: A click anywhere in this div container will trigger a click-event on the first occuring link in this container.

<div class="click_box">
    <a href="some_page.html">On this link the click-event will be triggered, because it’s the first in the click_box container</a>
    <img src="someimage.png" alt="even a click on an image will trigger the click-event on the frist occuring link in the click_box container" />
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>

Because this solution is based on a class, multiple “click boxes” on one page are possible

veröffentlicht am 09.03.2011 um 15:28 von Martin Labuschin in Accessibility, Javascript, XHTML, Usability

Unobtrusive click-able boxes

Tweet