CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
Prageeth Liyanage
Prageeth Liyanage

Reputation: 1772

How to set whole Div Contents clickable like a HyperLink?

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.

Upvotes: 0

Views: 363

Answers (5)

mmgross
mmgross

Reputation: 3092

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.

Upvotes: 0

Matt
Matt

Reputation: 1407

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

Upvotes: 0

demo
demo

Reputation: 6245

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?

Upvotes: 0

Pik_at
Pik_at

Reputation: 1457

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.

Upvotes: 1

void
void

Reputation: 36703

CSS

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

JS

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

Upvotes: 2

Related Questions