Comments on: Making DIV a Link – Javascript Vs CSS?

By: Minh Vuong Nguyen

Minh Vuong Nguyen — Thu, 02 Feb 2012 06:26:06 +0000

Thanks very much.
But…i’ve a question about “onclick”
May it’d open new windows when i’d click on div Tag? Like “target=’_blank’”?
Thanks!

By: dan

dan — Tue, 03 Aug 2010 09:59:35 +0000

For example I used js when div doesn’t have any importance (eg. voting)and css on the navigation. I like your site.

By: Montana Flynn

Montana Flynn — Sat, 18 Apr 2009 03:31:00 +0000

great ways to do it, but their are a few caveats.

1) The javascript way will not be spidered by search engines (bad seo)

2) The CSS way cannot be used if you have any header tags in the div.

How can one get around these issues?

By: Silver Firefly

Silver Firefly — Wed, 15 Apr 2009 22:08:44 +0000

I would just use CSS for this. I never use Javascript unless it degrades fully.

By: Craig Francis

Craig Francis — Sun, 09 Mar 2008 18:19:19 +0000

@Jeremie TisseauI’m using FireFox 2.0.0.12 on a mac… not too sure how I managed it, but I think I was switching tabs at the time, and I think I might have increased the font size… but cannot replicate now unfortunately.Although, another feature… in my last post, I split that second paragraph into multiple paragraphs (line breaks before and after the link).

By: Bryan Migliorisi

Bryan Migliorisi — Thu, 06 Mar 2008 16:27:23 +0000

When I need something similar, I find the best thing to do is to add a link with a specific class to a div (or whatever element you want to be clickable). In this case lets say we named the class divLink. Use JS to find each child link element with a class of divLink and apply its hRef attribute as the location.href in an onClick even of the parent element (ex. div).If they have JS on, it will work as you intend it to. If they do not have JS on, they see a normal link and that is fine for most people, search engines, and screen readers. If they have CSS off it will not affect this technique.

By: Ken Kolano

Ken Kolano — Thu, 06 Mar 2008 15:13:07 +0000

The CSS method has some other significant advantages over the JS method, mainly related to the CSS method using a real link:-It will work just like every other link (i.e. have right click options to bookmark it, open in new window, etc).-Outside scripts (Greasemonkey, etc.) will recognize it as a link.-CSS applies across the site in a standard manner, but maintaining the described JS method needs custom edits across a site. The JS method probably should pull it’s URL from a DOM lookup to an embedded link tag, but that still seems more fiddley than the CSS method.

By: Jeremie Tisseau

Jeremie Tisseau — Thu, 06 Mar 2008 12:19:54 +0000

This is just a test as a guest. I don’t see any problem. What browser do you use, Craig?

By: Jeremie Tisseau

Jeremie Tisseau — Thu, 06 Mar 2008 12:15:06 +0000

@Craig: Weird, I have tried the text editing area as admin and as a guest. I have never had any problem.

By: Craig Francis

Craig Francis — Thu, 06 Mar 2008 09:08:30 +0000

Just to point out, as this method works solely though JavaScript, it
will not work with browsers (User Agents) that do not support
JavaScript... for example search engine spiders.

A better solution is to add one (and only one) link in a

as normal, then get
some JavaScript to find the link, look for the parent element (i.e. the
div) make that "click able", and then off-screen the link, so users who cannot use a mouse (screen readers, keyboard navigation) can still use the link.Have a look at:http://www.craigfrancis.co.uk/features/code/jsLinkedHolder/ Also, can you remove this text editing box, and just use a simple