Make a whole div clickable

Question

I have a link inside a div and I need to make the whole div clickable... found several tutorials on the Internet but non of them worked for me...

Answer 1

Raw JavaScript:

<div onclick="alert('You clicked me !')">Click Me</div>

jQuery:

$('#div_id').click(function(){
  alert('Clicked !!');
});

Update: (With reference to your link)

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

jQuery:

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

The above code cancels the default action of link (going to link) with return false and binds the click event to the div with class myBox, then it finds the link's src attribute inside the div and window.location is used to redirect the page to the src attribute of the link present inside the div. So this basically makes the div clickable.

Answer 2

You can use a JavaScript code at to achieve your goal, please take a look at this tutorial.

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

and this is the HTML example :

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

but there is a tricky way to achieve this using a CSS code you must nest an anchor tag inside your div tag and you must apply this property to it,

display:block;

when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:

height:60px;

this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.

this is really tricky and simple and it's just created using CSS code.

here is an example: http://jsfiddle.net/hbirjand/RG8wW/