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...
-
1Can you paste some code snippets here of what isn't working?Kimball Robinson– Kimball Robinson2010-07-20 17:46:05 +00:00Commented Jul 20, 2010 at 17:46
-
As I saw on the internet I should add the display:block attribute to the div but it doesn't work... besides I found one javascript solution but it didn't work as well: css-tricks.com/snippets/jquery/make-entire-div-clickableKing Julien– King Julien2010-07-20 17:49:05 +00:00Commented Jul 20, 2010 at 17:49
-
1Why is this tagged as css? Should be javascript.Nick H– Nick H2010-07-20 17:51:12 +00:00Commented Jul 20, 2010 at 17:51
Add a comment
|
5 Answers
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.
Comments
If you're saying you want the entire div to be clickable for navigation, then you can either wrap it with an anchor () tag, which is not standards compliant, or add a css style to the contained anchor tag, making it the size of the containing div, which is standards compliant. I will use a div that is 250px by 250px in this example:
<div id="container"><a href="" style="display:block;width:250px;height:250px;">Link</a></div>
3 Comments
Eric
Why is it not standards compliant to have a
div within an a? Is there a useful resource somewhere that dictates which elements can reside in which (I realize that block-level within inline is incorrect, but...)?
Allen Gingrich
You cannot have a block display element contained in an inline element. That's right. It won't break your code in browsers, but it most likely will not validate correctly. Glad I could help, Levani.
Rob Forrest
This is a really nice solution that avoids the classic javascript window.location='', thanks.
I ran into this problem last year. I simply added an onclick to the div. Like so: <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">
Comments
In HTML5 it is now valid to have a div or whatever inside an a. That should do the trick. No scripts needed, unless that's what's in your link.
Comments
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/
