How to Make a Div with a Rails Link Clickable

How to make a Div with a Rails Link clickable?

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/

How to make a div clickable, but don't want inside elements to look like links with Rails?

If you want the text to not look like a link, you need to apply CSS to the text.

For this purpose, add a class to the text:

<h4 class="no-link-style"><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
<h5 class="no-link-style text-black-50">Last message preview</h5>

And in your CSS file, add CSS for this class:

.no-link-style {
    color: #000000 !important;
    text-decoration: none !important;

}

use color code of your choice, #000000 is for black color

In Rails 3, how can you make a div a button (a clickable div that links to a new page)

For those interested, the answer is:

 <div class="class_name">
 <%= link_to content_tag(:span, "Text for the LInk"), route %>
 </div>

And then, in the CSS set .class_name to position:relative; and:

 .class_name span {
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0px;
left:0px;
 }

The link will now assume the size of its parent container, and thus give the impression the whole container is a link.

Creating a clickable div with 'link_to' syntax

You can do that using the following syntax:

<%= link_to "http://www.facebook.com", id:"item_1" do %>
  #your code here
<% end %>

I hope this is what you were looking for

How can we add link_to with a div in rails?

You can put a div inside of link_to:

<%= link_to users_path, :action => 'go' do %>
    <div>YOUR CONTENT</div>
<% end %>

how to put link_to under an entire card?

You can pass a block to the link_to method.

<%= link_to post do %>
  <div class="card-body">
    <h4><%= post.title %></h4>
    ...
  </div>
<% end %>

HREF generated in ERB with link_to is not clickable

inspect the element using the browser's dev tools, maybe you have some invisible element above the A tag, maybe you have some javascript messing things up, the generated html looks fine, I don't think it's a rails issue

EDIT: check J.R. Bob Dodds answer below

---

Related Topics