I am trying to get active_link_to to work properly when I use pagination. I have 3 nav-tabs and they all work fine when selected, however, when I click on my pagination button to view more records my current nav-tab losses it's active status (style). What steps do I need to fix this issue?
Also 1 more minor issue if somebody doesn't mind. I'm using a log-in screen to get me to my main layout. When I log in, none of the nav-tabs are active. How do I render this? If I click on one of them it shows active but I want the 1st tab to display active by default. Again, I am using active_link_to.
Thank You.
TW
Here is my updated post with Code:
In my Gemfile I have
gem kaminari
gem active_link_to
In my projects_controller.rb
#projects = Kaminari.paginate_array(#projects).page(params[:page]).per(10)
In my index.html.erb
At the end of my page
</table>
</div>
<%= paginate #projects %>
In my projects_helper.rb
def active_link_to(text, link)
content_tag(:li, :class => request.fullpath == link ? 'active' :nil) do
link_to text, link
end
end
In my Layout application.html.erb
<ul class="nav nav-tabs">
<li><%= active_link_to("Active Projects", projects_path) %></li>
....
....
</ul>
The problem is you are trying to match the link to the fullpath entirely and your fullpath will sometimes contain a query string which will break the fullpath == link if you don't also include the query string in your link.
One possible solution would be to match a substring of the fullpath, something like this:
def active_link_to(text, link)
content_tag(:li, :class => request.fullpath.starts_with?(link) ? 'active' :nil) do
link_to text, link
end
end
Or even using Ruby String's [] method to ask if a substring is present in the string:
def active_link_to(text, link)
content_tag(:li, :class => request.fullpath[link].present? ? 'active' :nil) do
link_to text, link
end
end
You can also try a Gem that provides the method you want: https://github.com/comfy/active_link_to
It uses a more comprehensive method of matching paths.
Related
I have CSS file that needs to be embedded by the user. Now for the user to customize the CSS file as he/she wishes (change the colors and font-size mainly) I have to store that information in database file, append that information to specfic CSS file and then enable that user to embed it.
I would get the id of the User that I wish to change. So color codes stored are basically extracted from,
User.find(params[:id]).main_color
# This would return => #fffff
This what my embed code looks like right now,
<link href="link.com/initial.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" data-user="18" src="link.com/some_file.js" />
Here data-user is the id of the user who is modifying the CSS file. (The IFrame is being embedded using the javascript file)
How should I modify my embed code and fetch the custom variables from my database in order to make the CSS cstomizable as the user wants?
Thanks in advance.
P.S I have thought of rewriting the CSS in the view(.html.erb file) and using !important there along with proper color codes selected by the user but that approach is not exactly very efficient.
I think the best way is to keep your script file at the server side, So you can easily modify your script depending on user database options
for example:
place a new route in routs.rb
post '/users/modify_style', :to => 'users#modify_style', :as => modify_style
then allow the route to respond to user by JavaScript file, for example if the user needs to change the main color of HTML template using a button or a link; so the form button in template may look like:
<%= button_to 'apply style', modify_style_path, :data => {:user_id => current_user.id}, :remote => true %>
or
<%= link_to 'apply style', modify_style_path(:user_id => current_user.id), :method => :post, :remote => true %>
so remote: true option will allow sending data to server through AJAX without refreshing the page.
at users_controller.rb
def modify_style
user = User.find(params[:user_id])
#main_color = user.main_color
respond_to do |format|
format.js { render 'some_file.js.erb' }
end
end
and in your js file:
$('#some_element_id_to_change_color_for').css('color', '<%= #main_color %>')
or you can add modify_style action code directly to the original action which load your page to appy user style once the page is loaded.
I would suggest you to directly use it in the erb file something like
my.html.erb
<html>
<!-- my html -- >
</html>
<style>
<%= my_css.html_safe %>
</style>
I am using act-as-taggable-on gem. Trying to understand how tags are allocated between 4 css categories. As in this example: https://github.com/mbleigh/acts-as-taggable-on#tag-cloud-calculations.
What is the algorithm that decides the number of tags allocated to each css category? And can I change the number of css categories from 4 to 6 for example, can I do this:
<% tag_cloud(#tags, %w(css1 css2 css3 css4 css5 css6)) do |tag, css_class| %>
<%= link_to tag.name, { :action => :tag, :id => tag.name }, :class => css_class %>
<% end %>
Basically, how is the assignment of css categories distributed? I’ve looked through the documentation and have yet to find an answer.
tag_cloud method source code reads:
def tag_cloud(tags, classes)
return [] if tags.empty?
max_count = tags.sort_by(&:taggings_count).last.taggings_count.to_f
tags.each do |tag|
index = ((tag.taggings_count / max_count) * (classes.size - 1))
yield tag, classes[index.nan? ? 0 : index.round]
end
end
end
Which means that you are able to pass as many classes as you need. You can find the source here.
I'm trying to create a middleman site with a contact form using sinatra and pony gem
I'm having problems getting middleman and sinatra to play nicely together
THE ISSUE:
"
My Contact From is not rendering my header and footer and also does not like it when I try to include view helpers like = link_to tags When I try that I get this error
undefined method `link_to' for
Its also not picking up my stylesheets
"
Heres my Mailer.rb get method
class MailForms < Sinatra::Base
set :views, Proc.new { File.join(root)}
get '/' do
haml :contact, :layout => :'/contact'
end
end
and it lives in source/mailer.rb
when I go to website.com/contact.hml
I get the form but it has no header or footer all my other pages have them and is working
I can't use = link_to tags or image tags i get an undefined method error
Its also not picking up my styles
heres my config.rb
require 'source/mailer'
map('/contact.html') do
run MailForms
end
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :relative_links, true
configure :build do
activate :relative_assets
end
heres my layout.haml with my stylesheet link
!!!
%html
%head
%meta{charset: "utf-8"}
%meta{content: "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
%title= current_page.data.title || "Auto Tint Specalist"
%link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}
= stylesheet_link_tag "normalize", "all"
%script{src: "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"}
= javascript_include_tag "all"
%body{class: page_classes}
= partial 'layouts/header'
= yield
= partial 'layouts/footer'
all my styles are in all.scss in the stylesheets folder
<li>#Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>Services
<ul>
<li>#Html.ActionLink("IT", "IT", "Home")
<ul>//Dropdown
<li>#Html.ActionLink("Data Backup", "DataBackup", "Home")</li>
</ul>
</li>
For example this is my menu my css class is "selected" for active link.. I want to use it at the easiest way. Can any one help me for MVC4.. I have looked some solutions but don't have much knowledge to use it..
<ul class="#{booleanForThisIsSelected ? "selected" : "";}">//Dropdown
I use the following technique all the time, using jQuery
<script type="text/javascript">
var currentLocation = window.location;
$(function () {
$('.menu li a').each(function () {
if (this.href == currentLocation) {
$(this).parent().addClass("current");
}
});
});
</script>
This block at first gets the current page url, then it gets all the menu anchors and compares each one with the current page url, once it finds a match, it gives the matching anchor a special class current which should indicate the current page link.
Please note that the selector $('.menu li a') should be changes to match your own structure so it can get the menu items correctly.
Hope this helps, let me know if you need anything else.
I would recommend you to use MvcSiteMapProvider MVC4.
You install the nuget package.
Then you add links according to your site structure to the Mvc.Sitemap-file.
Now you should be able to use the MenuHelperModel.cshtml-file to define the rendering behaviour of all links in your sitemap (including currently selected ones), an example of this could look like this:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
#foreach (var node in Model.Nodes) {
string classes = node.IsCurrentNode | node.IsInCurrentPath | node.Children.Any(n => n.IsCurrentNode)
? "selected" : "";
<li class="#classes">#Html.DisplayFor(m => node)
#if (node.Children.Any()) {
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
All you have to do now is ensure your links show up on your page, best location to put it should be your Layout-/Master-Page.
There you could for example add a call to
#Html.MvcSiteMap("MvcSiteMapProvider").Menu(0, true, false, 1)
Which renders only the first level of your sitemap.
If you want a more verbose example using this you can take a look at my question here.
But keep in mind that uses the now obsolete MvcSiteMapProvider-Package, so there is a slight syntax change inside MenuHelperModel.cshtml.
I use Capybara with Rspec and have the following code on my page:
<div class="pagination pagination-centered">
<ul>
// ...
<li class="last">
Last »
</li>
</ul>
</div>
I want to check in the request that a div with class "pagination pagination-centered" exists. I tried this:
it "should have pagination" do
page.should have_selector('div#pagination pagination-centered')
end
And this:
it "should have pagination" do
page.should have_selector('div', :class => 'pagination pagination-centered')
end
And neither work. How should I solve the problem?
OK, I found the solution. I should use have_css method:
it "should have pagination" do
page.should have_css('div.pagination.pagination-centered')
end
expect(page).to have_selector :css, 'nav li.active'
Regarding the OP:
Thank you for sharing your thoughts, troubles and solutions, ExiRe - it helped me to find the solution to my own problem. Though I am using Rspec by itself, and not with Capybara, one of my tests was producing a false negative:
it { should have_selector('div.pagination') }
However, inspecting the html in my browser tells me otherwise:
< div class="pagination" >
I changed my test to (somewhat) resemble the latter of your initial two experiments:
it { should have_selector('div', :class => 'pagination') }
And now it passes.
This is what finally worked for me (also using Capybara with Rspec) after trying (and having the tests fail) on earlier examples on this page:
it { should have_selector('div', 'pagination.pagination-centered') }