Susie 1 Report post Posted 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? Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted 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> Quote Share this post Link to post Share on other sites
Wickham 8 Report post Posted 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). Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted September 27, 2010 Thanks, guys. I want the entire box to be clickable and not just the h2. Not sure how to do that... Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted September 27, 2010 Susie, my example makes the whole div clickable and leaves the H2 a link. Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted September 27, 2010 Thanks. I'll have to take a closer look. I prefer not to use positioning if I can. Quote Share this post Link to post Share on other sites
falkencreative 49 Report post Posted 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. Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted September 27, 2010 Thanks, Ben. That didn't work for me. Hmmm... Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted 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. Quote Share this post Link to post Share on other sites
Webkiller 1 Report post Posted September 27, 2010 (edited) 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 Quote Share this post Link to post Share on other sites
Webkiller 1 Report post Posted September 27, 2010 (edited) 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 Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted September 27, 2010 I was trying to use the method outlined on this page: http://css-tricks.com/snippets/jquery/make-entire-div-clickable/ Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted 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. Quote Share this post Link to post Share on other sites
falkencreative 49 Report post Posted 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> Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted 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. Quote Share this post Link to post Share on other sites
falkencreative 49 Report post Posted 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. Quote Share this post Link to post Share on other sites
Susie 1 Report post Posted September 27, 2010 Cool! Thanks again, Ben. Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted 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. Quote Share this post Link to post Share on other sites
Wickham 8 Report post Posted 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?). Quote Share this post Link to post Share on other sites
Kyle Undefined 1 Report post Posted 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. Quote Share this post Link to post Share on other sites
