Making block elements link

Een artikel, meer 13 jaar geleden geplaatst onder html, snippet, jquery, code, handy, link, block & javascript.

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…

Ga verder met lezen en/of reageer...

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.

Suggesting input - a jQuery snippet

Een artikel, bijna 14 jaren geleden geplaatst onder snippet, jquery, code, handy & suggestions.

Today I'd like to share with you a snippet that simply uses the 'title' value of an input to make a suggestion. It degrades nicely, also users with Javascript turned off are able to get the hint, by hovering over.

$('input[title]') .val( function(i,value) { return value == "" ? $(this).attr("title") : value; }) .focus( function() { if ($(this).attr("title") == $(this).val()) $(this).val(""); } ); // added: don't submit the suggested values $('form').submit(function() { $('input[title]').val( function(i,value) { return value == $(this).attr("title") ? "" : value; } );

});

For optimal userfriendlyness, make the suggested input a little less dark than the user filled in ones.

BTW. It assumes you are already using the jQuery library.

Ga verder met lezen en/of reageer...

murb blog