Best Way to Highlight Current Page in Rails 3? - Apply a CSS Class to Links Conditionally

Best way to highlight current page in Rails 3? -- apply a css class to links conditionally

In app/helpers/application_helper.rb

def cp(path)
"current" if current_page?(path)
end

In your views:

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Basically write a simple wrapper around it. Additionally you could extend the method to allow additional classes to be applied by adding arguments. Keeps the views concise/dry. Or, without extending the method, you could just do simple String interpolation like so to add additional classes:

<%= link_to "All Posts", posts_path, class: "#{cp(posts_path)} additional_class" %>

how to highlight current link in rails 3

I think your path in view should look like this:

<li>
<%= @waste_root.name %>
<ul>
<% @wast_child_ids.each do |it| %>
<li><%= link_to it.name, products_path(:category => it.name), class: "#{cp(products_path(:category => it.name))} additional_class" %>
</li>
<%end%>
</ul>
</li>

Because, you're passing a param category in products_path and hence current_page? isn't able to judge the correct relative path. Also, it'd be better if you use the _url(complete path) instead of relative path. It'll be much clear to cross check and to understand as well.

Conditionally add a class to link_to in Rails

You can do it outside the link_to:

<% css_class = accepted ? "hidden" : "" %>
<%= link_to "Accept Friend Request",
"#",
class: "btn btn-success btn-sm btn-block requestSent #{css_class}",
disabled: true %>

Ruby on Rails highlight current link on navigation bar?

There are a few approaches to this,
but if you're after a simple one,
I suggest adding a class to your body.

<body class="<%= params[:controller] %>_controller">
...
</body>

Then in your css you can do the following.

body.menus_controller  #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
background-color : yellow
color : blue
}

This can get complicated if you have multiple pages you want to split,
but for this basic example it should be ok.

elegant way to add css class in rails partials

Basically you have 2 choices.
First one is to check the current page and highlight the right menu choice.

<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="<%= 'active' if current_page?(menu1_path) %>"><a href="menu1">Menu1</a></li>
<li class="<%= 'active' if current_page?(menu2_path) %>">><a href="menu2">Menu2</a></li>
<li class="<%= 'active' if current_page?(menu3_path) %>">><a href="menu3">Menu3</a></li>
<li class="<%= 'active' if current_page?(menu4_path) %>">><a href="menu4">Menu4</a></li>
<li class="<%= 'active' if current_page?(menu5_path) %>">><a href="menu5">Menu5</a></li>
</ul>
</div>
</div>

But since you are looking for more elegant way, I would suggest second choice: doing a separate helper for your list elements. The solution with helper is perfectly described here.

Hope it helps.

how to detect in which page we are Rails

Use the helper functions: controller_name and action_name.

If you have a controller:

class UsersController < ApplicationController
def my_action
# stuff
end
end

In the view, you can do:

Controller name: <%= controller_name %> <br/> # => users
Action name: <%= action_name %> <br/> # => my_action

See: http://guides.rubyonrails.org/action_controller_overview.html#routing-parameters



Related Topics



Leave a reply



Submit