Making block elements link my way of making block elements link to pages

An article, posted more than 8 years ago filed in , , , , , , & .

There is no standard way of linking block elements to pages in HTML. But sometimes you do need it. The <a>-element doesn't support any block elements inside (such as <div> etc.). I solve the problem with a jQuery snippet that allows me to simply add 'js_blocklink' to a block elements class and the jQuery code deals with the rest. It does assume that the first link is the 'main link' (also needed for graceful degradation when Javascript for some reason is not available). A bonus feature is that other links may still exist, and stay working.

function enableJsBlockLinks() {
    $(".js_blocklink").each(function() {
        $(this).click(function() {
            $(this).find("a").each(function(index) {
                a = $(this).attr("href");
                if (a != undefined && a != null && a != "#" && a.indexOf("undefined")==-1) {
                    document.location = $(this).attr("href"); return false;
                }
            });
        });
        $(this).hover(
            function(){$(this).css("cursor","pointer")},
            function(){$(this).css("cursor","auto")}
        );
        $(this).find("a").click(function(e) {
            e.stopPropagation();
        })
    })
}

Have fun.

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.