I just want to use external js files in my web application. I dont want to change more code. But after import I run my application and got following errors:
TypeError: Cannot read property 'fn' of undefined
at owl.carousel.min.js:1
at owl.carousel.min.js:1
Uncaught ReferenceError: $ is not defined
at theme-scripts.js:1
my HTML file just like this:
<html>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="src/app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="src/app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="src/app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="src/app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="src/app/components/landing-page/js/imageComparisonSlider.js"></script>
<script type="module" src="src/app/components/landing-page/js/bootstrap.min.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
</html>
external theme-script.js Files:
$(window).scroll(function () {
if ($(document).scrollTop() > 150) {
$('.navbar').addClass('navbar-shrink');
}
else {
$('.navbar').removeClass('navbar-shrink');
}
});
$(function () {
$('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;
}
}
});
});
// Owl carousel
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').on("click", function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function () {
$('.navbar-toggle:visible').click();
});
I don't know, wether is the right way to import external js? secondly, how can I use a funciton, which is from a external js file, in this example initComparisons() this function.
maybe someone has any ideas?
Best Regards,
Leo
