To make whole div clickable?

Question

I have a template of handlebars in which there are multiple div which i need to make clickable.

However, in my div the text is dynamic, how will i be able to make whole div clickable. Here is the code

 <div class="row">

    {{#each event}} {{#is this.event ../eventName }}

    <div class="col s12 m3 13 al">
        <div class="card ">
            <div class="card-image">
                <img src="/Small/{{this.imageId}}.JPG">
                <a href="/events/{{this.event}}/imageId/{{this.imageId}}"><span class="imageClick"></span></a>
            </div>
            <div class="card-action sp1">
                <div class="action-time">
                    <a href="/{{this.imageId}}/love" class="like sp">

                        <i class="material-icons fav">favorite</i>

                    </a>
                    <span id="{{this.imageId}}" class="like-text">{{this.love}}</span>

                </div>
                <div class="action-time">
                    <a href="/{{this.imageId}}/laugh" class="haha sp">

                        <i class="material-icons laugh">sentiment_very_satisfied</i>

                    </a>
                    <span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
                </div>
                <div class="action-time">
                    <a href="/{{this.imageId}}/sad" class="downvote sp">
                        <i class="material-icons down">trending_down</i>

                    </a>
                    <span id="{{this.imageId}}sad" class="downvote-text">{{this.sad}}</span>

                </div>
                {{!-- {{this.imageId}} --}}
            </div>

            <div class="card-action">

                <a class="waves-effect waves-light btn share">button</a>

            </div>

        </div>
    </div>

    {{/is}} {{/each}}

I want to make my div action-time clickable with the link in the a tag. I tried to use the popular <span> solution like this but no use. It works for the last action-time making first two not working. How can i solve this. Css code for action-time and card is:

    .action-time{
  display: inline-block;
  border: 1px solid rgba(202, 202, 202, 0.733);
  width: 32%;
  padding-top:2px;
  padding-left: 4px; 
  border-radius:8px; 
}

and for card :

    .card {
  margin: 10px;
  padding: 5px;
  border-radius: 8px; 
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card-action {
  padding: 5px 0px !important;
  /* padding-right: 5px !important; */

}

Here is what my webpage looks like, I have multiple of those cards I want to make the whole area in border of heart clickable, rather than just the image to heart.

style your `` as `display: block` so it fills up the entire `
`. — jayly, Mar 20 '18 at 18:17
tried, the text in the span displaces under the button below — Alpit Anand, Mar 20 '18 at 18:18
you can try placing the `` inside the `` and then floating it to the right and adding additional styling until it's placed exactly where you want? — jayly, Mar 20 '18 at 18:26
it's okay, sometimes we get stuck! :) to further simplify your code you can just drop the `
` and use the `` instead. just a suggestion. anyway, good luck! — jayly, Mar 20 '18 at 18:39

score 2 · Accepted Answer · answered Mar 20 '18 at 19:49

You can update your html so that the <span> is inside your <a>.

<a href="/{{this.imageId}}/laugh" class="haha sp">
  <i class="material-icons laugh">sentiment_very_satisfied</i>
  <span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>  
</a>

Displaying your <a> as a block element will have it fill up the entire <div>. Then you can float your <span> to the right and style it accordingly until it's where you want it exactly.

.action-time a {
   display: block;
}

.action-time span {
   float: right;
}

G.Meher · Answer 2 · 2018-03-20T19:03:47.820

0

You can write some javascript to handle the operation

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

Looks for a link inside div with class of "action-time". Redirects to that links value when anywhere in div is clicked.

edited Mar 20 '18 at 19:03

answered Mar 20 '18 at 18:38

G.Meher

20
3

4

I'm not downvoting, but would like to say that this is the irresponsible way of doing it. I do not encourage anybody to use this technique unless you absolutely cannot change the HTML. – Ryan Wheale Mar 20 '18 at 18:45

To make whole div clickable?

2 Answers2