How to make a Div with a Rails Link clickable?

Question

I have a large div:

.limeskin:hover {
  background: #eee;
  cursor: pointer;
  display: block;
}

that I want to be clickable. Because I'm using Rails I need to have a Rails link be clickable: For example

<%= link_to 'Edit Your Email Address', edit_user_path %>

I'm struggling to this.

Here is the whole block:

<% @user.posts.each do |post| %>
     <div class="lists">
      <ol class="limeposts">
       <li>
        <div class="limeskin">
          <div class="limebox">
            <div class="limecost">
              <b>Price:</b>
              <%= number_to_currency(post.price, :unit => "R") %><br>
              [...]
<% end %>

Any simple legal workable answers?

Thanks

MrYoshiji · Accepted Answer · 2014-08-19T14:50:36.940

55

link_to can accept a block:

<%= link_to root_path do %>
  <div>Hey!</div>
<% end %>

This will surround the div with <a> tags.

Documentation: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to

Or if you have a big div and want to make it "clickable", using jQuery:

# html.erb
<div class="limeskin">
  <div class="limebox">
    <div class="limecost">
      <b>Price:</b>
      <%= number_to_currency(post.price, :unit => "R") %><br>
      #[...]
    </div>
  </div>
</div>

# jQuery.js
$('.limeskin').click( function(event) {
  var clicked_div = $(this);
  # do stuff with the event object and 'this' which 
  # represent the element you just clicked on
});

jsFiddle: http://jsfiddle.net/Lxw34w5o/1/

edited Aug 19 '14 at 14:50

answered Jun 25 '13 at 18:07

MrYoshiji

54,334
13
124
117

Hi thanks, it makes the limeface and limcost div content clickable, but nothing else. I want the whole block (see style sheet added) for limeskin to be clickable. – Erin Walker Jun 25 '13 at 18:52
Okay give me a sec I'll post a solution with jQuery – MrYoshiji Jun 25 '13 at 19:06

score 1 · Answer 2 · answered Jun 25 '13 at 19:27

1

Use javascript (I recommend jQuery) to make the action actually happen and CSS hover selector to modify the div background and the cursor (to change the cursor from an arrow to a hand).

answered Jun 25 '13 at 19:27

bluehallu

10,205
9
44
61

score 1 · Answer 3 · answered Apr 15 '16 at 06:15

1

Using Link_to as below would be sufficient even when you have a big block including multiple tags:

<%= link_to desired_path do %>
    <div class="linkable">
        <another div>
             ... some other tags
        </another div>
    </div>
<% end %>

and I recommend you to use a different background color for mouse over events because it shows the viewer that it's a link!

In you .css file:

.linkable:hover{
    background-color: red;

}

answered Apr 15 '16 at 06:15

Aboozar Rajabi

1,683
21
26

When I do this in my index.html.erb file the row actually just doesn't display at all. Do you know what could cause that? – Abbey Jackson Jun 07 '16 at 21:25
@AbbeyJackson Check your code and be sure to use <%= not <% – Aboozar Rajabi Jun 08 '16 at 06:29
Yes I copied it directly from here to be sure – Abbey Jackson Jun 08 '16 at 21:21
@AbbeyJackson Check your code and mostly your CSS. Check it without the link_to and also use Inspect Element in your browser to see what is happening. – Aboozar Rajabi Jun 09 '16 at 06:50

How to make a Div with a Rails Link clickable?

3 Answers3

jsFiddle: http://jsfiddle.net/Lxw34w5o/1/

Linked