Недавно я реализовал несколько вариантов поведения jQuery на своем личном сайте, и я также переместил весь свой JS в JS-файлы для конкретных страниц (ранее у меня был весь JS внизу каждой соответствующей страницы внутри тега скрипта ). Локально все работало нормально, но когда я запустил сайт, почти все анимации jQuery перестали работать. В основном это слайды, слайды и т. Д., И перед тем, как каждый элемент анимируется при прокрутке, я размещаю его вне экрана, поэтому теперь сайт выглядит пустым.
Я знаю, что этот вопрос задавался несколько раз, но ни один из предыдущих ответов не решил мою проблему. Я пробовал несколько комбинаций require rails_ujs, jquery, jquery_ujs и т. Д., Но не повезло. В настоящее время я получаю Справочную ошибку: $ не определен в консоли (не повезло с ответами S / O в этом поиске).
Есть мысли?
Вот ссылка на сайт вместе с файлом application.js, пользовательским файлом JS и заголовком HTML.
www.justincefai.co
файл application.js
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap-sprockets
пользовательский файл JS
$(document).ready(function() {
var $horizontal = $(".about-left");
$(window).scroll(function() {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c)) * 6;
var position = scrollPercent * ($(document).width() - $horizontal.width());
$horizontal.css({
right: "calc(82% - 150px + " + position + "px)"
});
});
});
$(document).ready(function() {
var $horizontalR = $(".about-right");
var $title = $(".about-top");
$(window).scroll(function() {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c)) * 6;
var position = scrollPercent * ($(document).width() - $horizontalR.width());
$horizontalR.css({
left: "calc(82% - 150px + " + position + "px)"
});
});
});
тег заголовка application.html.erb
<head>
<%= favicon_link_tag asset_path('favicon.png'), :rel => 'icon', :type => 'image/png' %>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Justin Cefai</title>
<meta name="description" content="Justin Cefai is a software engineer specializing in full-stack development. He has experience with Ruby, Rails, JavaScript, and building web applications.">
</head>