Jump to content

Make entire div clickable


Susie

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:

Link to comment
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>

Link to comment
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).

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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>

Link to comment
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?).

Link to comment
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...