Make an entire div clickable

JavaScript
1

I’m looking for a way to make an entire div clickable on this page: http://tinyurl.com/2ektm28 . Scroll down through the menu categories and you’ll see a background change (for now) on the divs. And right now, the link is only on the h2. But I want the whole div to be clickable.

I found this on CSS-Tricks, but it’s not working for me. http://css-tricks.com/snippets/jquery/make-entire-div-clickable/ What am I missing?

2

Thank you so much for an informative answer. I appreciate it! It’s working now. :slight_smile:

3

Since wrapping the entire DIV in the anchor is invalid, you’re left with some options that all have drawbacks:

  1. Make your markup not as good and convert the DIV to anchor and then use SPANs for everything inside.

  2. Apply an onclick event to the DIV and change your CSS to include this:

div:hover {
  cursor:pointer
}

This means it’ll “sort of” look like a link, but the status bar won’t show the link address when you hover over it (except for hovering over the h3 anchor).

  1. Absolutely-position a link over the DIV so it covers it entirely. This has the drawback that the text underneath won’t be selectable, but is normally a bit difficult with ordinary links anyway.

  2. Make the yellow box be a nice big anchor with a big padding-top, and the H3 also have an anchor (like it is now). Then you absolutely position the H3 so it moves down into the padding-top space. This will also affect your markup somewhat, since you’d be changing a nice <p> for an anchor, or wrapping the contents of the <p> in an anchor. If you’re worried about SEO here, then you can do this with javascript after the page has loaded.

As for that jQuery on css-tricks, you’re missing something that they don’t mention. That code has to run after the DOM has loaded, so you need to use jQuery’s special “DOM loaded” method:

$(function() {
  $(".item").click(function(){
    window.location=$(this).find("h2 a").attr("href");
    return false;
  });
});