12
Oct
2007
Making DIV a Link - Javascript Vs CSS?
By Jeeremie. Posted in AJAX / Javascript, HTML / CSSFew days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple:
The Javascript Technique:
<div id="header" onclick="location.href='index.php';" style="cursor:pointer;"><a href="#"></a></div> |
By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?
Here is the CSS technique:
Now, let’s see how it works with CSS.
First, put a link inside your div:
<div id="header"><a href="#"></a></div> |
…and now set the link’s display property to 100% to fill the DIV in your stylesheet:
#header { width: 300px; height: 100px; border: solid #EEE; } #header a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; } #header a:hover { text-decoration: none; background-color: #EFEFEF; } |
Conclusion:
As you can see, the Javascript technique is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won’t see the link.
Popularity: 9% [?]
March 5th, 2008 at 11:42 pm
Seeing developers use a div as a hyperlink drives me nuts. Unwillingness to adhere to standards renders my screen reader useless.Then again, when their clients fail usability/accessibility testing or can’t get 508 compliance … they keep us developers who maintain standards compliance employed. Guess its a sliver-lining kinda thing, right?
March 6th, 2008 at 10:08 am
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 <div> 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 <textarea>… when writing this comment it changed to a read-only mode, where I had to copy the text and reload the page.
March 6th, 2008 at 1:15 pm
@Craig: Weird, I have tried the text editing area as admin and as a guest. I have never had any problem.
March 6th, 2008 at 1:19 pm
This is just a test as a guest. I don’t see any problem. What browser do you use, Craig?
March 6th, 2008 at 4:13 pm
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.
March 6th, 2008 at 5:27 pm
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.
March 9th, 2008 at 7:19 pm
@JeeremieI’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).