I'm making an app using Rails 4.0.1 with Ruby 2.0 and I'm running into trouble installing the "Rambling slider" image carousel from here.
Here's the portion of the gemfile:
...
gem 'paperclip'
gem 'rambling-slider-rails', :git => 'https://github.com/gonzedge/rambling-slider-rails'
gem 'uglifier', '>= 1.3.0'
...
I ran bundle install and, following the instructions, put a reference to jquery.rambling.slider in my manifest files.
My app/assets/javascripts/application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.rambling.slider
//= require_tree .
My app/assets/stylesheets/application.css file:
/*
*= require jquery.rambling.slider
*= require_self
*= require_tree .
*/
I included the link tags in app/views/layouts/application.html.erb like so:
...
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag 'jquery.rambling.slider' %>
<%= javascript_include_tag 'jquery.rambling.slider' %>
<%= csrf_meta_tags %>
...
Then added some dummy images and the invoking javascript in the actual view accordingly:
<div id="slider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
<script>
$(window).load(function(){
$('#slider').ramblingSlider();
});
</script>
But all that appears a simple 1'2'3 on the page.
I know that the images are referenced correctly because when I comment out the script in the view file, the 3 images appear with no problems.
The developer tools in Chrome only show that there is a single warning saying "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." at jquery.js?body=1:5375. (I can show this line too if you need it) This warning only appears when the script is uncommented. As soon as I comment it out, the warning goes away.
Any help would be much appreciated. Thanks in advance!
The problem you mentioned(1,2,3 links) occurs because the theme effect was not included, You can include this by adding a div with "theme-default" class, present in the .css file of rambling-slider. For this to work you also need to add the themes folder in stylesheet & images folder of your application
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="ramblingSlider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
</div>
</div>
Related
Been working on this for a few days, I'm trying to use gem "introjs-rails" to create a guided tour in rails. https://github.com/heelhook/intro.js-rails. A few differences between whats below and what the guide asks for are the guide wants '//= require introjs' to be put in application.js, but I get a Javascript error of 'introJs().start(); is undefined variable' so I put '//= require introjs' in the 'Intro.js' file instead and that seems to fix it. But when I start up the page, I'm still not getting a pop up message to appear.
Application.html.erb
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'introjs', 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'intro', 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
Application.scss
/*
*= require introjs
*= require_tree .
*= require_self
*/
Index.html.erb
<h1 data-step="1" data-intro="This is a tooltip!">This is a Tool Tip!</h1>
Intro.js
//= require introjs
introJs().start();
Introjs.css
*= require introjs
Try the following:
Index.html.erb:
<a class='introduction-farm' href='#' data-intro='Hello step one!'></a>
Intro.js:
introJs(".introduction-farm").start();
As you suggested in the comment, loading the script too earlier was the source of the issue for you : setTimeout(function() { introJs().start(); }, 3000);
For your CSS issue, most likely jQuery was not referenced, in which case you need to include it before IntroJS, bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I am following the Rails guide: http://guides.rubyonrails.org/getting_started.html
and I have the following line in my index.html.erb:
<%= link_to 'Destroy', team_path(team), method: :delete, data: { confirm: 'Are you sure?' } %>
But it doesn't work; it just goes to the show page.
For your information, this is my routes.rb:
Rails.application.routes.draw do
get 'bets/index'
root 'bets#index'
resources :teams
end
My controller:
def destroy
#team = Team.find(params[:id])
#team.destroy
redirect_to teams_path
end
My application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree
//= require jquery
//= require jquery_ujs .
My application.html.erb:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'defaults', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
Please note that I have tried changing <%= javascript_include_tag 'defaults', 'data-turbolinks-track' => true %> to <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>, but this gives me the following error:
Showing C:/Sites/BettingSite/app/views/layouts/application.html.erb where line #6 raised:
TypeError: Object doesn't support this property or method
(in C:/Sites/BettingSite/vendor/cache/ruby/2.1.0/gems/turbolinks-2.5.3/lib/assets/javascripts/turbolinks.js.coffee)
Line 6 is the line: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Can someone please help me?
So it seems like the problem is that Windows is not working well with CoffeeScript. According to this question, add this gem to your gemfile:
gem 'coffee-script-source', '1.9.1'
That, or remove all CoffeeScript from your code by renaming your .coffee or .js.coffee files to regular .js files (and, of course, changing your CoffeeScript code to regular JavaScript). You would also have to remove any CoffeeScript gems from your gemfile.
BTW, when you update your gemfile, you must run bundle install and then restart your server.
Following this angular rails tutorial, getting the error of Asset Filtered error
application.html.erb file is
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
main.js.coffee [created a subdirectory in app/asset/javascript/controllers/main]
#= require_self
#= require_tree ./controllers/main
application.js
//= require jquery
//= require jquery_ujs
//= require underscore
//= require angular
Its not loading the angular controller created in app/asset/javascript/controllers/main/mainIndexCtrl.js.coffee
#IndexCtrl = (#scope) ->
$scope.title = "My blog"
Showing the error as follows
Asset filtered out and will not be served: add Rails.application.config.assets.precompile += %w( main.js ) to config/initializers/assets.rb and restart your server
But after changing like this its not showing $scope.title data.
Add Following code in config/initializer/asset.rb Rails.application.config.assets.precompile += %w( main.js )
Recently, I added a bxslider (http://bxslider.com/examples/manual-show-without-infinite-loop) to view galleries in a rails project. I have followed the instructions here (https://github.com/stevenwanderski/bxslider-4) to the best of my understanding, but my gallery images are showing up in a list rather than within the slider. I have attached my code below, and would like to know how I solve this strange behavior.
\app\views\galleries\show.html.erb
<div id="embed_gallery" >
<%= render :partial => 'projects/embed', :collection => #projects, :as => :project%>
</div>
\app\views\galleries\embed.html.erb
<% title h(#gallery.name) %>
<% #section = "explore" %>
<%= javascript_include_tag :defaults %>
<div id="embed_gallery">
<ul class="bxslider">
<%= render :partial => 'projects/embed', :collection => #gallery.projects, :as => :project %>
</ul>
</div>
\app\views\layouts\embed_layout.html.erb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<%= javascript_include_tag 'jquery.bxslider.min' %>
<%= stylesheet_link_tag 'jquery.bxslider'%>
<!-- jQuery library (served from Google) -->
<%= javascript_include_tag 'ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' %>
<script type="text/JavaScript">
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
</html>
app\assets\javascripts\embed_scripts.js
//= require jquery
//= require js/jquery.bxslider.min.js
//= require lib/jquery.bxslider.css
I have the js/jquery.bxslider.min.js and lib/jquery.bxslider.css files included in my project, but still for some reason, the bxslider is not appearing on my page! What am I missing?
The output of your code should be similar to http://jsbin.com/veyexaki/2/edit?html,output. It also makes sense to check if there is no any javascript errors in your code (click F12 to run dev tools in the browser and check console).
I am trying to start using Twitter Bootstrap for Rails. The popover() function is not working at all. Nothing happens.
layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-buttons.js" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js" %>
<%= javascript_include_tag "http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js" %>
<%= csrf_meta_tags %>
<script>
$(function () {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
Here is my a part of my views/test/test.htlm.erb:
<li>
<a data-placement="below"
class="btn danger span2"
data-content="This is a test"
href="#"
rel="popover">+ Test</a>
</li>
Part of my Gemfile:
gem 'rails', '3.1.3'
gem 'jruby-openssl'
gem 'json'
group :assets do
gem 'sass-rails', '~> 3.1.5'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
end
I also tried to copy/paste the twipsy.js and popover.js in my application.js file and to call it in my layouts/application.html.erb with:
<%= javascript_include_tag "application" %>
What am I missing? Any ideas?
The issue is with your selector you're using:
$("a[rel=popover]")
That jQuery selector matches the entire rel attribute, and according to a Bootstrap bug report, Rails adds additional attributes to the rel tag, like nofollow.
Try using this selector instead:
$("a[rel*=popover]")