Is linking a
using javascript acceptable?

Question

I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?

Example code:

<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
            <div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>

My test page is at http://www.designbyhawk.com/pixel. Updated daily.

Thanks for the help.

@JCOC611 `a` elements are inline, and therefore cannot contain block-level elements such as `div`. Browsers will try to "fix" this for you, and there's no guarantee what they'll do. — lonesomeday, Feb 15 '11 at 23:23
Asked and answered soooo many times... See: [Using Div's instead of anchors](http://stackoverflow.com/questions/633129/using-divs-instead-of-anchors) or [How do you make a div tag into a link](http://stackoverflow.com/questions/1685078/how-do-you-make-a-div-tag-into-a-link) or [Turn Div into Link](http://stackoverflow.com/questions/2134310/turn-div-into-link) or even [Turn a div into a link](http://stackoverflow.com/questions/3412085/turn-a-div-into-a-link)... (short answer: you don't. You turn a link into a div...) — Shog9, Feb 15 '11 at 23:26

score 14 · Accepted Answer · answered Feb 15 '11 at 23:22

14

You don't need to do that. There's a perfectly simple and standards-compliant way to do this.

Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.

See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.

answered Feb 15 '11 at 23:22

lonesomeday

233,373
50
316
318

1

I could be wrong, but regardless of CSS a page with block elements inside `` tags is never going to validate. (**edit** I'm not wrong but then this answer doesn't suggest doing that anyway :-) – Pointy Feb 15 '11 at 23:28
@Pointy: his example shows the `a` inside the `div` - but styled as a block-element (for full-width). You could also nest `span`s inside `a`s, and just style them both as blocks... – Shog9 Feb 15 '11 at 23:30
@Pointy There are no block elements inside my `a` tags... (Though I did have a mismatched `` in there -- [removed](http://jsfiddle.net/8L2Zb/3/).) – lonesomeday Feb 15 '11 at 23:30
Oh durr. I see what you're doing now. Sorry about that! – Pointy Feb 15 '11 at 23:30
An additional problem is that the div is 248 pixels high. If you check out my test site (see post), you'll see that the text is contained in a div within a div. So while this will make a horizontal slice of the larger div clickable, I need the whole thing to be. – jhchawk Feb 16 '11 at 00:48
1

@jhchawk Then do `height: 100%` on the `a`. [jsfiddle](http://jsfiddle.net/8L2Zb/5/). – lonesomeday Feb 16 '11 at 01:02
Made the inside of the frommage_box instead of the frommage_textbox. Works like a charm :D. Thanks. Also, how the hell do I name my divs? – jhchawk Feb 17 '11 at 09:27
@jhchawk What do you mean, "name my divs"? Surely an ID is all you need? – lonesomeday Feb 17 '11 at 12:52

score 1 · Answer 2 · answered Feb 15 '11 at 23:20

1

Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.

If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.

answered Feb 15 '11 at 23:20

Ken Browning

28,693
6
56
68

Mārtiņš Briedis · Answer 3 · 2011-02-15T23:31:09.230

1

It is acceptable, only it's not good for SEO.

Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)

edited Feb 15 '11 at 23:31

answered Feb 15 '11 at 23:22

Mārtiņš Briedis

17,396
5
54
76

2

In his example he put a div inside the div he was attaching the click handler to. I don't think putting a DIV inside an A is a good idea, even if the the A has display: block. Does the W3C validator take it? – CodeTwice Feb 15 '11 at 23:26
Yes, that is a valid point - you can't put block level elements in inline elements (`a`), but I was just suggesting - if design allows, why not? It's hard to tell without a screenshot of the design, or atleast some CSS. Maybe that inner `div` and `p` could be easiliy replaced with a `span` – Mārtiņš Briedis Feb 15 '11 at 23:33

score 0 · Answer 4 · answered Feb 15 '11 at 23:19

0

It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.

answered Feb 15 '11 at 23:19

teuneboon

4,034
5
23
28

Since Google now indexes text inside of flash files, who knows what else they could do, including sniff unexecuded code. :P – Shaz Feb 15 '11 at 23:33
Google pretty much indexes most javascript and ajax now (if it has enough reason to, i.e. high trust factor) HOWEVER, if you are bothered about SEO make it as easy as possible for Google to find your content. – Chris Feb 15 '11 at 23:55

Chris Sobolewski · Answer 5 · 2011-02-15T23:30:58.330

0

HTML:

<div class='frommage_box'>
    <a href='location.html'>CONTENT GOES HERE</a>
</div>

CSS:

.frommage_box a{
    display:block;
    height:100%;
}

By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.

edited Feb 15 '11 at 23:30

answered Feb 15 '11 at 23:24

Chris Sobolewski

12,819
12
63
96

You're right. Editing. Dunno what was going through my head lmao. – Chris Sobolewski Feb 15 '11 at 23:30

score 0 · Answer 6 · answered Feb 15 '11 at 23:25

0

If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:

a {
   display: block;
   padding: 10px;
   width: 200px;
   height: 50px;
}

answered Feb 15 '11 at 23:25

sankargorthi

369
3
21

This will make all anchor tags a block element. You clearly don't want to do this. – Chris Sobolewski Feb 15 '11 at 23:29
Yes, of course. I obviously mean for the designer to add specific styles to fit their page design. – sankargorthi Feb 15 '11 at 23:34

Is linking a using javascript acceptable?

6 Answers6

Is linking a
using javascript acceptable?