Geek Answers Handbook

Creating a div for an interactive link

I have a PHP search script that parses results in HTML div elements to simplify styling the results. I have the following code:

<div class='webresult'><div class='title'><a href='{$row['url']}'>{$row['title']}</a></div><div class='url'>{$row['url']}</div><div class='desc'>{$row['description']}</div></div>

I want to make it so that when the whole webresult button is pressed, it goes to the URL of the result.

I hope people understand what I'm trying to describe.

+4
source share
6 answers

If you want to do all the press of the div button, try styling the <a> element as a block element and make its size equivalent to the parent <div> , i.e.

 .title a { display: block; width: 100%; height: 100%; }
+11
source

use jQuery:

 $('.webresult').click(function() { window.location.href = $(this).find('a').attr('href'); });
+1
source

This is best done using javascript. If you are using jQuery, you can do this:

 $('.webresult').click(function(){ $('this').find('a').click(); })
+1
source

Wrap the anchor around everything, not just the title bar, and set it to display: block; in css. Next, create the binding as you previously entered the div, and completely discard the div. You might also want to set the color of the text (including for: hover) and remove the underline using the text-decoration property.

If you decide to go with one of the javascript options posted by others, make sure you have a nifty margin. Not everyone has javascript.

+1
source

I would do it using jQuery:

 $(".webresult").click(function() { window.location.href = $(this).find("a").attr("href"); });

Another solution is that in the HTML 5 specification, blocking elements can be links to other places. You can learn more about this here: http://html5doctor.com/block-level-links-in-html-5/

0
source

not

 <div onclick="location.href='/the_url/'">

what you need?

0
source

More articles:


All Articles