I have partials which display in sidebar like below
__side_bar_partials.html.erb
<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="active">Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
</div>
now what i need when i render this partial i want to add css class active added on selected menu
right now i render it with normal way
<%= render "profile_sidebar"%>
what i need to include in above code so it will add active class on selected menu
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) %>">Menu1</li>
<li class="<%= 'active' if current_page?(menu2_path) %>">>Menu2</li>
<li class="<%= 'active' if current_page?(menu3_path) %>">>Menu3</li>
<li class="<%= 'active' if current_page?(menu4_path) %>">>Menu4</li>
<li class="<%= 'active' if current_page?(menu5_path) %>">>Menu5</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.
Related
I have a simple two tab layout. First tab shows details whereas the second tab shows a search box and search results. When a user navigates to the page I wish to show the first tab however when a search is performed (from the second tab) I wish the show the page displaying the second tab.
I had tried the code:
<ul class="nav nav-tabs">
<li class="<%= 'active' if !params[:search] %>">
Details
</li>
<li class="<%= 'active' if params[:search] %>">
Search
</li>
</ul>
The code above displays the correct tab however not the corresponding div so if a search is performed the "Search" tab is active however the "Details" div is displayed.
OK, I did not realise I had to set the active class for both the "li" item and the corresponding "div" item. Works now.
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
<div class="tab-content">
<div class="tab-pane <%= 'active' if !params[:search] %> fade in" id="details">
...
</div>
<div class="tab-pane <%= 'active' if params[:search] %>" id="search">
...
</div>
</div>
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html
I am working on a rails project using the spree ecommerce engine.
I am wanting to edit the links just above the search bar but can not find them in the partial _nav_bar.html.erb
I also can not find the Deface overrides or js code that adds these fields. In the _nav_bar partial I have
<nav id="top-nav-bar" class="columns omega ten">
<ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
<%= render :partial => 'spree/shared/search' %>
</li>
</ul>
</nav>
And it results in the code:
<nav id="top-nav-bar" class="columns omega ten"><ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li>My Account</li>
<li>Logout</li>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
............
</nav>
Where do these two links come from? How do I edit them? Why are they not simply held in this partial?
Thanks!
it is an override of the spree_auth_devise extension. See auth_shared_login_bar.rb where it inserts the links before li#search-bar
I have this code that is my navigation bar on my site, it is in my _layout.cshtml page at the top...
<div id="nav">
<ul>
<li id="current">Home</li>
<li>Code Stuff</li>
<li>Music Stuff</li>
<li>Blog</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
Im using a razor view page and I need to be able to inject id="current" into the block for the page that im on. My solution was to do something like
<div id="nav">
<ul>
<li id="#Model.PageName">Home</li>
<li id="#Model.PageName">Code Stuff</li>
<li id="#Model.PageName">Music Stuff</li>
<li id="#Model.PageName">Blog</li>
<li id="#Model.PageName">Links</li>
<li id="#Model.PageName">Contact</li>
</ul>
</div>
But of course that wont work because all of the li items will have the pagename in. So without using burly if statements how can I do this dynamically?
First, you really should be using class (as indicated in your title) rather than id (as indicated in your question text). Second, I would define a function that takes an argument differentiated your link and outputs either the empty string or current depending on whether it matches the page name.
#functions
{
public string MenuClass( string menuItem )
{
return string.Equals( Model.PageName, menuItem, StringComparison.OrdinalIgnoreCase )
? "current"
: "";
}
}
<div id="nav">
<ul>
<li class="#MenuClass("Home")">Home</li>
<li class="#MenuClass("Code")">Code Stuff</li>
...
</ul>
</div>