I am currently using Twitter bootstrap for front end of website. I'm writing the code for navbar in application.html.erb file. I'm not able to give active class to some of the links. Here is my application.html.erb file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<title><%= #title %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="navbar" class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<%=link_to image_tag("knowuros-icon.gif", :alt=>"Brand", :class=>"Brand_Image visible-md visible-lg"), home_index_url %>
<span><%= link_to "Know Your Operating System", home_index_url, :id => "Brand_Text" %><small>One solution to all of your software problems</small></span>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<% Category.roots.each do |category| %>
<li class="<%= is_active?('')><%= link_to category.name, category, :class => "link_text" %></li>
<% end %>
<li class="<%= is_active?('contacts','new') %>"><%= link_to " ContactUs", new_contact_url, :class =>'glyphicon glyphicon-user' %></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if auth_user_signed_in? %>
<li class="<%= is_active?('articles,'new') %>"><%= link_to " NewArticle", new_article_url, :class =>'glyphicon glyphicon-new-window' %></li>
<li><%= link_to " SignOut", destroy_auth_user_session_url, :method => 'delete', :class => "glyphicon glyphicon-log-out" %></li>
<% else %>
<li class="<%= is_active?('auth_users','sign_in') %>"><%= link_to " Login", new_auth_user_session_url, :class => "glyphicon glyphicon-log-in" %></li>
<li class="<%= is_active?('auth_users,'sign_up') %>"><%= link_to " Register", new_auth_user_registration_url, :class => "glyphicon glyphicon-registration-mark" %></li>
<% end %>
<form id= "search" class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default glyphicon glyphicon-search">Search</button>
</form>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<%= bootstrap_flash %>
<%= yield %>
</div><!--/row-->
<footer>
<p>© Company 2016</p>
</footer>
</div> <!-- /container -->
</body>
</html>
Here is application_helper.rb file
module ApplicationHelper
def is_active(controller, action)
params[:action] == action && params[:controller] == controller ? "active" : nil
end
end
The above code is working for all the links except the links in categories.How can I dynamically give active class to links generated from the categories in nav bar.
<% Category.roots.each do |category| %>
<li class="<%= is_active?('')><%= link_to category.name, category, :class => "link_text" %></li>
<% end %>
Related
As a Rails newbie, I am running into an issue in which I am struggling to figure out.
Im rendering a header universally across the four pages of my application which consists of home, about, (signup and signin which are administered through devise).
The header is fine across the home and about pages, however in the devise pages the logo image specifically arrives broken yet all of the other elements appear in tact. Any help would be appreciated.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
<%= yield :head %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-#{name}") %>
<% end %>
<%= yield %>
</div>
<%= render "layouts/footer" %>
</body>
</html>
_header.html.erb
<nav class="navbar navbar-static-top navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"><span class="logo-tagline">.CO.UK</span>
</a>
</div>
<input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Signup", new_user_registration_path %></li>
<% if user_signed_in? %>
<li><%= link_to "Account Settings", edit_user_registration_path %></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
<% else %>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
That's the problem with how you set the path to your logo. Making it absolute or better use image_tag.
<img src="/assets/nippon.svg" ...
Notice, I've added / (forward slash) before assets.
A better way of doing it would be:
<%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %>
I have a ruby on rails application which I am building using bootstrap which looks great when running locally:
I commit my code to master branch on git and then push to my heroku master. When I visit my heroku URL I get this page :
https://whats-on-today.herokuapp.com/
Not so great. I can see there are some 404 errors:
HTTP 404 - GET https://whats-on-today.herokuapp.com/assets/application-96ded6f70c682e6f9f3a1ae3eb283ae0.js
whats-on-today.herokuapp.com/:16
HTTP 404 - GET https://whats-on-today.herokuapp.com/assets/application-2b56caae7bd0b485593c1fca2397cc26.css
I have no idea what these css files are and why they exist. My application layout code looks like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "DemoApp" %></title>
<%= csrf_meta_tags %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DemoApp</a>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<%= bootstrap_flash %>
<%= yield %>
</div>
<div class="col-lg-3">
<div class="well sidebar-nav">
<h3>Sidebar</h3>
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
</body>
</html>
Can anybody explain why the code when deployed to heroku looks like this :
Use a gem for rails 4 on production
gem 'rails_serve_static_assets', group: :production
or use a rails_12factor gem (This gem adds two other gems rails_serve_static_assets and rails_stdout_logging)
gem 'rails_12factor', group: :production
I am putting together a basic website from One Month Rails and can't seem to figure out how to get the navigation bar to show at the top. I have spent a few hours and would like to go to the community. Here is the code from the _header.html.erb (using bootstrap sass)
<div class="navbar navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<%= link_to 'Home', root_path %>
</li>
<li>
<%= link_to 'About', about_path %>
</li>
</ul>
<ul class="nav pull-right">
<li><%= link_to 'Login', '#' %></li>
</ul>
</div>
</div>
</div>
</div>
Here is the code from the application.html.erb tab:
<!DOCTYPE html>
<html>
<head>
<body>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You seem to have some HTML errors in application.html.erb. But most modern browsers will fix those errors for you when loading the page. Here's a better version:
<!DOCTYPE html>
<html>
<head>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
You should also make sure your _header.html.erb is in app/views/layouts/.
Finally, don't forget to add bootstrap's css file to app/assets/stylesheets/.
I'm using the bootstrap-sass gem and for some reason in the navbar I'm using the active class for one of the li's below, however it doesn't appear pressed down.
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= params[:controller].parameterize %>_controller">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<%= link_to 'evoALL', root_path,
html_options = {:class => 'brand'} %>
<% navArr = ["Dashboard", "Help People",
"Get Help", "Contact Us"] %>
<% flash.each do |key, value| %>
<p class="lead"><%= value %></p>
<% end %>
<ul class="nav">
<% navArr.each do |value| %>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<%= yield %>
<div class="container">
<div id="footer"><!-- footer start -->
<div class="row-fluid">
<div class="span12">
<p class="pull-right">
© <%= Date.today.year %>
</p>
</div>
</div>
</div><!-- footer end -->
</div>
</div> <!-- close container div -->
</body>
</html>
index.html.erb for the view file of the index method of the main controller that gets routed to for the root of the application:
<%= provide(:title, 'evoALL') %>
<%= provide(:navActive, 'Get Help') %>
<div class="container">
<div class="row">
<div class="span12">
<p>Needs Home Page</p>
</div>
</div>
</div>
I was applying the active class to the a tag instead of the li tag.
The correct solution would be to replace this:
<% navArr.each do |value| %>
<ul>
<li>
<a
<% if (yield(:navActive)==value) %>
class="active"
<% end %>
href="#">
<%=value%>
</a>
</li>
</ul>
<% end %>
with this:
<ul class="nav">
<% navArr.each do |value| %>
<li
<% if (yield(:navActive)==value) %>
class="active"
<% end %>>
<a href="#">
<%=value%>
</a>
</li>
<% end %>
</ul>
My website works well on my mac and iphone but in IE it doesn't. In IE some of the navbar features aren't right (i.e. layout is incorrect, searchbox doesn't have placeholder text, one of the navbar elements (favourites) looks completely different). I'm not sure where the problem lies
layout/application.html.erb is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= analytics_init if Rails.env.production? %>
<title>Guidelines for Me</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<link href="../assets/bootstrap-responsive.css" rel="stylesheet">
<%= csrf_meta_tags %>
<script type="text/javascript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
function clearText(){
search = $('.search-query');
if (search.defaultValue==search.value)
search.value = ""
}
type="text/javascript">
$(document).ready(function() {
$('.collapse').collapse();
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<% if Guideline.count % 100 ==0 %>
<%= link_to "#{Guideline.count}" " guidelinesforme - yay!", guidelines_path, :class => 'brand' %>
<% else %>
<%= link_to "#{Guideline.count}" " guidelinesforme!", guidelines_path, :class => 'brand' %>
<% end %>
<div class="nav-collapse in collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
List by...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "...Topic", topics_path %></li>
<li><%= link_to "...Organisation", hospitals_path %></li>
<li><%= link_to "...Specialty", specialties_path %></li>
</li>
</ul>
<% if user_signed_in? %>
<li><%= link_to "Favourites", favourites_path %></li>
<% else %>
<li><%= link_to "Favourites", register_path %></li>
<% end %>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<% if user_signed_in? %>
<%= current_user.first_name %>
<% else %>
Log in or Sign up
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<% if user_signed_in? %>
<li ><%= link_to "Edit profile", edit_path %></li>
<li> <%= link_to "Log out", logout_path %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
<% end %>
<li><%= link_to "About us", about_path %></li>
</li>
</ul>
</li>
<li >
<%= form_tag guidelines_path, :class => 'navbar-search', :onSubmit=>"clearText(this)",:method => :get do %>
<%= text_field_tag :search, params[:search], :class => 'search-query input-small', :placeholder=>"Search", :ONFOCUS=>"clearDefault(this)" %> <% end %>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<% flash.each do |type, message| %>
<div class="alert <%= flash_class type %>">
<button class="close" data-dismiss="alert">x</button>
<%= message %>
</div>
<% end %>
</div>
<div class="container">
<%= yield %>
</div>
</body>
</html>
I've used twitter bootstrap.
I did add
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
before my but it doesn't seem to make a difference.
First of all Placeholder is not supported till IE9 . But you can use javascript pollyfills to enable the placeholder support, use http://www.modernizr.com/ for that purpose.