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.
Enjoyed this? Follow me on Mastodon or add the RSS, euh ATOM feed to your feed reader.
Dit artikel van murblog van Maarten Brouwers (murb) is in licentie gegeven volgens een Creative Commons Naamsvermelding 3.0 Nederland licentie .