Using a jQuery plugin in a Rails application - javascript

I'm currently trying to set up a very basic lightbox effect for a login in a Rails application. I'm using a the plugin Lightbox Evolution. Usage is as follows per the directions:
Make sure it is a valid DOCTYPE.
Include the jQuery library lightbox CSS and the lightbox js file in the head of the pages where you want to use the lightbox
Initialize the plugin:
<script type="text/javascript"
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
The jquery.lightbox.min.js and jquery.lightbox.css are located in the vendor/assets/javascripts and vendor/assets/stylesheets directories respectively.
I've included the lightbox script in the application.html.erb file since I plan on using the lightbox effect on other places on the site.
My application.html.erb file looks like:
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "jquery.lightbox.css", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery.lightbox.min" %>
<%= csrf_meta_tags %>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
</html>
My landing page is app/views/welcome/index.html.erb:
<h1>Landing Page</h1>
Login
and I use the class "lightbox" per the instructions.
When I go to localhost:3000, the html is built as follows in development environment:
<!DOCTYPE html>
<html>
<head>
<title>MetaLinx Material Management</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/containers.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scales.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/welcome.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.lightbox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/containers.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.ui.timepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.datetimepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.colorpicker.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filter-box.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-multiselect.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.filtering-select.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.remote-form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/jquery.pjax.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_nested_form.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.nested-form-hooks.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ra.widgets.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/custom/ui.js?body=1" type="text/javascript"></script>
<script src="/assets/rails_admin/rails_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/scales.js?body=1" type="text/javascript"></script>
<script src="/assets/welcome.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.lightbox.min.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NGWSCp8qKAwi52ViQNfSP+2WG4teWxwOzCDCFfqQaLc=" name="csrf-token" />
</head>
<body>
<p class="notice"></p>
<p class="alert"></p>
<h1>Landing Page</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
Login
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</body>
I'm using devise for authentication, so it sets up the routes for users/sign_in. When I click the link above, it takes me to the page users/new, but it does not pop-up in the lightbox. the generated html looks like:
app/views/sessions/new.html.erb:
<h2>Sign in</h2>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<div><%= f.submit "Sign in" %></div>
<% end %>
<%= render "devise/shared/links" %>
So the question is what am I doing wrong so that when I click the "Login" link in app/views/welcome/new.html.erb it take me to the login page rather than popping it up using the lightbox jQuery?

Try change href="users/sign_in" to href="#". Since the link really doesn't matter if you just wanna click on it and let lightbox pops out the login form.

Related

How to use JS functions from an EJS file

I was wondering how I would do it; use a function written in a external javascript file and then use it in ejs.
Here's the code;
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script>
<script src='/javascripts/index.js'></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.css">
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<% include header %>
<section class='header-placeholder'></section>
<section class='game'>
<% items.forEach(function(item){ %>
<% hi(); %>
<% }); %>
</section>
<% include footer %>
</body>
I'm trying to call the function hi() which is written in index.js like so;
function hi(){
console.log('hello');
}
is there any way I can access this function, or could I somehow have the function in ejs and access it from js?

Algolia Instantsearch for rails no results

Hi there I'm new on Ror and Js,
I would like to install the algolia Instantsearch on my app, my products appear on algolia index, but I cannot succeed to display my Instantsearch and results on my html page (products index)
If anyone can help me, that would be great :-)
thks in advance
Here is my my code:
layout I included:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
product.rb (model):
include AlgoliaSearch
algoliasearch if: :active? do
attribute :name, :brand, :category, :color, :size, :price
end
search.html.erb:
<div>
<input id="search-input" placeholder="Search for products">
<!-- We use a specific placeholder in the input to guides users in their search. -->
</div>
</header>
<main>
<div id="hits"></div>
<div id="pagination"></div>
</main>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.js"></script>
<script src="app.js"></script>
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
app.js:
var search = instantsearch({
// Replace with your own values
appId: "012967GRTQ",
apiKey: "a3f100606d982f64d7c25410c672f5f5", // search only API key, no ADMIN key
indexName: 'Product',
urlSync: true,
searchParameters: {
hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-input'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination'
})
);
search.start();
config/initializers/algoliasearch.rb
require 'rubygems'
require 'algoliasearch'
Algolia.init application_id: "XXXXXX",
api_key: "xxxxxxxxxxxx"
index = Algolia::Index.new("Product")
And I imported the css from:
.....github.com/algolia/examples/blob/master/instant-search/instantsearch.js/assets/style.css.....
The following ressources:
GET http://localhost:3000/app.js 404 (Not Found)
GET http://localhost:3000/js/main.js 404 (Not Found)
Here is my layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>XXXXXXX</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= javascript_include_tag "https://js.stripe.com/v2/" %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<link rel="stylesheet" type="text/css" href="css/jTinder.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js#2.3/dist/instantsearch.min.css">
<%= favicon_link_tag 'favicon.ico'%>
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/message' %>
<%= yield %>
<%= javascript_include_tag "https://maps.google.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerclusterer/src/markerclusterer_compiled.js" %>
<%= javascript_include_tag "https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" %>
<%= javascript_include_tag 'application' %>
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- transform2d lib -->
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
<!-- jTinder lib -->
<script type="text/javascript" src="js/jquery.jTinder.js"></script>
<!-- jTinder initialization script -->
<script type="text/javascript" src="js/main.js"></script>
<%= yield(:after_js) %>
<%= render 'pages/footer' %>
</body>
</html>

