Some people were just made for writing their thoughts down. A friend, Bushy aka Bushington aka Andrew is one of these people. He has his own blog over at Amused Bush and he writes like I would like to be able to write.

He’s a wordsmith, a copywriter and has ghost written a book on integrated marketing amongst many other things.

Check his blog out. Learn something new. Discover how to construct nipple tassels.

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.