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>
Related
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.
I am building a web app with Rails 4 and Bootstrap 3.
In one of the pages, I have the following Bootstrap tabs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</li>
<li role="presentation"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Billing</li>
<li role="presentation"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Expert</li>
</ul>
and then, the following content in these tabs:
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
</div>
<div role="tabpanel" class="tab-pane" id="billing">
</div>
<div role="tabpanel" class="tab-pane" id="expert">
</div>
</div>
When I hover any of these tabs, I see that the direct URL is, ie: http://localhost:3000/account/edit#profile, http://localhost:3000/account/edit#billing and http://localhost:3000/account/edit#expert.
However, when I try to link directly to the tab from another page, the active tab is still the first one (not the one I linked to).
Two notes:
I am using Bootstrap tabs "without any JavaScript", as explained in the markdown section in the documentation.
I would like to link to these tabs using Rails link_to helper.
Any idea why this is not working?
I don't think you'll be able to accomplish what you're after without throwing some javascript into the mix, as the tabs are meant for intrapage nagivation, not interpage navigation. Additionally, the href tags aren't even required on those tabs, as it's the data-toggle attribute which controls which tab pane to present.
If adding a small javascript snippet is a viable option, this will switch to the appropriate tab when the page is navigated to.
hash = window.location.hash
$("a[href=#{hash}]").click()
https://jsfiddle.net/tL7sutnt/
You're setting the active tab in the view
<li role="presentation" class="active"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</li>
which is going to take precedence.
If you want this to work, you need to add the active class to whatever tab is being referenced in the url anchor (#expert, in your case)
See this post if you need code reference.
***EDIT:
Since you aren't using js, use the answer at the bottom that dynamically determines the active tab by parsing the request
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.
In my application i have tab at the top of the page which should each render a new page.
The tabs are defined in the Layouts file as this will be part of the standard view.
Now i have created different views for each of the options e.g. project is one of the tabs.
So when i click the tab option how will it render the body based on the tab i have selected?
I have used the Foundation layout tabs but will need jquery hooking into it to launch an event.
Any examples or replies would be great
Try jQuery UI Tabs
Edit 1:
<div id="tabs">
<ul>
<li>Projects</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="projects">
<% Html.RenderAction("Projects", "Home"); %>
</div>
<div id="tab-2">
<% Html.RenderAction("TabTwo", "Home"); %>
</div>
<div id="tab-3">
<% Html.RenderAction("TabThree", "Home"); %>
</div>
</div>
Decorate your tabs action method with [ChildActionOnly] if you want methods to work using child view only.
I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
This is one way I'd do it:
Controller:
before_filter :set_default_tab
def some_action
#tab = "tab-3" # Go to a specific tab when using this action
...
end
private
def set_default_tab
#tab = params[:tab].blank? ? 'tab-1' : params[:tab]
end
View:
# Use #tab in the view to set the current tab
<li class="<%= #tab == 'tab-1' ? 'active' : ''%>"><a>Tab 1</a></li>
# Add the :tab param to any path so the before filter sets #tab
go_do_some_action_path(#item, :tab => 'tab-2')