Я использую Smoothscroll.js (не используя GEM - см. Ссылку на код ниже) на моей странице приветствия, чтобы пользователи могли перейти к соответствующему разделу веб-страницы приветствия с помощью фиксированного Bootstrap Выбор меню Navbar. На отдельной странице я использую карусель Bootstrap, чтобы позволить пользователю просматривать и отдельные элементы портфеля (показать страницу).Конфликт между Smoothscroll.js и Bootstrap Carousel
Это позволяет пользователю щелкнуть по меню меню «Портфолио» на странице приветствия, чтобы сгладить прокрутку до раздела «Портфолио» на странице приветствия. Затем пользователь может щелкнуть по определенному пункту «Портфолио» на странице приветствия, и это приведет их на страницу показа этого конкретного элемента портфеля, где они смогут увидеть несколько изображений для этого элемента портфолио с помощью карусели Bootstrap.
Проблема заключается в том, что если я включаю логику Smoothscroll в область $(document).ready() в файл app/assets/javascripts/jet.js (см. Ниже), предыдущие/следующие элементы управления на карусели BootStrap на странице просмотра не реагирует на клики пользователей.
Если я отредактировал файл jet.js и поместил логику Smoothscroll за пределы области функции $(document).ready() и сохранил эти изменения, а затем загрузил мой сайт. Все работает отлично. Smoothscroll работает так, как ожидалось на странице приветствия, и предыдущие/предыдущие элементы управления отлично работают на странице показа портфолио. Я могу свободно перемещаться между двумя страницами (страница приветствия и портфолио), и все продолжает работать. Однако, если я перезагружу веб-страницу и попытаюсь выбрать выбор Navbar на странице приветствия, чтобы сгладить любой раздел на странице приветствия, я получаю ошибку маршрутизации (например, «Нет маршрутов» [GET] »/index.html).
FYI ... моя DEV среда:
- Rails 4.2.1
- Используя все последние версии JQuery (v2.1.3), Bootstrap (v3.3.5)
- Используя (Smoothscroll.js logic) см jet.js файл ниже
- Рубин v2.1.5
- Turbolinks отключен (удалены из Gemfile и удалены другие рефов)
Поэтому у меня есть два взаимосвязанных вопроса:
1) Любая идея, почему Smoothscroll.js, кажется, блокирует Prev/Next управления правильно работать, когда Smoothscroll входит в рамки $ (документ) .ready()?
2) Мне интересно, почему все работает нормально, когда я вношу изменения (т.е. размещаю логику smoothscroll.js вне области $ (document) .ready), а затем загружаю страницу с этими изменениями, но все же, когда Я перезагружаю веб-страницу во второй раз, когда получаю ошибку маршрутизации. Это похоже на то, что места с гладким скручиванием кэшируются при первой загрузке, но не через вторую нагрузку (как указано выше)?
Для справки здесь есть jet.js файл:
$(document).ready(function() {
// Pretty photo script
$("a[data-rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
social_tools: false,
hook: 'data-rel'
});
$(".truncateIt").dotdotdot({
// configuration goes here
/* The text to add as ellipsis. */
ellipsis : '... ',
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap : 'word',
/* Wrap-option fallback to 'letter' for long words */
fallbackToLetter: true,
/* jQuery-selector for the element to keep and put after the ellipsis. */
after : 'a.next',
/* Whether to update the ellipsis: true/'window' */
watch : false,
/* Optionally set a max-height, if null, the height will be measured. */
height : 60,
/* Deviation for the height-option. */
tolerance : 0,
/* Callback function that is fired after the ellipsis is added,
receives two parameters: isTruncated(boolean), orgContent(string). */
callback : function(isTruncated, orgContent) {},
lastCharacter : {
/* Remove these characters from the end of the truncated text. */
remove : [ ' ', ',', ';', '.', '!', '?' ],
/* Don't add an ellipsis if this array contains
the last character of the truncated text. */
noEllipsis : []
}
});
// WOW Reveals CSS animation as you scroll down a page.
// Link and activate WOW.js
new WOW().init();
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$('#carousel-generic-example').carousel({
interval:2000,
pause: "false"
});
$('#playButton').click(function() {
$('#carousel-generic-example').carousel('cycle');
});
$('#pauseButton').click(function() {
$('#carousel-generic-example').carousel('pause');
});
}); // /document.ready()
function scroll_to(clicked_link, nav_height) {
var element_class = clicked_link.attr('href').replace('#', '.');
var scroll_to = 0;
if(element_class != '.top-content') {
element_class += '-container';
scroll_to = $(element_class).offset().top - nav_height;
}
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 1000);
}
}
// Scroll location for buttons on banner page
$('a.scroll-link').on('click', function(e) {
e.preventDefault();
scroll_to($(this), $('nav').outerHeight());
});
// Smooth Scrolling for anchor links: http://www.billerickson.net/code/smooth-scrolling-anchor-links/
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
// }); // /document.ready()
$(".cnbox").each(function() {
var nheight = $(this).find(".nbox").height();
$(this).find(".cbox").css("height", nheight + 50);
});
var caroufredsel = function() {
$('#caroufredsel-portfolio-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#portfolio-prev',
next: '#portfolio-next',
auto: {
play: false
}
});
$('#caroufredsel-blog-posts-container').carouFredSel({
responsive: true,
scroll: 1,
circular: false,
infinite: false,
items: {
visible: {
min: 1,
max: 3
}
},
prev: '#blog-posts-prev',
next: '#blog-posts-next',
auto: {
play: false
}
});
};
// Isotope Portfolio
var $container = $('.portfolio-container');
var $blogcontainer = $('.posts-wrap');
var $filter = $('.portfolio-filter');
$(window).load(function() {
// Bootstrap Carousel -- Tried each of the following lines but neither of them helped
// jQuery('.carousel').carousel();
// jQuery('#carousel-generic-example').carousel();
caroufredsel();
// Initialize Isotope
$container.isotope({
itemSelector: '.portfolio-item-wrapper'
});
$blogcontainer.isotope({
itemSelector: '.article-wrap'
});
$('.portfolio-filter a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
$filter.find('a').click(function() {
$filter.find('a').parent().removeClass('active');
$(this).parent().addClass('active');
});
$(window).smartresize(function() {
$container.isotope('reLayout');
$blogcontainer.isotope('reLayout');
});
$(window).resize(function() {
caroufredsel();
});
});
FYI, вот мое приложение/активы/JavaScripts/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 any plugin's vendor/assets/javascripts directory 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
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .