How to make a div clickable?

Question

Make a whole div clickable

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?

Answer 1

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>

Answer 2

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;
    });
});

Answer 3

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>