PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Make Entire Div Clickable

Make Entire Div Clickable

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

Looks for a link inside div with class of "myBox". Redirects to that links value when anywhere in div is clicked.

Reference HTML:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

Subscribe to The Thread

  1. Dyllon

    works very nicely. thanks.

    Reply ↓
  2. Nathan

    Chris, thanks for this. When I tried this it worked for a hover over empty space in the div but not for the link itself; when I clicked on the link itself it went to a 404 error. Any ideas?

    Reply ↓
  3. Kartlos Tchavelachvili

    Very cool! Just right now I have used this in my project :D

    Reply ↓
  4. Bob Hay

    Very very nice.

    I had a job interview today. When asked if there were any blogs I read regularly, I mentioned css-tricks, and the interviewer said that was one of his faves, too.

    Reply ↓
  5. Nathan

    Great technique.
    What if you want to have other links inside the linked div? How would you keep those working still?

    Reply ↓
  6. xRommelx

    this is very useful for my current project

    Reply ↓
  7. Dale Sande

    Once again, TOTALLY AWESOME!!!

    Reply ↓
  8. Christoph

    “window.location” seems not to work in IE if you are using RealURL. Any Ideas?

    Thx
    Christoph

    Reply ↓
  9. Christoph

    fixed it this way:

    var base = $j(“base”).attr(“href”);
    $j(“#menu li a”).each(function(){
    $j(this).attr(“href”, base+$j(this).attr(“href”));
    });

    Reply ↓
  10. Tyler

    I think i am going to try this with tables…. Or is there an easier way?

    Reply ↓
  11. Artur Ejsmont

    wow … very sweet idea :- )

    thanks

    Reply ↓
  12. Edwin

    Nice work
    really helpful

    Reply ↓
  13. TerranRich

    There’s a pure CSS way to go about doing this. Just have an anchor (a) tag within the DIV that links to the URL you want. Then, set it to a block display, relative positioning, left and top equal to 0, width and height to full (or use jQuery to match all A’s within DIV’s to the same dimensions as the DIV).

    Reply ↓
    • Danny P

      Great Solution! This really helped.

  14. Derek

    This is awesome. I’ve been trying to figure out a better way to do this for a while.

    How can I ensure that the href title appears when I hover on the div and also that the URL appears in the status bar of the browser I’m using?

    Reply ↓
  15. El garch Hicham

    Very nice thanks :D

    Reply ↓
  16. Dominique

    Its much nicer this way and not having to wrap a whole div in an A tag.

    For usability (dependent on what you are using it for), remember to add cursor:pointer in your css. Nice simple bit of code thanks.

    Reply ↓
  17. Dearthelusion

    Hi,

    I want to make entire div clickable, but my div is consisting of news ticker and each of then linked to different URL, will this solution work in these situation?

    Thanks,
    Dearthelusion

    Reply ↓
    • l3v1tcl30s

      How about opening in a new window?

  18. l3v1tcl30s

    oops, didn’t mean that to be a direct reply =]

    I’m new to scripting in jQuery. How would I set the target to be a new window?

    Any help would be greatly appreciated!

    Reply ↓
  19. Mdbx

    @l3v1tcl30s

    $(function() {
  $("a").attr("target","_blank");
});
    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~