Make entire div clickable

Susie · September 27, 2010

I'm looking for a way to make an entire div clickable on this page: http://tinyurl.com/2ektm28 . Scroll down through the menu categories and you'll see a background change (for now) on the divs. And right now, the link is only on the h2. But I want the whole div to be clickable.

I found this on CSS-Tricks, but it's not working for me. http://css-tricks.com/snippets/jquery/make-entire-div-clickable/ What am I missing? :raised:

Kyle Undefined · September 27, 2010

I just did this on my site, here's an example on how I did it. Hope it helps.

<!DOCTYPE html>
<html>
<head>
	<title>Test Page</title>
</head>
<body>
	<div style="width:100%;height:100%;">
		<div style="width:500px;height:500px;background:#333;">
			<div style="width:500px;height:100px;background:#666;">
				<h2><a href="newpage">Grinders</a></h2>
				<a href="#" style="height:100px;width:500px;position:absolute;"></a>
				Clickable Div with no text in link
			</div>
			<div style="width:500px;height:100px;background:#999;">
				<h2><a href="newpage">Stromboli</a></h2>
				<a href="#" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Link here</a>
				Clickable Div with text in link
			</div>
		</div>
	</div>
</body>
</html>

Wickham · September 27, 2010

You don't have to use that complicated code with .click(function() , just add this code to the bottom of style.css:-

.item h2 a { display: block; }

It maked the h2 tag show the hand and is clickable all the way across the h2 tag, but only for the height of the h2 tag, not the whole colored box with the p tag underneath (the p tag isn't a link).

Susie · September 27, 2010

Thanks, guys.

I want the entire box to be clickable and not just the h2. Not sure how to do that...

Kyle Undefined · September 27, 2010

Susie, my example makes the whole div clickable and leaves the H2 a link.

Susie · September 27, 2010

Thanks. I'll have to take a closer look. I prefer not to use positioning if I can.

falkencreative · September 27, 2010

One thing to try (completely off the top of my head without any testing, BTW):

$(".item").click(function(){

window.location=$(this).find("h2 a").attr("href");

return false;

});

I've adjusted the find() function to look within the h2, which may solve the problem. I don't have the time to test this now, but I may play with it later today.

Susie · September 27, 2010

Thanks, Ben. That didn't work for me. Hmmm...

Kyle Undefined · September 27, 2010

Why are you returning false? That cancels out the click, and try this: $(this).find("a").attr("href");

The positioning on the a tag is just to get it to show, and it takes up only the space in the item div.

Webkiller · September 27, 2010

Try that out my friend.


<h1 class="entry-title">Menu</h1> 

			<div class="entry-content"> 
		<div class="item"> 
<h2><a href="/grinders/menu/grinders">Grinders</a></h2> 
<p><a href="/grinders/menu/grinder" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Choose from our wide variety of hot baked sandwiches, each made to order according to W.G. Grinders exclusive recipe.</a></p></div> 
<div class="item"> 
<h2><a href="menu/stromboli">Stromboli</a></h2> 
<p><a href="menu/stromboli" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Lorem ipsum…</a></p></div> 
<div class="item"> 
<h2><a href="menu/baked-pasta">Baked Pasta</a></h2> 
<p><a href="menu/baked-pasta" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Lorem ipsum…</a></p></div> 
<div class="item"> 
<h2><a href="menu/totally-baked-pizzas">Totally Baked Pizzas</a></h2> 
<p><a href="menu/totally-baked-pizzas" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Lorem ipsum…</a></p></div> 
<div class="item"> 
<h2><a href="menu/salads">Salads</a></h2> 
<p><a href="menu/salads" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Our Signature Salads make the perfect addition…</a></p></div> 
<div class="item"> 
<h2><a href="menu/sides">Sides</a></h2> 
<p><a href="menu/sides" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Add a side or make it a combo…</a></p></div> 
<div class="item"> 
<h2><a href="menu/soups">Soups</a></h2> 
<p><a href="menu/soups" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Lorem ipsum…</a></p></div> 
<div class="item"> 
<h2><a href="menu/gourmet-desserts">Gourmet Desserts</a></h2> 
<p><a href="menu/gourmet-desserts" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Enjoy a…</a></p></div> 
<div class="item"> 
<h2><a href="menu/kids-menu">Kids’ Menu</a></h2> 
<p><a href="menu/kids-menu" style="height:100px;width:500px;position:absolute;text-indent:-9999px;">Kids love…</a></p></div> 
	</div><!-- end .entry-content -->

Edited September 27, 2010 by Webkiller

Webkiller · September 27, 2010

If you want the Jquery do it this way

var base = $j(“base”).attr(“href”);

$j(“#menu li a”).each(function(){

$j(this).attr(“href”, base+$j(this).attr(“href”));

});