JavaScript will not run at all

I have this template as my sinatra layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
...
</nav>
<div class="container">
<%= yield %>
</div>
<%#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>%>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="/static/js/bootstrap.min.js"/>
<script src="/static/js/jobs/new.js" />
</body>
</html>
and this small javascript call
console.log("running")
$('#datepicker').datepicker()
the server gets a 200 call to the js file but nothing will print to the console or execute.
Always use <script></script>.
<script src="..." /> is not a valid tag. When the HTML is parsed, it thinks that <script src="/static/js/jobs/new.js" /> is in the body of the <script src="/static/js/bootstrap.min.js"/> tag like this:
...
<script src="/static/js/bootstrap.min.js">
<script src="/static/js/jobs/new.js">
...
From MDN <script> documentation:
Tag omission
None, both the starting and ending tag are mandatory.

Error while including jsp with angular inside non angular jsp

I included a jsp with angular directives (A.jsp) inside a non-angular jsp(B.jsp).
If I access A.jsp directly those models "{{X}} {{Y}}" are resolving correctly to
Xvalue Yvalue
But if I access A.jsp through B.jsp I am seeing unresolved ng-model s.
{{X}} {{Y}}
What could be the reason?
My code:
Inside B.jsp
<div id="Bcontent" style="display:block;">
<jsp:include page="/jsp/superqueue/A.jsp"/>
</div>
A.jsp
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
</head>
<body ng-app="AApp">
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</body>
</html>
A.jsp
<div ng-app="AApp">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</div>
and add meta tags of A.jsp to B.jsp if not already there

Console states method not available but it seems like it should be

I've got a rails app and I'm trying to add a thumbnail scroller. It prints the div, but the js is not working. Here's the file:
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<% #illustrations.each do |illustration| %>
<% if illustration.aws_image_thumbnail_url %>
<%= link_to image_tag(illustration.aws_image_thumbnail_url, :title => illustration.name), illustration %>
<% else %>
<%= link_to image_tag(illustration.image.url(:thumb), :title => illustration.name), illustration %>
<% end %>
<% end %>
</div>
</div>
</div>
<script>
jQuery.noConflict();
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
Here's the error in the console:
Uncaught TypeError: Object [object Object] has no method 'thumbnailScroller' 138:168
window.onload 138:168
window.onload
Here's the thumbnailScroller method within jquery.thumbnailScroller.js:
(function($){
$.fn.thumbnailScroller=function(options){
var defaults={ //default options
scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
scrollEasing:"easeOutCirc", //easing type
scrollEasingAmount:800, //value: milliseconds
acceleration:2, //value: integer
scrollSpeed:600, //value: milliseconds
noScrollCenterSpace:0, //value: pixels
autoScrolling:0, //value: integer
autoScrollingSpeed:8000, //value: milliseconds
autoScrollingEasing:"easeInOutQuad", //easing type
autoScrollingDelay:2500 //value: milliseconds
};
And here you can see that that js file is being loaded in to the rails app (output from chrome developmnet tools 'resources' tab:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="https://s3-us-west-2.amazonaws.com/haggard/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<title>Visual Haggard</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/archive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/blog_posts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/booklist.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/comments.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/contact_forms.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/editions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/illustrations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.10.3.custom/css/no-theme/jquery-ui-1.10.3.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.thumbnailscroller.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/novels.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/archive.js?body=1" type="text/javascript"></script>
<script src="/assets/blog_posts.js?body=1" type="text/javascript"></script>
<script src="/assets/booklist.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/comments.js?body=1" type="text/javascript"></script>
<script src="/assets/contact_forms.js?body=1" type="text/javascript"></script>
<script src="/assets/editions.js?body=1" type="text/javascript"></script>
<script src="/assets/illustrations.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.13.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.thumbnailScroller.js?body=1" type="text/javascript"></script>
<script src="/assets/novels.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="IlafOuTVut9RwVQZwQrI4JpuieQp2lHla7HxIiCI2e0=" name="csrf-token" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Does anyone see why this method is not available?
Ok, I have tried use Thumbnail scroller jQuery plugin on my training apps and success.
First, remove jquery-ui-1.8.13.custom.min.jsfrom your apps,
Make sure this gem on your gemfile
gem 'jquery-rails'
gem 'jquery-ui-rails'
Remove Gemfile.lock and run bundle install
Make sure on application.js lookslike :
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
Try this for method jquery thumbnail, Put this between head tag
<script type="text/javascript">
$(function () {
$("#tS2").thumbnailScroller({
scrollerType:"hoverPrecise",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
});</script>

Categories