Skip to content Skip to sidebar Skip to footer

How To Make A Div With A Rails Link Clickable?

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 b

Solution 1:

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/

Solution 2:

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).

Solution 3:

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

<%= link_to desired_path do %>
    <divclass="linkable"><anotherdiv>
             ... 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;

}

Post a Comment for "How To Make A Div With A Rails Link Clickable?"