Jump to content
Stef's Coding Community
Susie

Make entire div clickable

Recommended Posts

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:

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Webkiller

Share this post


Link to post
Share on other sites

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 by Webkiller

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...