I am developing an app using Rails 4 and Foundation 4. I'm using the top-bar navigation elements from Foundation 4 which hide the menu in a menu icon when the display is small.
The problem I am having is that I can only toggle the menu when the page is first loaded (after going to it directly or reloading it). If I click on any links, the menu stops working until the page is refreshed.
If I open up Chome's debugger I find
Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.
Googling that seemed to show it was a bug in Chrome, but Firefox doesn't work, nor does my phone.
Here is my code for the top bar
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><%= link_to "My App",root_path %></h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<% if signed_in? %>
<li class="divider hide-for-small"></li>
<li><%= link_to "My Account", account_path %></li>
<li class="divider"></li>
<% end %>
<li class="divider show-for-small"></li>
<li class="has-form">
<% if signed_in? %>
<%= link_to "Sign Out", signout_path, class: "button", method: "delete" %>
<% else %>
<%= link_to "Sign In", signin_path, class: "button" %>
<% end %>
</li>
</ul>
</section>
</nav>
Any ideas on how to get this working? I haven't changed any of the css for the top-bar and I'm using Foundation 4.3.1
It turns out this is caused by TurboLinks in Rails 4.0
I found this page http://blog.joshsoftware.com/2013/06/28/troubleshooting-turbolinks-with-rails-4/ that talks about a solution.
My application.js file looks like
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
$(document).foundation();
$(function(){ $(document).foundation(); });
//= require_tree .
//= require turbolinks
and I had to add the following line to my Gemfile
gem 'jquery-turbolinks'
Related
I have a rails 4 app and am trying to use the font awesome icons in it (for social media login links).
I have:
/* application.css.css:
*= require_framework_and_overrides.css.scss
*= require_self
*= require_tree .
*/
/* framework_and_overrides.css.css: */
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
In my gemfile:
gem 'font-awesome-sass', '~> 4.4.0'
I am also using bootstrap sass.
In my view, I try:
<%= link_to content_tag(icon('facebook', class: 'facebookauth')) %>
It renders "<>>" with nothing in between.
I have also tried:
<%= link_to content_tag icon('facebook', class: 'facebookauth') %>
I get the same error.
When I try:
<%= link_to content_tag(fa_icon('facebook', class: 'facebookauth')) %>
<%= link_to content_tag fa_icon('facebook', class: 'facebookauth') %>
I get this error:
undefined method `fa_icon' for
Does anyone know how to use font-awesome in Rails?
A new attempt:
<%= link_to icon('google', id: 'googleauth'), user_omniauth_authorize_path(:google_oauth2) %>
<%= link_to icon('linkedin', id: 'linkedinauth'), user_omniauth_authorize_path(:linkedin) %>
<%= link_to icon('twitter', id: 'twitterauth'), user_omniauth_authorize_path(:twitter) %>
<% end %>
This works fine to make the links, but I'm trying to put styling on the icons.
I have defined a css div called :facebookauth.
When I change the above, to:
<%= link_to icon('facebook', id: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
Or try:
<%= link_to icon('facebook', class: 'facebookauth'), user_omniauth_authorize_path(:facebook) %>
The links disappear. I want to make the size bigger and use my color styles. How can I put CSS on these links?
The helper seems to just populate the content of the content_tag - you still need to provide an element.
From the docs:
content_tag(:li, fa_icon('facebook', class: 'facebookauth'))
If you wanted to use the icon on its own, you'd be able to call fa_icon individually:
fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>
--
how to use the gem as it is intended
All the "web font" gems basically do the following:
Create a "web font" of many icons
Create a CSS file with classes, each class using a :before tag with content: of the web font
Each time you call one of the elements of the font (with class), you're really just prepending a :before with the appropriate font reference.
Therefore, in order to do this, you need a valid HTML element. The fa_icon helper seems to create a <i> tag -- <i class="fa fa-camera-retro"></i>. If you want to use it with content_tag, you need to therefore provide another element for Rails to wrap the content in.
--
Update
Make sure it works like this:
<%= link_to fa_icon("facebook", text: "Facebook", class: "facebookauth"), your_path %>
We recently used the gem in a project and here's the result:
Try this:
Pure HTML:
<a class="btn btn-lg btn-social btn-github" href="<%= content_tag_url %>">
<i class="fa fa-facebook"></i> Facebook
</a>
Add
include FontAwesome::Rails::IconHelper to app/helpers/application_helper.rb
Im trying to add a glyphicon to the left of a link in a dropdown menu, but cant seem to figure it out. This is what my code looks like:
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-flag"></i><%=link_to "report link", report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %></li>
Can someone please explain to me how to do this?
Thanks!
Simply put the icon inside the link - there's no visual downside to doing so, and even potentially improves UX (you can click on the icon too).
<li><i class="glyphicon glyphicon-flag"></i> link</li>
See this bootply
So your new ruby link would look like
<%=link_to "<i class='glyphicon glyphicon-flag'></i> report link".html_safe, report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %>
(Apologies if this is wrong, I don't actually know Ruby. I assume this was a css positioning error, but if the Ruby is wrong too let me know and I shall delete this answer)
Try using a span outside of your link_to. You would remove the display text ("report link") after the link_to and add it back after the Glyphicon span class ends.
<li>
<%=link_to report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post do %>
<span class="glyphicon glyphicon-flag"></span> Report Link
<% end %>
</li>
I am having trouble calling the css to indicate the current page that will allow a color tab to show when a page is clicked. I know the "current-menu-item" class works because when you do:
<li id="menu-item" class="current-menu-item">
About Us
</li>
You are able to see the properties associated with the task. I don't know what else to try and I am looking for insight on what I might be doing wrong.
This is my main.rb file
require 'bundler/setup'
require 'rubygems'
require 'sinatra'
require 'sinatra/activerecord'
require 'sinatra/flash'
require 'sinatra/reloader' if development?
require './config/environments'
require 'pathname'
require 'uri'
require './routes/init'
require './helpers/init'
require './models/init'
get '/' do
erb :"index.html"
end
get '/about-us' do
erb :"about_us.html"
end
get '/services' do
erb :"services.html"
end
get '/sign-up' do
erb :"sign_up.html"
end
init.rb
require_relative 'user.rb'
helper1.rb
helpers do
def active_page?(path='')
request.path_info =='/'+path ? 'active_page': nil
end
end
layout.erb
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item" class="menu-item">
Home
</li>
<li id="menu-item" class="menu-item">
Services
</li>
<li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page? %>" >
About Us
</li>
<li id="menu-item" class="menu-item ">Sign Up</li>
</ul>
</div>
two things, first:
you want to display the string, "current-menu-item" and not the object current-menu-item if the conditional is true, so you want to move the quotes
change:
<li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page? %>" >
to:
<li id="menu-item" class=<%= "current-menu-item" if '/about-us' == active_page? %>>
second:
the conditional and helper method are not used correctly
the helper would be used best if it returned true or false
change the helper method to the following:
def active_page?(path='')
request.path_info == '/' + path
end
then back to the layout:
<li id="menu-item" class=<%= "current-menu-item" if active_page?("about-us") %>>
logically, this will accomplish what you are trying to do.
I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?
My page code (chopped a bit):
[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]
The code it produces:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="tabs active">
<a data-toggle="tab" href="#tab1-slug">TAB1</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab2-slug">TAB2</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab3-slug">TAB3</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab4-slug">TAB4</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div id="tab1-slug" class="tab-pane active">
<p></p>
<h2>header</h2>
<p><strong>bold</strong></p>
<p>content</p>
<p></p>
</div>
<div id="tab2-slug" class="tab-pane ">
<p></p>
<h2>TAB2</h2>
<p><strong>These are usually two day</strong></p>
</div>
<div id="tab3-slug" class="tab-pane ">
<p></p>
<h2>TAB3</h2>
<p>1 to 2 day events</p><p></p>
</div>
<div id="tab4-slug" class="tab-pane ">
<p>
<h2>TAB4</h2>
<p><strong>5 to 10 day courses</strong></p>
</div>
</div>
Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs:
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.
If your tab looks like this:
<li>Profile</li>
You can link to it and activate/open it using a link like this:
Link to my tab
The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link:
Step 1 Activate the proper tab
Step 2 Scroll to the content on the tab.
It does this using only a single hash in the URL.
For example: http://www.example.com/mypage/#content
This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.
Hope this helps:
Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip
Supposing that jQuery is being loaded and that the link URL is something like
http://example.com/page-with-tabs/?tab=NUMBER
We print some conditional script at the footer:
add_action( 'wp_footer', 'active_tab_so_19576232' );
function active_tab_so_19576232()
{
# Query var not set in URL, bail out
if( !isset( $_GET['tab'] ) )
return;
# Change the active tab
$tab = '#tab'. $_GET['tab'] .'-slug';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.tab-pane.active').removeClass('active');
$('<?php echo $tab; ?>').addClass('active');
});
</script>
<?php
}
Should be a plugin, but you can drop the code in your theme functions.php.
I have a NewsPage type and in the navigation I want to show an entry called Latest News which will render the latest NewsPage (according to Created field). Is this possible?
Depending on your Template for the navigation you should be able to insert the link to the latest NewsPage inside a list item inside the ul for the navigation.
To get the latest NewsPage you will need to write a function inside your Page Controller that returns the latest news page. Here is an example.
function GetLatestNews()
{
return DataObject::get_one('NewsPage', '', '', 'Created DESC');
}
Then inside your template for the navigation you should do something like this.
<ul id="navigation">
<% control Menu(1) %>
<li class="$LinkingMode">$MenuTitle.XML</li>
<% end_control %>
<li class="$LinkingMode">Latest News</li>
</ul>
That will insert the link at the end of the navigation. If you want to insert the link into a specific position you can use the $Pos inside the control to check which position it is at. Here is an example:<% if Pos
<ul id="navigation">
<% control Menu(1) %>
<% if Pos = 2 %>
<li class="$LinkingMode">Latest News</li>
<% end_if %>
<li class="$LinkingMode">$MenuTitle.XML</li>
<% end_control %>
</ul>
The above will insert the link at the second position inside the navigation.