By xl_cheese on

I'd like to enhance my product grid so that when you hover over the product tile you can select any part of it to link to the product node.

Currently only the image and Title are links to the product node.
http://www.pinkgorillacycles.com/apparel/gloves/long-gloves

Can someone point me in the right direction on how to make the entire square a link with a hover?

I think this would make the grid view a little bit cleaner and easier to navigate.

Thanks!

⋅ Categories: Drupal 6.x

Comments

devtherock’s picture

devtherock commented

I think you can achieve this with using little css and jquery

css

/* use only for td element you want */
td{
 cursor: pointer;
}

Jquery

$('td').bind('click', function(){
   window.location = $(this).children('a').attr('href');
});

please try this, although I didn't test it, but hope it will work.

Thanks

regards
Dev/Kuldev

xl_cheese’s picture

xl_cheese commented

Thanks for that code. The css seems to give it the look, but I can't get the jquery to work. I'm assuming the jquery is supposed to make the td clickable?

I'm a noob too. I read up on where to stick the jq. I put in in my theme's jquery.js folder? Is there a better way to implement that?

Thanks.

devtherock’s picture

devtherock commented

You don't to add jquery as its in Drupal itself.

Just follow these step

1. Create a custom.js file in your theme folder
2. Add this js file in your theme's .info file like: scripts[] = custom.js (explained here: http://drupal.org/node/304255)

What you need to add in custom.js is:

$(document).ready(function() {
  $('td').bind('click', function(){
    window.location = $(this).children('a').attr('href');
  });
});

3. Flush cache OR rebuild theme.

Hope this work (if worked then also check for compatibility in different browser)

mndonx’s picture

mndonx commented

A different approach might be faking it by making all of the text linked to the product, and using display: block on the a tags (and setting a height and width) so the links cover the remaining area. Then you could probably add the hover state on the parent div.

I'm assuming you probably don't want the Quick View link to be included... that might be trickier, unless you could change the markup so that button was outside of the div that wrapped the product tile.