1

I have a div object (a square box) and I made it clickable by creating this css style:

.clickable {
cursor: pointer;
}

Right now clicking on the box leads no where. Where do I put the URL to redirect the user? I have multiple boxes they all need to lead to a different URL, which is to be pulled from a database via PHP. but where do I add the URL since I don't have a tag?

newbie129
  • 29
  • 7

2 Answers2

4

Rather than make the div clickable, nest it within an anchor tag:

<a href="http://google.com">
    <div></div>
</a>

This is semantically correct as of html5

https://davidwalsh.name/html5-elements-links

https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

I will qualify my answer by saying that you should consider what the content of your div will be. Some markup and content may not be appropriate if you are making the entire block clickable (i.e. anchor tags, button elements, etc)

Spholt
  • 3,724
  • 1
  • 18
  • 29
  • Thank you Spholt, but when I do that, it creates a line break and moves my square box down , which I don't want :( – newbie129 May 07 '17 at 10:56
  • As I understand it that's considered at least "naughty" ;) http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – mayersdesign May 07 '17 at 10:56
  • @mayersdesign Older implementations of html would have considered it bad practice but it's not something you really need to work about in the latest versions. – Spholt May 07 '17 at 10:57
  • 1
    @newbie129 this sounds like a problem with the css rather than the markup. If you really do want to add Javascript then you can but it is hiding the problem rather than fixing it in my opinion ;) – Spholt May 07 '17 at 10:59
2

UPDATE: On further research, prompted by comments below, this answer may not be optimal. It does work. It is still useful in certain situations, but since <a href="#"><div></div></a> is now valid html it is likely not necessary.

Additionally, remember links can be can be made display: block; which could also solve similar problems.

Just to be clear you did not make that div clickable by adding CSS. You made it "look like" it was clickable by changing the mouse-pointer when it hovers the div.

This jQuery snippet will take ant div that contains an actual link, and make the whole div (really) clickable:

$(".clickable").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

Carry on using your CSS as well of course, as it provides visual indication that this is the case.

mayersdesign
  • 5,062
  • 4
  • 35
  • 47
  • thank's for clearing it up @mayersdesign ! I fixed it. – newbie129 May 07 '17 at 10:56
  • This might look like it works at first, but it can't be used with a keyboard, you can't preview the link on-hover, right click on it, or preview the page with force touch on iOS and Mac. It will behave like those Flash-based websites from the past. Consider Spholt's answer instead. – Minderov May 08 '17 at 04:34