Site scrolling doesn't work with Chrome SmoothScroll - javascript

So a friend of mine asked me if I knew why one of his old sites (made in 2014) wasn't working anymore. Googling a bit, I found out it's because of Chrome 61 version implemented the smooth scroll by default and if u try to load a script instead, it will break the browser behaviour.
On his site, I found he's using this script: https://github.com/themicon/smoothscroll/blob/master/smoothscroll.js
He has a menu with some buttons, each of them has a line of code that looks like this:
ABOUT US
And it should bring to a line of code that looks like this:
<section id="about">
<div class="container">
<div class="row">
</div>
</div>
</section>
The site still works perfectly with Firefox and other browser, so I don't know honestly would I would need to change, I tryed to search for an updated version of the script where maybe the author fixed the issue and found this:
https://github.com/galambalazs/smoothscroll-for-websites/blob/master/SmoothScroll.js
As you notice, the script hasn't been updated for quite long time, indeed even the latest version is prior to the Chrome 61 version update so I doubt that would solve the problem.
On the very end of site, these are the scripts loaded:
<!-- Bootstrap -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Animation -->
<script type="text/javascript" src="js/animation/jquery.appear.js"></script>
<!-- AJAX Contact Form -->
<script type="text/javascript" src="js/contact/contact-form.js"></script>
<!-- Lightbox -->
<script src="lightbox/ekko-lightbox.js"></script>
<!-- Isotope -->
<script src="js/isotope/jquery.isotope.min.js"></script>
<script src="js/isotope/custom-isotope.js"></script>
<!-- Slider Revolution 4.x Scripts -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script>
var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
fullScreen:"on",
forceFullWidth:"on",
minFullScreenHeight:"320",
videoJsPath:"rs-plugin/videojs/"
});
}); //ready
</script>
<!-- Custom -->
<script src="js/custom.js"></script>
<!-- Parallex -->
<script src="js/parallex/script.js"></script>
<!-- ScrollTo -->
<script src="js/nav/jquery.scrollTo.js"></script>
<script src="js/nav/jquery.nav.js"></script>
<!-- Sticky -->
<script type="text/javascript" src="js/sticky/jquery.sticky.js"></script>
<!-- Donut Chart -->
<script type="text/javascript" src="js/progress-bars/jquery.donutchart.js"></script>
<script>
$("#donutchart1").donutchart("animate");
$("#donutchart2").donutchart("animate");
$("#donutchart3").donutchart("animate");
$("#donutchart4").donutchart("animate");
$("#donutchart5").donutchart("animate");
$("#donutchart6").donutchart("animate");
$("#donutchart7").donutchart("animate");
$("#donutchart8").donutchart("animate");
</script>
<!-- Owl Carousel -->
<script src="owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- SmoothScroll -->
<script type="text/javascript" src="js/SmoothScroll/SmoothScroll.js"></script>
<!-- Retina -->
<script type="text/javascript" src="js/retina/retina.js"></script>
<!-- FitVids -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>

Related

Zurb Foundation 6 - Orbit don't work

I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.

Uncaught TypeError: carouselWithDescription.caroufredsel is not a function

This is how my scripts in homepage look like . But i keep getting the error Uncaught TypeError: carouselWithDescription.caroufredsel is not a function
<script type="text/javascript">
$("#DownloadApp").click(function () {
fbq('track', 'Lead');
});
</script>
<!-- Bootstrap Libraries -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/bootstrap/js/bootstrap.js"></script>
<!-- Masonry Library -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/vendors/isotope/imagesloaded.pkgd.min.js"></script>
<!-- Revolution Slider jQuery-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
<!-- Quote Rotator jQuery-->
<script src="~/Content/NewHomePage/vendors/quote-rotator/js/jquery.quoterotator.min.js" type="text/javascript"></script>
<!-- Inview Plugin-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/inview/jquery.inview.js"></script>
<!-- Magnific Popup Plugin -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- CarouFredSel Plugin-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/carouFredSel-6.2.1/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/plugins.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/main.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/custom.js"></script>
<!-- Options Panel Scripts-->
<script type="text/javascript" src="~/Content/NewHomePage/scripts/_sample.js"></script>
Issue was due to multiple times listing of jquery . The page was referring master layout which was interupting the loading of some files.Removde the refference now it works fine.