Edited September 27, 2010 by Webkiller

Susie · September 27, 2010

I was trying to use the method outlined on this page: http://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Kyle Undefined · September 27, 2010

I think I've found your problem, you're making all the menu items with the class "item", and when you're clicking a div, the jQuery is selecting the href attributes of all the item divs. Try renaming a div to a unique name and update the jQuery and see if that works. Also try putting it in the "jQuery(document).ready(function($)" and see if that helps.

falkencreative · September 27, 2010

I believe I've fixed it. Either the jquery block needs to go within a $(document).ready() block, or it needs to be placed at the bottom of the page after the rest of the page has been loaded.

This sample works for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		.item:hover { background: #ccc; cursor: pointer; }
	</style>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(".item").click(function(){
		     window.location=$(this).find("a").attr("href");
		     return false;
		});
               });
	</script>

</head>
<body>

<div class="item">
	<h2><a href="http://www.google.com">Content Link Here...</a></h2>
	<p>Test content here...</p>
</div>

</body>
</html>

Or this would also work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		.item:hover { background: #ccc; cursor: pointer; }
	</style>

</head>
<body>

<div class="item">
	<h2><a href="http://www.google.com">Content Link Here...</a></h2>
	<p>Test content here...</p>
</div>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(".item").click(function(){
		     window.location=$(this).find("a").attr("href");
		     return false;
		});
	</script>

</body>
</html>

Susie · September 27, 2010

Thanks so much, Ben. I'm still not sure if this is the right way since the cursor doesn't show that it's a link. I might keep looking, but for now, I'm happy with this. Thanks again.

falkencreative · September 27, 2010

Thanks so much, Ben. I'm still not sure if this is the right way since the cursor doesn't show that it's a link.

You can add the cursor using CSS:

.item:hover { cursor:pointer; }

That should work if you are using the strict doctype and for all browsers except IE6.

Susie · September 27, 2010

Cool! Thanks again, Ben.

Kyle Undefined · September 27, 2010

I would add the pointer cursor through javascript just in case the users javascript is disabled. Would keep the confusion of the user down if there was a pointer hand and when they clicked nothing would happen.

I'm glad you got it working, the site is looking very good, keep it up.

Wickham · September 28, 2010

If you want to make the whole box clickable without using .click(function() you can make the p tag a link as well as the h2 tag, both with display: block, like this:-

<div class="item">
<h2><a 
href="http://auxanocreative.com/grinders/menu/grinders">Grinders</a></
h2>
<p><a href="http://auxanocreative.com/grinders/menu/grinders">Choose 
from our wide variety of hot baked sandwiches, each made to order 
according to W.G. Grinders exclusive recipe.</a>
</p></div>

.item h2 a { display: block; }
.item p a, .item p a:hover {  display: block; text-decoration: none; color: #000000; }

It's then pure CSS (I think .click(function() needs javascript enabled, doesn't it?).

Kyle Undefined · September 28, 2010

Yes, the jQuery.click event needs javascript. I used "position:absolute" in my example since that's what I thought I used, but I used "display:block", like yours Wickham, great example.

Sign In

Make entire div clickable

Recommended Posts

Susie

Kyle Undefined

Wickham

Susie

Kyle Undefined

Susie

falkencreative

Susie

Kyle Undefined

Webkiller

Webkiller

Susie

Kyle Undefined

falkencreative

Susie

falkencreative

Susie

Kyle Undefined

Wickham

Kyle Undefined

Join the conversation

Browse

Activity

Store

Support