ad

Turn a DIV into a Clickable Link

Screen Shot 2015-11-03 at 3.22.22 AM

Recently, I was doing some modification on Techlomedia Gadgets, gadget research platform developed by me. I wanted to add few boxes with text on it. Clicking on box will open a link. This could only be done if I turn the whole DIV into a clickable link.

The DIV was something like this

<div class="featured">
    <a class="link" href="http://techlomedia.in/">Target page</a>
</div>

This DIV also had some specified width and height. I wanted to make the whole DIV clickable. It means clicking anywhere in this DIV will open the URL mentioned in the hyperlink inside the DIV.

You can do it either by using CSS or jQuery. I am going to explain both ways.

CSS way:

<style type="text/css">
.featured {
    position: relative;
    width: 300px;
    height: 200px;
    background: #eaeaea;
    color: #000;
    padding: 10px;    
}
 
.featrued:hover {
    cursor: hand;
    opacity: .9;
}
 
a.link {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    z-index: 10;
}
</style>

In above way, we try hyperlink to occupy the whole DIV to make it clickable.

JQuey Way

$(document).ready(function () {
        
    $(".featured").click(function(){
        window.location = $(this).find("a:first").attr("href");
        return false;
    });
});

Both ways will work without any issue. You can use as per your own choice. You should change the classes in CSS or jQuery code as per your own code.

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

2020 UseThisTip | Developed By Deepanker