I am sure this is something really silly, regarding where to put the files, but here goes:
I am trying Foundation 4 using the gem (zurb-foundation), rails 3, ruby 1.9.3 and I am trying to get the joyride feature to work.
Here is what I have so far:
<body>
<h1>Listing products</h1>
<div id="firstStop" class="panel">Some awesome part of your site!</div>
<table>
<tr>
<th> <h2 id="numero1" class="so-awesome">Name</h2></th>
<th><h3 id="numero2">Price</h3></th>
<th></th>
<th></th>
<th></th>
</tr>
<% #products.each do |product| %>
<tr>
<td><%= product.name %></td>
<td><%= product.price %></td>
<td><%= link_to 'Show', product %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New Product', new_product_path, class: "button radius" %>
<ol class="list_index_tour" data-joyride>
<li data-id="firstStop" data-text="Next">
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="Next">
<h4>Stop #4</h4>
<p>It works as a modal too!</p>
</li>
</ol>
<script>
$(window).load(function() {
$("#list_index_tour").joyride({
});
});
</script>
On my application.html.erb:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Uncomment to make IE8 render like IE7 -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/custom.modernizr" %>
<%= csrf_meta_tags %>
<!-- /* Attach the Joyride CSS file */ -->
<link rel=" stylesheet" type="text/css" href="jquery.joyride-2.0.css">
<!--/* jQuery needs to be attached */ -->
<script src="jquery-1.8.3.min.js"></script>
<!--/* Then attach the Joyride plugin */ -->
<script src="jquery.joyride-2.0.3.js"></script>
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><%= link_to "Awesome Store", products_path %></a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li><%= link_to "Browse Products", products_path %></li>
<li class="divider"></li>
<li><%= link_to "Price List" %></li>
<li class="divider"></li>
<li><%= link_to "Contact Us" %></li>
<li class="divider"></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</nav>
<div class="row">
<div class="small-8 columns"><%= yield %></div>
<div class="small-4 columns">
<h2 class="subheader">About Us</h2>
yatta yatta yatta
</div>
</div>
<%= javascript_include_tag "application" %>
</body>
</html>
And on my application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require jquery.joyride-2.0.3
//= require modernizr.mq
//= require jquery.cookie
//= require_tree .
$(function(){ $(document).foundation(); });
Application.css
*= require_self
*= require foundation_and_overrides
*= require joyride-2.0.3
*= require_tree .
*/
I placed the files jquery.joyride-2.0.3.js, modernizr, and so on under the directory app/assets/javascripts/
All I get is a sad looking list :-(
I did try to follow the suggestions from this question here, but to no avail.
Help?
Samantha,
The first issue with your code is that your jQuery selector is using the # symbol, which means it's looking for a DOM element with that ID. However, your HTML markup of the <ol> for the tour doesn't have an ID specified, only a class.
So, the first fix for you would be to simply update your <ol>
FROM:
<ol class="list_index_tour" data-joyride>
TO:
<ol id="list_index_tour" data-joyride>
However, I ran into a similar issue even when my selector was right and figured it out - see more below. Sadly Zurb's own instructions for setup are misleading. They say you can use whatever ID you want for your <ol> list that holds the steps of your guided tour, but you actually can't out of the box.
Zurb's code for joyride is dependent upon a specific ID between the CSS/Javascript. This ID and the relevant code is located within the included joyride.css file. The ID used there is "joyRideTipContent." I've pasted the relevant couple lines of code from the joyride.css file (they're near the very top):
#joyRideTipContent { display: none; }
.joyRideTipContent { display: none; }
If you would prefer to use a different ID, simply change the above code in the css file as follows and then it will work (I've included the name from your code snippet above):
#list_index_tour{ display: none; }
.list_index_tour{ display: none; }
Alternatively, you could just change the ID and selector of your <ol> to be joyRideTipContent and it would work right out of the box.
Lastly, your code references are fine for Rails for including the relevant Javascript and CSS files. You may have been trying to cover all your bases when the plugin wasn't working. However, your code isn't DRY in that it's duplicitous to use Sprockets to the joyride js and css files and ALSO to have JS and CSS stylesheet tags in your application.html.erb.
Outside of sheer duplication, this approach can cause problems over time as you maintain your app when you change out files and forget to update it in both places. It also can cause conflicts depending on the ordering of your includes.
Because Rails Sprockets and the Asset Pipeline are very powerful included tools of the framework, I'd recommend just sticking with that and removing the duplicate references from your application.html.erb.
So for the duplicate tags aspect...Keep these:
Application.js
//= require jquery.joyride-2.0.3
Application.css
*= require joyride-2.0.3
And Remove the references from here:
Application.html.erb
Related
I am creating a website for a friend using ROR like and am formatting using Bootstrap. I creates a couple of static pages, for example a home page. After running bundle install and adding bootstrap css framework,and restarting the server none of the html written on any of the pages is showing up. However, the application.html.erb is rendering just fine, but it's just a simple header.
In my gem file I added:
gem 'bootstrap-sass', '3.3.7'
Next I created a custom.scss file and added:
#import "bootstrap-sprockets";
#import "bootstrap";
I then added this to my application.js:
//= require jquery
//= require bootstrap-sprockets
Here is the code from my Application.html.erb which runs just fine:
<!DOCTYPE html>
<html>
<head>
<Title>Real Life Magic Make-Believe</Title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse", id: "nav">
<div class="container">
<%= link_to "REAL LIFE MAGIC MAKE-BELIEVE", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path, id: "l1" %></li>
<li><%= link_to "About", about_path, id: "l1"%></li>
<li><%= link_to "Contact Us", contact_path, id: "l1"%></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
And here is a example of code that wont even load:
<!DOCTYPE html>
<div class= "center jumbotron">
<body>
<h1>REAL LIFE MAGIC MAKE-BELIEVE</h1>
<p>
Welcome to the home page
</p>
</body>
</div>
ben,
It's hard to tell without seeing your settings. Here are the instructions i followed and i got bootstrap working properly with rails. Let me know if you followed the instructions already if not perhaps you can post your settings so we can see what goes wrong.
http://www.rubydoc.info/gems/bootstrap-sass/3.3.7
I currently have my navbar in my index.htm.erb file. It is currently displaying only on the homepage.
I wanted to know what are the necessary steps one must take in order to have the navbar appearing on each and very page of my app?
The code for my navbar looks like this:
<header class="navbar navbar-inverse">
<div class="navbar-class">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li><%=link_to "ABOUT", about_us_path%></li>
<li><%=link_to "OUR SERVICES", our_services_path %></li>
<li><%=link_to "RATES", rates_path %></li>
<li><%=link_to'CAREERS', careers_path%></li>
<li>TRAINING</li>
<li><%= link_to"GALLERY", gallery_path %></li>
<li><%=link_to"MEDIA", media_path%></li>
<li><%=link_to"FAQS", faq_path %></li>
<li>CONTACT</li>
</ul>
</div>
</div>
</header>
Any input would be greatly appreciated.
Thanks
If you go to app/views/layouts/application.html.erb, you will see something like this:
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
This is the template in which every page of your app gets rendered. This is where you want to put your navbar. You can cut and paste directly to this file, or you can render it as a partial.
To render it as a partial, save your navbar code in that same directory and name it however you like, but make sure you save it as ".html.erb" and it starts with an underscore. For example: "_navbar.html.erb".
The underscore lets Rails know that it is a partial, and the ".html.erb" tells Rails what preprocessor to use.
After saving it as "app/views/layouts/_navbar.html.erb", render it within your "application.html.erb":
...
<body>
<%= render "layouts/navbar" %>
<%= yield %>
</body>
...
It should then show up on every page.
You'll want to remove it from index.html.erb and put it into layouts/application.html.erb
Every response will then use the application layout first, and yield the content from the specific show/index view as requested by the controller.
It should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>SspPrototype</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<header class="navbar navbar-inverse">
<div class="navbar-class">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li><%=link_to "ABOUT", about_us_path%></li>
<li><%=link_to "OUR SERVICES", our_services_path %></li>
<li><%=link_to "RATES", rates_path %></li>
<li><%=link_to'CAREERS', careers_path%></li>
<li>TRAINING</li>
<li><%= link_to"GALLERY", gallery_path %></li>
<li><%=link_to"MEDIA", media_path%></li>
<li><%=link_to"FAQS", faq_path %></li>
<li>CONTACT</li>
</ul>
</div>
</div>
</header>
<%= yield %>
</body>
</html>
Here's a couple overview guides:
http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts
http://railsapps.github.io/rails-default-application-layout.html
In app/views create a shared folder. Inside the folder (app/views/shared) you create a partial called _navbar.html.erb.
Inside the partial, copy the code for your navbar.
You then require the navbar in views/layouts/application.html.erb by writing just above <%=yield%>: <%= render "shared/navbar" %>
You can do this with the _footer.html.erb too (putting it below the <%= yield %>)
I have to include Bootstrap DateTimePicker to my university project but I've tried and nothing happened. I used this documentation and did:
added gem 'bootstrap-datetimepicker-rails' to Gemfile and run bundle install
added //= require bootstrap-datetimepicker to application.js
Wiev:
<div id="container">
<center>
<p>
<strong>First name:</strong>
<%= Doctor.find(session[:current_doctor_id2]).first_name%>
</p>
<p>
<strong>Last name:</strong>
<%= Doctor.find(session[:current_doctor_id]).last_name%>
</p>
<p>
<strong>Doctor spec:</strong>
<%= Doctor.find(session[:current_doctor_id]).spec%>
</p>
<input type="text" data-behaviour='datepicker' >
<%= submit_tag "Check", :name => nil %>
</center>
</div>
Now I see only input on my site, there is no calendar button which allow me to choose date and time.
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require_tree .
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datepicker();
});
LayOut(Here was an error ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<%= favicon_link_tag 'favicon.ico' %>
<title>Student - Zaklad Opieki Zdrowotnej</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<%= stylesheet_link_tag 'application',media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</head>
<body id="top">
<div class="wrapper">
<!-- ####################################################################################################### -->
<div id="header">
<div class="fl_left">
<h1>ZOZ Student</h1>
<p>Twoja najblizsza i ulubiona przychodnia</p>
<p>Latwe zarzadzanie poprzez Internet!</p>
</div>
<div class="fl_right"><img src="/images/demo/banner.gif" alt="" /></div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="topbar">
<div class="fl_left">
<p>Adres: Rzeszow, ul. Wincentego Pola 17/1</p>
<p>Tel: +48 175534322 | Mail: kontakt#zoz.pl</p>
</div>
<div id="topnav">
<ul>
<li><%= link_to 'O nas', welcome_index_path %></li>
<li><%= link_to 'Nasze poradnie oraz przychodnie', welcome_index2_path %></li>
<li>Panel zarzadzania dla lekarzy i pracownikow
<ul>
<%= render 'welcome/form' %>
</ul>
</li>
</ul>
</div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="container">
<%= yield %>
</div>
<!-- ####################################################################################################### -->
<div id="homecontent">
<ul>
<li>
<h2>System zarzadzania juz otwarty</h2>
<img class="imgl" src="/images/demo/x1.gif" alt="" />
<p>Dzieki internetowemu systemowi zarzadzania nasi lekarze w latwy sposob moga kontrolowowac, tworzyc i edytowac rejestracje, wizyty a co za tym idzie pacjenci poinformowani sa o wszystkim na biezaco droga elektroniczna. Ulatwi to z pewnoscia kontakt z pacjentami jak i usprawni funkcjonowanie calego systemu.<p>
</li>
<li>
<h2>Nowo otwarte przychodnie</h2>
<img class="imgl" src="/images/demo/x2.gif" alt="" />
<p>Jest nam bardzo milo poinformowac, ze nasz Zaklad Opieki Zdrowotnej podpisal umowe z trzema nowymi przychodniami. Co za tym idzie pacjenci moga skorzystac u nas z uslug wykwalifikowanych stomatologow, neurologow oraz psychologow.<p>
</li>
<li class="last">
<h2>Liczba pacjentow rosnie!</h2>
<img class="imgl" src="/images/demo/x3.gif" alt="" />
<p>Cieszymy sie, ze z naszych uslug korzysta coraz wiecej pacjentow. Swiadczy to o naszej profesjonalnej kadrze oraz wykwalifikowanych specjalistach. Wciaz staramy sie zwiekszyc zakres naszych uslug aby kazdy znalazl u nas to czego potrzebuje. Wkrotce otwarcie nowych przychodni!</p>
</li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="imageline">
<ul>
<li><img src="/images/demo/1.gif" alt="" /></li>
<li><img src="/images/demo/2.gif" alt="" /></li>
<li><img src="/images/demo/3.gif" alt="" /></li>
<li><img src="/images/demo/4.gif" alt="" /></li>
<li class="last"><img src="/images/demo/5.gif" alt="" /></li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<!-- ####################################################################################################### -->
<div id="copyright">
<p class="fl_left">Copyright © 2014 - L15 Team</p>
<p class="fl_right">Strona przygotowana na potrzeby projektu</p>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<br class="clear" />
</div>
</body>
</html>
Lets go through the steps of using bootstrap-datetimepicker-rails
a. Add gem 'bootstrap-datetimepicker-rails' inside your gemfile and then do bundle install.
b. Add this line to app/assets/stylesheets/application.css.scss
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
c. Add this line to app/assets/javascripts/application.js
//= require bootstrap-datetimepicker
d. How to use it inside your form or wherever you want to use:
Add an input field to show your calendar like:
<input type="text" data-behaviour='datepicker' >
and then call js on this input field by:
Add this code at the bottom of your application.js
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datetimepicker();
});
Edit
As per discussion you have not included javascript tag inside your layout file. You need to solve it by adding
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
b. Add this line to app/assets/stylesheets/application.css.sass
...
*= require bootstrap-datetimepicker
*= require_tree .
and at the bottom of this
#import "bootstrap-sprockets"
#import "bootstrap"
I'm using Capybara and Rspec in a Rails app, and I keep failing some of my tests with this message :
Failure/Error: it { should have_content('error') }
Capybara::Ambiguous:
Ambiguous match, found 2 elements matching xpath "/html"
And that's kind of logical, because in my test, my app should render two messages with the 'error' content.
<% if object.errors.any? %>
<div id="error_explanation">
<div class="alert alert-error">
<%= t('the_form_contains') %>
<%= pluralize(object.errors.count, t('error')) %>.
</div>
<ul>
<% object.errors.full_messages.each do |msg| %>
<li>* <%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
And here my application layout :
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<div class="row-fluid">
<div class="offset2 span8 offset2">
<% flash.each do |key,value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
</div>
</div>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
Do you know a way (like an option), to make it pass ?
EDIT
I used save_and_open_page and I didn't found any additional html tag, neither error messages outside the page. But when I remove <!DOCTYPE html> then it works. Must I really have <!DOCTYPE html> and an opening <html> tag ? Can I delete <!DOCTYPE html> without consequences ?
<!DOCTYPE html>
<html>
<head>
<title>Le Troquet</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
.
.
.
.
.
<!-- There is no html tag here -->
.
.
.
.
</body>
</html>
It looks like the problem is that you either:
have two <html> tags in your page, or possibly
the "error" text appears outside the <html></html> tags.
See this discussion: Ambiguous match, found 2 elements matching xpath "/html".
Check for elements outside of the closing </html> tag. In my case (HAML), I had a javascript tag that was improperly indented
%html
...
:javascript
FIX
%html
...
:javascript
...
Indenting the :javascript so it was contained within the html tag solved the issue.
OK, I understand the problem. When I use should have_content, Capybara search in the whole layout the content. But it finds two html tags, that make it fails, because it doesn't know which is the right one. And why is there two html tags ? Because Capybara doesn't ignore the <!DOCTYPE html>.
I solved my problem, but it's more of a bypass. Instead of searching a content, I made Capybara search for the 'error' div, that contains the 'error' messages. Thereby, it doesn't have to search the whole application layout, and it doesn't get stucked with the two html tags.
So I just had to replace it { should have_content('error') } by it { should have_selector('div', text: 'error') }, and it worked.
Before you go to website, I want you too look for this. You will notice when the website loads, the first second or two... it display the links in the navbar in a list format, and looks buggy... bc when it finishes loading it looks alright.
website: www.powerliftingbasics.com
This happens every time you refresh/load the page. I use ruby on rails with twitter bootstrap.
I can't figure it out.
here is my navbar code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<img src="assets/logosmall.png" alt="Small Logo">
<a class="brand navfont" href="/">Powerlifting Basics</a>
<div class="container nav-collapse">
<ul class="nav pull-right">
<li><%= link_to "Bench Press", "/benchpress" %></li>
<li><%= link_to "Deadlift", "/deadlift" %></li>
<li><%= link_to "Squat", "/squat" %></li>
<li><%= link_to "Equipment", "/equipment" %></li>
<li class="dropdown">
more<b class="caret"></b>
<ul class="dropdown-menu">
<li class="divider"></li>
<li><%= link_to "Subscribe", "/subscribe" %></li>
<li> Contact Us </li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
In your layouts/application.html.erb
add application.css and application.js at the top
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>PowerLiftingBasics</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
</head>
<body>
<%= yield %>
</body>
</html>
It happens cause you placed link to your css files at bottom of page. You should load it before page body. At least, put
<link href="/assets/application-65943938be14c000984bcb9478d30563.css" media="all" rel="stylesheet" type="text/css">
inside <head></head> tags.
The best practice is to place css and favicon links in head of page. Javascripts links place at bottom of body (before closing </body> tag).