Google PageSpeed Insight CSS Javascript "above the fold" issue using CDN

I tried to implement CDN resources with local fallback support for my webpage.
But now I can't get rid of render-blocking JavaScript and CSS CDN resources for jquery and Bootstrap in the "above-the-fold" content.
I tried to stick to Googles Guidelines but it didn't resolve my problem:
Remove Render-Blocking JavaScript
Optimize CSS Delivery
<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script>
window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback -->
<div id="bootstrapCssTest " class="hide "></div>
<script>
$(document).ready(function() {
if ($('#bootstrapCssTest').is(':visible') === true) {
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
}
});
</script>
</body>
</html>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
UPDATE: I tried to use the "async/defer" attribute for loading my .js CDN scripts. But it didn't work as my local fallback script gives me "Uncaught ReferenceError: $ is not defined" error because they are executed before jquery async loading had been finished.
Using jQuery library include footer section and below custom code start jquery code
40% CSS code in above-the-fold content (head section using internal stylesheet ) <style type="text/css">...</style>
<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<div id="bootstrapCssTest" class="hide"></div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script src="../scripts/jquery-2.2.2.min.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Bootstrap JS local fallback -->
<script src="../scripts/bootstrap.min.js"></script>
<!-- Bootstrap CSS local fallback -->
<script>
$(document).ready(function() {
if ($('#bootstrapCssTest').is(':visible') === true) {
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
}
});
</script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
</body>
</html>

Javascript / jquery files conflicting with each other

I am using a theme which references 4 javascript/jquery files and I am using a slider image which is referencing 3 javascript/jquery files. However, they are conflicting with each other.
What files are conflicting with each other and how can I fix this issue?
Thanks
<!-- Code for theme -->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script src="js/main.js"></script>
1) .min is just minified version of file.
2) don't use both.
3) either use .min or normal jquery library.
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/libs/modernizr-2.6.2.min.js"></script>
You don't need to add these:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
Because you are loading jQuery1.10+ above all other scripts, so why do you need to add jQuery.min.js and jQuery.1.9.0.
As this code comment says:
<!-- Code for theme -->
For a theme you don't need multiple jQuery libs to be loaded in a single page.
I'm not sure but have you tried $.noConflict() ?

Bootstrap JS Error

For some reason with my code for a progress bar it won't show the colour. For instance if I put the class as "bar background-purple" it will make it a bar but not give it the class purple also. If I take out the bar part it will be purple and if I take out the background-purple part it stays the same. I will attach the code and a screenshot.
Using Bootstrap 3.
Btw this is the same code I have from a different page on my website where it does show colour. Any ideas?
<div class="skill-container span8">
<div class="row-fluid">
<!-- BEGIN FIRST SKILL -->
<div class="latest-skill first-skill skill-widget span6">
<h4><i class="icon-bookmark"></i> Progress </h4>
<div class="progress">
<div class="bar background-purple" data-score="85">
<span class="skill-title">HTML</span>
<span class="title-score"></span>
</div>
</div><!-- .progress -->
</div><!-- .progress -->
</div><!-- .latest-skill .skill-widget -->
</div><!-- row fluid -->
</div><!-- .skill-container -->
</div><!-- .big-element -->
</div><!-- .about .row -->
To make sure I didn't attach the CSS files wrongly, I copied and pasted the header from my other document.
http://gyazo.com/e8c19bd43f5e3b99f26d7a1b06a1d4ef.png
There must be another thing wrong with the CSS because the icons at the bottom of the page aren't centered and that code is copied from my other working page too.
If you need a snippet of the header, etc.. just let me know! Thanks!
Update!!
Error Google Chrome gives me!
GET http://localhost/js/jquery.min.map 404 (Not Found) public.php:15
Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:29
The scripts I have included:
<script type='text/javascript' src='js/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='js/jquery.isotope.js'></script>
<script type="text/javascript" src="js/jquery.isotope-function.js"></script>
<script type='text/javascript' src='js/modernizr.js'></script>
<script type='text/javascript' src='js/jquery.animateNumbers.js'></script>
<script type='text/javascript' src='js/jquery.flexslider-min.js'></script>
<script type="text/javascript" src="js/jquery.hoverflow.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/sendmail.js"></script>
<script type="text/javascript" src="js/welcome.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/maps.js"></script>

Categories