CODEWITHSUNDEEP
javascriptcss
BN83
BN83

Reputation: 902

Make a div a link in JavaScript?

Everything I've searched for has shown about making a full div clickable, what I'm wondering is, is it possible to make a div in to a clickable link using just JavaScript and the div ID?

I have a layout of boxes and if a value in my database, I want PHP to echo some values in to JavaScript and say if this box is taken, give this div (boxID) the link that relates to it from the database. Only, there aren't going to be links on every div, as some won't exist in the database.

I suppose the alternative to this is wrapping each div in a <a> tag and an if exists statement?

Upvotes: 1

Views: 34586

Answers (4)

Francisco Presencia
Francisco Presencia

Reputation: 8841

This solution is for html <= 4. For html5, please read @Spencer solution.

Since the javascript is probably not what you want (waiting for extra comments), here's a example of how to do this in pure html/css. An anchor tag that fills completely a div, making that div clickable.

html:

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

css:

div {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: red;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 255, 0, 0.5);
}

Demo in jsfiddle (background-color added for demonstration purposes):

http://jsfiddle.net/Gx3f5/

Upvotes: 2

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

In html5 you can just do: 

<a href="link"><div>test</div></a>

Upvotes: 4

Astralian
Astralian

Reputation: 265

In pure JS:

document.getElementById('your-div').addEventListener('click', function() {
    location.href = 'http://your-url.com'
}, false);

By jQuery

$('#your-div').on('click', function() {
    location.href = 'http://your-url.com'    
});

Upvotes: 11

Damien Black
Damien Black

Reputation: 5647

you can easily make it so that when you click your div you go to another page, like this (using jQuery)

$('#myId').click(function () {
    window.location = 'newurl.php';
});

Upvotes: 5

Related Questions