One thing I’m always in need of is to make a block element of a web page clickable. For example, the block may be a DIV element containing an image, heading and summary text. It may be a table row, a list element, search result or a point of sale.

The way I would need the element to behave is, once clicked, to navigate the user to the URL specified in the first anchor within the panel.

I use the following code to achieve this:

$(document).ready(function() {

    SetPanelLinks();

});

function SetPanelLinks() {

    $('.linkpanel')
        .click(function() {
            var link = $(this).find("a").eq(0);
            location.href = link.attr("href");
        })
}

This of course relies upon me placing a “linkpanel” class on each element I require to inherit this functionality.

I can further extend this by allowing for a rollover state:

function SetPanelLinks() {

    $('.linkpanel')
        .click(function() {
            var link = $(this).find("a").eq(0);
            location.href = link.attr("href");
        })
        .mouseover(function() {
            $(this).css("cursor", "pointer");
            $(this).toggleClass("linkpanel_hover", true);
        })
        .mouseout(function() {
            $(this).css("cursor", "default");
            $(this).toggleClass("linkpanel_hover", false);
        });
}

I’m absolutely sure this is far from perfect – for example, there is no target consideration. But it does the job nicely.