Comments on: Make a div clickable http://friendlybit.com/js/make-a-div-clickable/ You have found Friendly Bit, a web development blog. I focus on client side technologies like CSS, HTML and Javascript. You find my articles below and categories to the right. Fri, 12 Mar 2010 22:50:44 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Kristopherhttp://friendlybit.com/js/make-a-div-clickable/#comment-33356 Kristopher Tue, 19 Jan 2010 13:16:32 +0000 http://friendlybit.com/?p=498#comment-33356 Nice! I love the fallback method and using the first link, instead of just hard coding some URL on the div. Very cool! Nice! I love the fallback method and using the first link, instead of just hard coding some URL on the div. Very cool!

]]> By: Lewis Litanzioshttp://friendlybit.com/js/make-a-div-clickable/#comment-33131 Lewis Litanzios Fri, 16 Oct 2009 22:38:04 +0000 http://friendlybit.com/?p=498#comment-33131 Yea, the "1's" in pagination are a culprit here - pet usability hate of mine!I used this typa technique recently on a 'Read more...' link: http://is.gd/4n09N (pulling in the post title URL and then hiding the title). Yea, the “1’s” in pagination are a culprit here – pet usability hate of mine!

I used this typa technique recently on a ‘Read more…’ link: http://is.gd/4n09N (pulling in the post title URL and then hiding the title).

]]> By: Hacer un div clicable | Artimedia Bloghttp://friendlybit.com/js/make-a-div-clickable/#comment-32987 Hacer un div clicable | Artimedia Blog Thu, 10 Sep 2009 15:23:21 +0000 http://friendlybit.com/?p=498#comment-32987 [...] veces interesa hacer una zona clicable en vez de un enlace de texto pequeño. En este artículo de friendlybit.com se presenta el código para hacer un div clicable que además puede contener otros enlaces [...] [...] veces interesa hacer una zona clicable en vez de un enlace de texto pequeño. En este artículo de friendlybit.com se presenta el código para hacer un div clicable que además puede contener otros enlaces [...]

]]> By: Alexhttp://friendlybit.com/js/make-a-div-clickable/#comment-32927 Alex Tue, 25 Aug 2009 02:04:16 +0000 http://friendlybit.com/?p=498#comment-32927 @Emil, sorry i noticed that the real link retains it's capabilities only after i've posted my last comment.What i really like is that even if javascript is disabled you don't get any error messages and the div block remains as if there is no javascript there. @Emil, sorry i noticed that the real link retains it’s capabilities only after i’ve posted my last comment.

What i really like is that even if javascript is disabled you don’t get any error messages and the div block remains as if there is no javascript there.

]]> By: Emil Stenströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32926 Emil Stenström Mon, 24 Aug 2009 19:51:53 +0000 http://friendlybit.com/?p=498#comment-32926 @Alex: Unfortunately, there's no easy way to do that to the whole block. Though you could right-click on the real link, and do what you want there. @Alex: Unfortunately, there’s no easy way to do that to the whole block. Though you could right-click on the real link, and do what you want there.

]]> By: Alexhttp://friendlybit.com/js/make-a-div-clickable/#comment-32925 Alex Sun, 23 Aug 2009 16:03:26 +0000 http://friendlybit.com/?p=498#comment-32925 @Emil, if that's cleared, how can we make the link to open in a new tab/windows on right click? @Emil, if that’s cleared, how can we make the link to open in a new tab/windows on right click?

]]> By: Emil Stenströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32922 Emil Stenström Sat, 22 Aug 2009 17:27:07 +0000 http://friendlybit.com/?p=498#comment-32922 @Alex: This way of doing this is unobtrusive, which means that even if Google wouldn't read the data, it could still find and parse the link. @Alex: This way of doing this is unobtrusive, which means that even if Google wouldn’t read the data, it could still find and parse the link.

]]> By: Alexhttp://friendlybit.com/js/make-a-div-clickable/#comment-32920 Alex Fri, 21 Aug 2009 18:13:02 +0000 http://friendlybit.com/?p=498#comment-32920 Do you think that by using this javascript method the SEO of that page will remain the same? Google has some issues reading javascript..Anyway the demo looks great! Do you think that by using this javascript method the SEO of that page will remain the same? Google has some issues reading javascript..

Anyway the demo looks great!

]]> By: Emil Stenströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32868 Emil Stenström Fri, 24 Jul 2009 11:11:55 +0000 http://friendlybit.com/?p=498#comment-32868 @Andreas: It's actually not exactly the same, as it has some strange side effects. Since the image covers all the text and images in the teaser, you can select or save the text or the image. And you can't have more than one link in the same teaser, something that might matter for some (although few) people. On the other hand you get the possibility to middle-click the link, and all that.Nah, I still like the HTML5 solution (see above comment) best I think. @Andreas: It’s actually not exactly the same, as it has some strange side effects. Since the image covers all the text and images in the teaser, you can select or save the text or the image. And you can’t have more than one link in the same teaser, something that might matter for some (although few) people. On the other hand you get the possibility to middle-click the link, and all that.

