Submit a site to jQuery Style

If you think you know of a site that deserves to be showcased here, please fill in this form.





Please tick the appropriate categories:









Definition List Block Clickable

Added on Aug 09, 2009

A while ago I read a tutorial over at Web Designer Wall about making an entire <li> block clickable. On my personal website, I have a definition list with some links to other pages on the site. I wanted these definition lists to be block clickable and set about creating the same effect for them.

Suppose you have a <dl> with an id=“defList” and you want to make the nested <dt> followed by a <dd> entirely clickable (as if they’re one element). You can assign a click function to <dd> and the <dt> together and when they’re is clicked, the function will find the <a> element that resides in the <dt> and redirect the browser location to its href attribute value.

There is a specific format for this to work; you need to have the main link in the <dt> and the rest of your content in the <dd>.

Here’s the HTML:


<dl id=“defList”>
	<dt><a href=“http://martineau.tv/portfolio/” title=“Zander’s Portfolio”>Zander’s Portfolio</a></dt>
<dd>Design and development for the iPhone and other smartphones to video based websites.</dd>
	<dt><a href=“http://jquerystyle.com” title=“jQuery Style”>jQuery Style</a></dt>
	<dd>jQuery Style is a personal project aimed at web designers and developers. It is a showcase of websites that use jQuery in interesting ways.</dd>
	<dt><a href=“http://txpcoder.com” title=”<txp:coder/>”><txp:coder/></a></dt>
	<dd><txp:coder/> converts your designs or existing website into a fully functioning, content managed, Textpattern site.</dd>
</dl>

Here’s the jQuery code:

$(”#defList dd”).click(function(){
	  		window.location=$(this).prev().find(“a”).attr(“href”); return false;
});

Add the hover effect:

To add a hover effect so that when you hover over either the <dt> or the following <dd>, add this:


/* Add .hover class to the next <dd> when dt is hovered over */
$(’#defList dt’).hover(function() {
    $(this).next().addClass(‘hover’).css({‘cursor’ : ‘pointer’});	
}, function() {
    $(this).next().removeClass(‘hover’);
});
/* Add .hover class to previous <dt> when dd is hovered over */
$(’#defList dd’).hover(function() {
    $(this).prev().addClass(‘hover’).css({‘cursor’ : ‘pointer’});
}, function() {
    $(this).prev().removeClass(‘hover’);
});

You may also have noticed that there is also some added css that’s applied to the hover effect, this is to change the cursor to a pointer to appear as if its a actual link.

This is only a little tute and created out of necessity for myself, if anyone thinks it’s useful, likes it or thinks there may be a more efficient way to do this, then please leave a comment.

jQuery Style Recommends

If you are thinking or purchasing any of these products, please consider using these links to do so, you will be helping this site grow.