How to make a div clickable?

Question

I checked on couple of links. I understood it, yet it isn't working on mine.

Here is my code snippet:

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

.Portfolio {
    background-color: #ffffff;
    width: 920px;
    margin: 0 auto;
    position: relative;

    margin-top: 120px;
    margin-bottom: 50px;

    border-style: solid;
    border-color: #dddddd;

    border-width: 2px;

    padding-left: 20px;
    padding-right: 20px;

    overflow: auto;
}

.port {
    color: #4aaaa5;
    border-style: solid;
    border-color: #cccccc;

    border-width: 2px;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top-style: hidden;
}

.container_img  img{
    float:left;
    margin: 0 auto;
    padding: 20px;
    width: 230px;
    height: 230px; 
    position: relative;

}

.container h1 {
    float:left;
    position:relative;
    padding: 20px;
}

.Books{
    clear:left;
}

.Books h1{
    clear:left;
}

.Kernel{
    clear: left;
}

.Kernel h1{
    clear: left;
}

.clear {
    clear: both;
}

.text_m h1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    color: white;

    background: #4aaaa5;
    opacity: 0.7;
    width:210px;

    margin-top: 200px;
    padding-left: 20px;
    margin-left: 20px;
}

.text_e h1{
    display: inline-block;
    position: relative;

    text-align: center;
    color: white;

    background: #4aaaa5;
    opacity: 0.7;
    width:230px;

    margin-top: 200px;
    right: 250px;

}

.text_b h1{
    position: absolute;
    text-align: center;
    color: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Portfolio">

<div class="port"> 
    <h1> Portfolio </h1>
</div>  

<div class="container_img"> 
    <div class="Quiz"> 
        <a href="https://madhumitha.github.io/Quiz/"></a>
        <img  src="assets/images/quiz.jpg" alt="Quiz">
            <div class='text_m'> 
                <h1> Quiz Time </h1>
            </div>
    </div>


    <div class="Weather"> 
        <img src="assets/images/Weather.jpg" alt="Weather">
            <div class='text_e'>
                <h1 id='weather'> Weather </h1>
            </div>
    </div>

    <div class="Books">
        <img src="assets/images/space.jpg" alt="Space"> 
            <div class='text_b'>
                <h1> ISS-Tracker </h1>
            </div>
    </div>

    <div class="Photography">
        <img src="assets/images/Photography.jpg" alt="Photography">
            <div class='text_p'>
                <h1> Photography </h1>
            </div>
    </div>

    <div class="Kernel">
        <img src="assets/images/Kernel.jpg" alt="Kernel">
            <div class='text_k'>
                <h1> Kernel </h1>
            </div>
    </div>

    <div class="clear"></div>
    </div>           
</div>

I'm trying to make the div clickable for first image. I can't figure out what's going wrong? Whether click event doesn't work with float and clear in css or not?

What do you get in the browser console if you add console.log($('.Quiz').length) directly before your $('.Quiz').click code? — fdomn-m
– fdomn-m, Commented Dec 3, 2019 at 16:52
Are there any browser errors (eg is jquery not loading correctly)? Have you wrapped your .click event in doc ready? $(function() { $(".Quiz").click... — fdomn-m
– fdomn-m, Commented Dec 3, 2019 at 16:53
Clearly, there's nothing wrong with your code as-is so there must be some other issue - eg running the code before the div exists (hence add to doc ready) or the div is loaded later. The conversion to a snippet shows that it works fine because snippets handle this thing for you - that may not be how you have it in your code. — fdomn-m
– fdomn-m, Commented Dec 3, 2019 at 16:55

abney317 · Accepted Answer · 2019-12-03 16:53:10Z

6

In HTML5 it's perfectly valid to put a div inside of an a tag.

<a href="https://madhumitha.github.io/Quiz/">
  <div class="Quiz"> 
    <img  src="assets/images/quiz.jpg" alt="Quiz">
    <div class='text_m'> 
      <h1> Quiz Time </h1>
    </div>
  </div>
</a>

answered Dec 3, 2019 at 16:53

abney317

8,5927 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AGE · Accepted Answer · 2019-12-03 17:05:33Z

1

Missing $(document).ready() this fixed the problem.

$(document).ready(function() {
    console.log($('.Quiz').length);

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

edited Dec 3, 2019 at 17:05

AGE

3,7873 gold badges43 silver badges63 bronze badges

answered Dec 3, 2019 at 17:04

Madhumitha

1071 silver badge9 bronze badges

1 Comment

abney317 Over a year ago

Any reason you're using jQuery for this instead of just a basic html link?

Sourav Singh · Accepted Answer · 2019-12-03 17:07:15Z

0

You need to push child elements of Quiz div into anchor and then set width and height of anchor according to your need and also set style display block into anchor tag.

<div class="Quiz"> 
     <a href="https://madhumitha.github.io/Quiz/" style="display:block">
        <img  src="assets/images/quiz.jpg" alt="Quiz">
            <div class='text_m'> 
                <h1> Quiz Time </h1>
            </div>
     </a>
</div>

answered Dec 3, 2019 at 17:07

Sourav Singh

9561 gold badge9 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to make a div clickable?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related