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>
works very nicely. thanks.
I created a Jquery plugin to do this. Check this: http://plugins.jquery.com/project/divlinker
Best solution for a clickable div. Thank you.
btw @Leandro, Link is not working :(
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?
It will make any div with the .myBox class clickable, so if there’s no link in one, it’ll 404, is that the problem?
Very cool! Just right now I have used this in my project :D
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.
Great technique.
What if you want to have other links inside the linked div? How would you keep those working still?
this is very useful for my current project
Once again, TOTALLY AWESOME!!!
“window.location” seems not to work in IE if you are using RealURL. Any Ideas?
Thx
Christoph
fixed it this way:
I think i am going to try this with tables…. Or is there an easier way?
did it work on thie table.
wow … very sweet idea :- )
thanks
Nice work
really helpful
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).
Great Solution! This really helped.
Awesome… this helped me alot!
great tip but it should be absolute position not relative position.
so set the div to relative position, and the “a” tag to
display:block; absolute; top:0; left:0; width: 300px; height:200px;Don’t listen to the person above me.
They will make your ENTIRE page a link…
Relative will make your “top:0; left:0;” relative to the DIV in which it’s contained, rather than absolute, which makes it top / left of the PAGE, not just DIV.
You’re welcome :)
This method works btw, but will interact differently depending on what other text / images / etc. you have in the same div, since it’s block display, so make sure you know what you want where prior to setting this up.
Absolute positioning will be relative to the first parent element that has positioning set. In dan’s post he said to set the div’s position to relative and then make the link’s position absolute. This means that the top:0; left:0; will be referencing the containing div not the body of the page. If the position was not set on the parent div or any other ancestor elements, then it would take up the whole page as you pointed out.
That being said I’m not sure if it is better to use absolute or relative positioning for the links, or if there is even a significant difference.
Michael’s answer is not entirely correct, and Malcolm did a good job of explaining why.
I, too, am wondering whether absolute/relative positioning is even necessary here. I’ve successfully made entire divs clickable without messing with the positioning of the links. Hmmm I’ll have to look into this.
I believe Dan’s answer to be correct, and sadly to float this over content out of the flow of text & images requires an absolute positioning (within a relative positioned parent element).
Micheal’s comment appears to be confusing ‘absolute’ with ‘fixed’ which automatically uses the edge of the browser chrome for positioning.
however support for css3 positioning is less reliable than the ubiquitous jQuery currently.
Yes. Yes yes yes. Delightful. Thanks, TerranRich.
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?
Very nice thanks :D
fasf
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.
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
How about opening in a new window?
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!
@l3v1tcl30s
So how do you combine that with Chris’ code? I’ve tried all sorts of combinations, like:
but I can’t get it to work
This is not working:
As Mike was asking, Anyway to add target=”_blank” to roy post original jquery code?
Thanks in advance.
This doesn’t seem to work with IE 8.0. Is that correct?
if the div consist of more than 1 hyperlink. which url will the jquery reads
Yeh roy! Thanks!
Quick and lightweight, thanks! You can also wrap an bunch of elements in “a” tags, and this is semantic HTML5 markup. But it’ve had issues with that in older browsers. If you were to go that route make sure all the elements inside the “a” are inline by default (like a span or p), if necessary you can change them to display: block in the CSS.
Chris’ method seems a little cleaner tho ;)
Oh, thanks! It’s the solution I’ve beem looking for!
Nice tricks Thanks!
Why not just do this:
This is really simple and it works pretty well.
Mr John, your idea is very simple & working fine for all browser types :)
Seems like this is an old thread, but hey it was still useful to me!
Also, thanks to the person above me (John), I actually used your solution.
Regards
What would be the best practice to apply this into a Joomla! Website?
I found this method and I wanted to share it with you guys because I found it to be just want I needed for a DIV that contains more then one link:
You can even use this for more then one div if the window.location is the same for both of them like this:
Cool solution, but in case someone is googling around for a solution (like I was today), I found a thread over in stackoverflow for a solution sans js:
http://stackoverflow.com/questions/796087/make-a-div-into-a-link
For those looking for valid HTML way without javascript.
cheers!
Stunning simple solution.
And by adding a tiny bit of jquery, you get all links you want opening in a new window:
http://jsfiddle.net/hf75B/81/
Good search Tak, thx a lot.
The solution gets even simpler…no need for jquery sizing or any of that business:
div {
position: relative;
}
a {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Or by inserting the following within your div tag:
onclick=”location.href=’http://www.example.com’;” style=”cursor:pointer;
For those using HTML 5 you can now wrap any block-level element in an A tag:
<a href=”#”>
<div>
blah blah blah
</div>
</a>
And for hover state just add a class to your div, and then add a css class .whatever:hover {}.
This is a javascript trick…not a CSS trick.
thanks man, this works like magic
hi there it is what I got to get 2 div with images bg clickable
I am just looking for the solution to get it open in a new window target:”_blank”
can someone help me on this as the info up above are not working for me
var Page = {
mouse:{x:0,y:0},
start:function() {
$j(“.mblock, .social”).bind(“click”,function(evt) {
if ($j(this).attr(“href”)) {
window.location = $j(this).attr(“href”) ;
}
}) ;
}
} ;
var $j = jQuery.noConflict() ;
$j(document).ready(Page.start) ;
oups
I’m sorry, but any solution that involves javascript is complete overkill. This can be accomplished quite simply using HTML and CSS alone:
HTML CODE:
CSS CODE:
Just specify the width and height of the clickable area.
Less lines of code is always better.
I use javascript only when necessary. Remember that 3% of users have it disabled on their browsers.
Or you can simply add this inside your div tag:
onclick=”location.href=’http://www.example.com’;” style=”cursor:pointer;
Fewest lines as possible!
Hi,
Anyway to add target=”_blank” to this:
Simply adding:
as a new function within the jquery chunk is not working for me.
Thanks in advance.
This is really cool. But how to make whole not clickable.
I mean whole li not div clickable
Here is a much easier way:
Insert this within the DIV tag that you want to make linkable:
onclick=”location.href=’http://www.example.com’;” style=”cursor:pointer;
That’s all you have to do.
Thanks Chris, I just used this on the homepage of my site and added:
.myBox { cursor: hand; cursor: pointer; }
to force a hand cursor when rolling over the .
Out of interest, why not just use jQuery to trigger the click event on the link?
$('.myBox').click(function(){ $(this).find('a').trigger('click'); });To make the link open in a new window/new tab, use the following code:
After many answers on many sites including stackoverflow, this thread actually had working solutions. Thanks to all.
I’ve got a clickable div. With the HTML5 data- attribute I declare the link
f.e. <div class=”item” data-href=”LINK”></div>
In this div there is a link. If I click the link the page go to the data-href link.
But can you trigger that if you click the link in the text that you don’t go to the link that is specified in the data-href?
example on jsfiddle
The javascript is a bit of an overkill… An easier solution would be to wrap the div in a “link” with a display:block style
Then style your CSS to remove the underline or whatever.. Hope this helps.. :)
Adam, this solution works like a charm. Thanks.
Adam, Jaret,
I think this is valid HTML 5 but is it valid HTML 4?
It works, but it’s very bad for SEO. The method of Adam is way better.
Better if you don’t have to worry about IExplorer8 and lower, and even better if you remove the inline css rule…
you can add functionality to this to allow you to insert subsequent links from the first by inserting and else statement and inserting this:
else{
window.location=e.attr(“href”);
}
Can’t recall where I found this or I’d give credit, but this is what works for me.
div
{
position: relative;
}
Nice Giancarlo,
Unfortunately, doesnt that prevent me from making a background color change on hover?
I’ve read through all of the above. What’s the verdict that works in IE7 and above and allows a background color change on hover? I’m confused. The original doesn’t?
Nice trick, but we can simplified to this:
jQuery:
$('#click-div').click(function() { window.location = $(this).attr("data-href"); return false; });The above will create a square click-able div, the only annoying think here is if you clicked on it, on the location bar you will see
#added to the end of address, to get over this, replace#indata-hrefattribute of the div withjavascript:;. Tested on FireFox 19.Great! Fast and clean solution!
lol. didn’t use markdown
<a href=”blah”><div>blah blah blah</div></a>