How to set whole Div Contents clickable like a HyperLink?

Question

I am developing website by using ASP.net. I have following div layout

 <div class="mainrepeater">
    <div id="image" class="my-ad-repeater-image-box"/>
    <div class="my-repeater-title">
          <asp:HyperLink ID="hlNavigation" runat="server" Text='<%# Eval("title") %>'         NavigateUrl='<%#Eval("ad_url") %>' Target="_blank"></asp:HyperLink></div>
    <div class="my-repeater-content"></div>
 </div>

I am setting the HyperLink navigate URL from a datasource and everythings works fine. But I want all div(mainrepeater) to be clickable instead of the hyperlink.

So how to achieve that?. Do I need to use javascript? If not that would be great.

Thank you very much.

score 2 · Answer 1 · answered Feb 23 '15 at 10:11

2

CSS

.my-repeater-title { cursor: pointer; }

JS

$(".my-repeater-title").click(function(){
    window.location.href = "http://example.com"
 });

answered Feb 23 '15 at 10:11

void

36,090
8
62
107

Pik_at · Answer 2 · 2015-02-23T10:34:29.950

1

You should use attribute data-* to retrieve your url on your js script as:

<div class="my-repeater-title" data-url="[url]">

And get on your script:

$(".my-repeater-title").on('click', function(){
    var target = $(this).data('url');
    window.location.href = target;
 });

It's recommended to not write external data like url directly to the js file, but to fetch on html by js.

edited Feb 23 '15 at 10:34

answered Feb 23 '15 at 10:13

Pik_at

1,459
9
14

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

Another possible option is to wrap <div class="mainrepeater"> with <a> tag.

But this is correct only for HTML5. For more details please check this post Is putting a div inside an anchor ever correct?

edited May 23 '17 at 12:22

Community

1
1

answered Feb 23 '15 at 10:35

demo

6,038
19
75
149

score 0 · Answer 4 · answered Feb 23 '15 at 10:42

0

HTML

<a class="mainrepeater_link" href="http://example.com">
    <div class="mainrepeater"> ... </div>
</a>

CSS (only if you target a HTML version less than 5.)

.mainrepeater_link { display: block; }

answered Feb 23 '15 at 10:42

Matt

1,377
2
13
26

score 0 · Answer 5 · answered Feb 23 '15 at 10:43

Three possible solutions come to mind

First idea: Make the size of the link bigger

If the link is the only content of your div, you can just add the following CSS to make it fill the div.

.my-repeater-title > a 
{
  display:block;
  width:100%;
  height:100%;
}

You might need to set dimensions on .my-repeater-title though. No JS required

Second idea

Swap the div and the link. Change

<div class="my-repeater-title">
  <a href="...">...</a>
</div>

to

<a href="...">
  <div class="my-repeater-title">
    ...
  </div>
</a>

I'm sure that's possible in ASP too. No JS required either

Third idea: Javascript

Add a click-handler in jquery. This has already been suggested by others, so I won't copy their solution and I won't bother writing a different one.

How to set whole Div Contents clickable like a HyperLink?

5 Answers5