Bootstrap 4 jquery not working rails 5 - javascript

I downloaded the bootstrap 4 theme from this website: https://www.bootstrapzero.com/bootstrap-template/whats-new-in-bootstrap-4-theme
and copied the html and css files into the appropriate places in my rails application, which worked perfectly. However, when incorporating the javascript code, which contains jquery, it does not work.
I tested it out with javascript only and that worked - but it seems that there is an issue with the jquery part. This is what the jquery looks like:
(function($) {
"use strict";
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 60
});
$('a.page-scroll').bind('click', function(event) {
var $ele = $(this);
$('html, body').stop().animate({
scrollTop: ($($ele.attr('href')).offset().top - 60)
}, 1450, 'easeInOutExpo');
event.preventDefault();
});
$('#collapsingNavbar li a').click(function() {
/* always close responsive nav after click */
$('.navbar-toggler:visible').click();
});
$('#galleryModal').on('show.bs.modal', function (e) {
$('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
});
})(jQuery);
Any ideas as to why it might not be working and how I can fix it?
EDIT: I changed the file to look like the following:
$( document ).on('page:change', function() {
"use strict";
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 60
});
$('a.page-scroll').on('click', function(event) {
var $ele = $(this);
$('html, body').stop().animate({
scrollTop: ($($ele.attr('href')).offset().top - 60)
}, 1450, 'easeInOutExpo');
event.preventDefault();
});
$('#collapsingNavbar li a').click(function() {
/* always close responsive nav after click */
$('.navbar-toggler:visible').click();
});
$('#galleryModal').on('show.bs.modal', function (e) {
$('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
});
})
None of the JQuery is working. I also tried using an example from a video (https://www.youtube.com/watch?v=K-sns5tNdTY) and it also didn't work.

Related

How Do I Use Scrollspy when I have links on the page and off the page?

I have an application with a landing page that has many sections, and use Scrollspy for the smooth scrolling effect in the page. At the end of my navigation items I have a call to action button that takes the user to another page. However, because it's in my navigation items, when the page loads, Scrollspy is throwing an error on the link to another page.
Uncaught Error: Syntax error, unrecognized expression: https://example.com/page2
Is there anything I can do to tell scrollspy to ignore that link or is there some other way to get rid of that error? Thanks!
Here is the code I am using to initialize scrollspy:
(function ($) {
'use strict';
// SmoothLink
function initSmoothLink() {
$('.nav-item a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
}
// StickyMenu
function initStickyMenu() {
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".sticky").addClass("stickyadd");
} else {
$(".sticky").removeClass("stickyadd");
}
});
}
// Scrollspy
function initScrollspy() {
$("#navbarCollapse").scrollspy({
offset: 70
});
}
//MFPVideo
function initMFPVideo() {
$('.video_play').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
// Back To Top
function initBackToTop() {
$(window).on('scroll',function(){
if ($(this).scrollTop() > 100) {
$('.back_top').fadeIn();
} else {
$('.back_top').fadeOut();
}
});
$('.back_top, .footer_logo_link').on('click',function(){
$("html, body").animate({ scrollTop: 0 }, 1000);
return false;
});
}
function init() {
initSmoothLink();
initStickyMenu();
initScrollspy();
initMFPVideo();
initBackToTop();
}
$(document).on('turbolinks:load', function(){
init();
});
})(jQuery);
You can add in if statement to check if the href has a hash. If it doesn't have one, then it will just proceed as normal.
function initSmoothLink() {
$('.nav-item a').on('click', function(event) {
var $anchor = $(this);
if (this.hash !== "") {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
}
});
}
Scrollspy looks for all a tags in given container, takes href attribute and uses it's value as jQuery selector. Here is the possible solution using JS:
Page 2
Setting href and id is required in your case if you don't want to add additional checks in initSmoothLink() function.

Using two ScrollTop() functions in jQuery?

I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
Found the solution - I had to removed the second $(document).ready(function () { line of code.

Bootstrap scrolling navbar issues

The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});
here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});

What variables to use in jQuery easing animation

I'm using the grayscale bootstrap template for a wordpress theme. I have my scripts enqueued, but I'm not sure how to fix the syntax on the original javascript. The functionality works like this: click on a link and it slides you down to the id attribute.
Here is the original code:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
And I replace the $ with jQuery because of .NoConflict
jQuery(function() {
jQuery('.page-scroll a').bind('click', function(event) {
var $anchor = jQuery(this);
jQuery('html, body').stop().animate({
scrollTop: jQuery($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Then I get this error:
TypeError: 'undefined' is not a function (evaluating 'x.easing[this.easing] (e,this.options.duration*e,0,1,this.options.duration)')
The $anchor is local, so I'm sure it doesn't matter. Infact I've replced it also, but I get the same result. Any suggestions? Does the problem lie in this line var anchor = jQuery(this);?
It turns out I was loading the wrong library. I needed to load the easing library instead of the jQuery UI library.

Jquery effects .queue()

This is the site i'm working on: http://www.sircat.net/joomla/sircat/mies/calendari.html
When I click on any year column (2012, 2011, 2010, etc) it shows the content of each year and hide the other ones.
The problem it's that when I click (2011 column for example), the animation does all the effects at the same time confusing the user, I think I have to do it with animation steps, but I haven't been able to come to a jquery solution.
This is my code:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(this).next(".contenido_calendario").toggle('slow');
scrollto($(this).offset().left - 352)
});
I have tried fixing the effect by using .queue() but it doesn't work, I don't know if the code it's well written also:
$(".sub_section_title").click( function(e) {
e.preventDefault();
$(".contenido_calendario").hide();
$(".contenido_calendario").queue(function() {
scrollto($(this).offset().left - 352);
$(this).dequeue();
});
$(".contenido_calendario").queue(function() {
$(this).next(".contenido_calendario").toggle('slow')
$(this).dequeue();
});
});
Just use callback functions:
/* Scroll Function */
function scrollto(position){
$('html, body').stop().animate({
scrollLeft: position
}, 1000);
}
/* Calendar Scroll */
$(".sub_section_title").click( function(e) {
e.preventDefault();
var $this = $(this)
$(".contenido_calendario").hide(function(){
$this.next(".contenido_calendario").toggle('slow',function(){
scrollto($(this).offset().left - 352)
});
});
});

Categories

Resources