Nah, I still like the HTML5 solution (see above comment) best I think.

]]> By: Andreashttp://friendlybit.com/js/make-a-div-clickable/#comment-32867 Andreas Fri, 24 Jul 2009 10:58:43 +0000 http://friendlybit.com/?p=498#comment-32867 Simply positioning an a-element absolutely on top of the div with a width and height of 100% would achieve the same thing, no? _And_ it would act exactly the same as a real link (as it _is_ a real link).I've done it this way before though as well, just a thought.Regarding the JS-only CSS; I've used a js-enabled/js-disabled class on the body-element for ages now and it's perfect for things like this.I add the js-enabled class immediately after the opening body-tag so there'll be no lag for the JS-only styling:<code> <body class="js-disabled"> <script type="text/javascript"> document.body.className = 'js-enabled'; </script> </code>As any performance-aware front-end developer I include all my JS before the _closing_ body-tag so it normally takes a couple of seconds before it kicks in. Giving body the js-enabled class at the top avoids styles blinking in though. Simply positioning an a-element absolutely on top of the div with a width and height of 100% would achieve the same thing, no? _And_ it would act exactly the same as a real link (as it _is_ a real link).

I’ve done it this way before though as well, just a thought.

Regarding the JS-only CSS; I’ve used a js-enabled/js-disabled class on the body-element for ages now and it’s perfect for things like this.

I add the js-enabled class immediately after the opening body-tag so there’ll be no lag for the JS-only styling:


<body class="js-disabled">
<script type="text/javascript">
document.body.className = 'js-enabled';
</script>

As any performance-aware front-end developer I include all my JS before the _closing_ body-tag so it normally takes a couple of seconds before it kicks in. Giving body the js-enabled class at the top avoids styles blinking in though.

]]> By: Emil Stenströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32858 Emil Stenström Thu, 23 Jul 2009 18:47:32 +0000 http://friendlybit.com/?p=498#comment-32858 @Stevie D: Nice to see that my scribbling is of use to someone :) @Stevie D: Nice to see that my scribbling is of use to someone :)

]]> By: Stevie Dhttp://friendlybit.com/js/make-a-div-clickable/#comment-32857 Stevie D Thu, 23 Jul 2009 12:07:01 +0000 http://friendlybit.com/?p=498#comment-32857 Brilliant! I have been doing this manually on my website for a few years, just adding an <code>onClick</code> event to the containing <code>div</code> - see website link for example. But this looks like a better solution, means I don't need to worry about putting in the links twice every time.<blockquote>Why not just give links more padding? Making elements clickable that are normally not clickable leads to confusion and is not a behavior users expect.</blockquote> It depends on the nature of the content. In some cases, extra padding, leading or spacing will do a good job. In other cases, it helps to make surrounding content clickable. For example, on my website, there is a 'panel' that contains several items, and making the entire panel into a link makes it easier for users to select it - while, of course, retaining on old fasioned anchor on the first line for accessibility and spiders.By applying <code>:hover</code> properties to the <code>div</code>, you give the visual affordance of a link to users (hand cursor, change of colour), so there should be no problem with unexpected behaviour. Brilliant! I have been doing this manually on my website for a few years, just adding an onClick event to the containing div – see website link for example. But this looks like a better solution, means I don’t need to worry about putting in the links twice every time.

Why not just give links more padding? Making elements clickable that are normally not clickable leads to confusion and is not a behavior users expect.

It depends on the nature of the content. In some cases, extra padding, leading or spacing will do a good job. In other cases, it helps to make surrounding content clickable. For example, on my website, there is a ‘panel’ that contains several items, and making the entire panel into a link makes it easier for users to select it – while, of course, retaining on old fasioned anchor on the first line for accessibility and spiders.

By applying :hover properties to the div, you give the visual affordance of a link to users (hand cursor, change of colour), so there should be no problem with unexpected behaviour.

]]> By: Anders Ytterströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32846 Anders Ytterström Wed, 15 Jul 2009 19:33:22 +0000 http://friendlybit.com/?p=498#comment-32846 In really extreme cases (that is, 80+ teasers) further enhancements can be done by letting a global click listener do the job with event delegation.That will save a few buck on DOMready, especially in IE which is really slow in comparison. In really extreme cases (that is, 80+ teasers) further enhancements can be done by letting a global click listener do the job with event delegation.

That will save a few buck on DOMready, especially in IE which is really slow in comparison.

]]> By: Emil Stenströmhttp://friendlybit.com/js/make-a-div-clickable/#comment-32843 Emil Stenström Wed, 15 Jul 2009 06:39:06 +0000 http://friendlybit.com/?p=498#comment-32843 @Krijn Hoetmer: Great comments, you know a lot about stuff :) A search engine experiment with block links would be interesting. My guess is that the more words you have inside your link, the less weight each of them have. So for SEO, this might not be the most optimal solution. On the other hand, search engines care about words around a link too, so I'm not sure how much of a difference it makes. @Krijn Hoetmer: Great comments, you know a lot about stuff :) A search engine experiment with block links would be interesting. My guess is that the more words you have inside your link, the less weight each of them have. So for SEO, this might not be the most optimal solution. On the other hand, search engines care about words around a link too, so I’m not sure how much of a difference it makes.

]]> By: Krijn Hoetmerhttp://friendlybit.com/js/make-a-div-clickable/#comment-32835 Krijn Hoetmer Mon, 13 Jul 2009 09:12:23 +0000 http://friendlybit.com/?p=498#comment-32835 Also, using this, you get <code>:hover</code> styles for free (without using JS hacks) in IE6, since that babe only understands <code>:hover</code> on <code>a[href]</code>.I only wonder how search engines and AT work with this. "Click here" links clearly suck, but perhaps linking entire blocks of text, including headings, sucks as well. Would using <code>title=""</code> on the link solve that? Somebody should do some study in that field :) Also, using this, you get :hover styles for free (without using JS hacks) in IE6, since that babe only understands :hover on a[href].

I only wonder how search engines and AT work with this. “Click here” links clearly suck, but perhaps linking entire blocks of text, including headings, sucks as well. Would using title="" on the link solve that? Somebody should do some study in that field :)

]]>