在haml中将div或div作为href

Question

Given this

<div class='postpreview'>
  <a href="/some/image/xyz"><img alt="xyz" src="/some/image/xyz" /></a>
  Some content, etc.
  <a href='/forums/post/123'>Show</a>
</div>

How can I make the entire div 'postpreview' function as link to '/forums/post/123'? In haml?

Basically this is within a rails partial, and the links are listed as link_to, etc (another issue altogether). I can get the above to work fine in haml, I just cannot turn the entire div into a link without either an error or the output showing up on the page but not linking. I'd like to get rid of the 'Show' link and make the entire postpreview link to the post.

Answer 1

You'd need to use JavaScript to add a click hanlder to the div element. For example, if you give the particular div an id it is as simple as:

document.getElementById('myDivID').onclick = function() {
    window.location = '/forums/post/123'; 
}

Or if you're using jQuery:

$('#myDivId').click(function() { window.location = ... });

Note that you've got two links within the div - is it intentional to make the first link impossible to follow?

Answer 2

I think Hamish is sure right with his question.. What about the first link? Do you need it? Else you could just kill the first and go with some pure HTML/CSS solution which extends every a in a div with the class postpreview:

HTML

<div class="postpreview">
 <a href="/forums/post/123" rel="bookmark" title="Foo">
  <img src="/some/image/xyz.jpg" alt="foo" title="bar" />  
 </a>                        
</div>

CSS

.postpreview a {
  display: block;
  width: 100%;
  height: 100%;
}

respectively set the height and width of the a element according to your image size or better the surrounding div.

Answer 3

This is a solution -- a link to the image itself would be nice, or rather is the next step - generating this postpreview that links to post with the thumbnail inside linking to the image

The line prefaced by / does not work so well, but the open image_tag line does link to page the post is on, no js required.

.postpreview
 %a{:href =>(url_for [@blog, post])}
  .postcontaincontain
   = image_tag(post.image_url(:thumb)) if post.image_url
   /= link_to image_tag(post.image_url(:thumb)), post.image_url if post.image_url
   = shout.content