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.
Related
I have developed this web-based application on a wamp server and it runs ok, and now I started creating a desktop application using electron from last week and I keep on getting this error. But I can login and it works fine, except for the errors I get. Guys, please help me out on this one, this is my first-week using electron.
Below are all the links and scripts loaded
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- Morris chart -->
<link rel="stylesheet" href="bower_components/morris.js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
For footer
<!-- jQuery 3 -->
<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
<script>window.$ = window.jQuery = require('./bower_components/jquery/dist/jquery.min.js');</script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<!-- Select2 -->
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- jQuery 3 -->
<!-- AdminLTE App -->
<!-- FLOT CHARTS -->
<script src="bower_components/Flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="bower_components/Flot/jquery.flot.resize.js"></script>
<!-- Page script -->
Try including JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I am using gulp usemin task to combine and minimize/uglify the css and js files in my HTML.
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
And my blocks in HTML:
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/home.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts/home.js"></script>
<script src="scripts/controllers.js"></script>
<!-- endbuild -->
But after I have done this. in the dist/, all other parts work well as they are in app/ but jquery-ui.js. The color animation in my page doesn't work, which is due to jquery-ui.
file structure:
file structure
How could this be? Only one js file doesn't work, but others works fine?
I find it out by myself.
I need to add the jquery-ui css file for color animation into HTML like this:
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
<link href="styles/home.css" rel="stylesheet">
<link href="styles/timeline.css" rel="stylesheet">
<!-- endbuild -->
But I am still not so sure why I can use jquery-ui without any problems before I minimize the CSS files.
First of all, thanks for your time looking at my problem!
Seccond, I have seen other questions like mine (for example:
Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs), but they didn't awnser my question.
So, here is the <head> of my <html>
<!DOCTYPE html>
<!-- metadata -->
<meta charset="UTF-8">
<!-- responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- [/] responsive -->
<!-- [/] metadata -->
<!-- links -->
<!-- bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- [/] bootstrap -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- [/] links -->
<!-- script -->
<!--<script src="js/action.js"></script>-->
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
<!-- [/] script -->
<title>standaard html</title>
</head>
<body>
<!-- hoofdnavigatie -->
<nav class="navbar navbar-default navbar-fixed-top bas_hoofdnav">
<!-- logo in menubalk -->
<a class="navbar-brand" href="#">
<img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >
</a>
<!-- [/] logo in menubalk -->
<ul class="nav nav-pills navbar-right bas_hoofdnav_knoppen">
<li role="presentation" class="active bas_hoofdnav_knp_actief">start</li>
<li role="presentation">over ons</li>
<li role="presentation">diensten</li>
<li role="presentation">winkel</li>
<li role="presentation">contact</li>
</ul>
</nav>
<!-- [/] hoofdnavigatie -->
</body>
as you can see I have included jquery and the bootstrap links. but even so... I get this error message:
Uncaught Error: Bootstrap's JavaScript requires jQuery
(anonymous function) # bootstrap.min.js:6
and here the error
Do I miss something here?
As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You need to put jQuery above the Bootstrap JS.
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
After sure you included jquery library and bootstrap using these commands?:
First, install jQuery using npm as follows:
npm install jquery --save
Second, install Bootstrap using npm as follows:
npm install --save bootstrap#3
My problem was in :
angular.json just change sorting for scripts files included under project .
"scripts": [
"node_modules/jquery/dist/jquery.js"
"node_modules/bootstrap/dist/js/bootstrap.js",
]
to be like this :
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/jquery/dist/jquery.js"
]
Following is the sample usemin build configuration in my index.html file
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
For development version, I dont want to minify the scripts and i want each module into its own js file. So the index.html after running would be
<script src="js/one.js"></script>
<script src="js/two.js"></script>
For production version,I want to minify the scripts and concat them into a single file.So the index.html would be
<script src="js/myApp.js"></script>
I tried the following , but it is not working:
<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->
And run the use-min task like this (prod would be set to true in the prod task and false in dev task) -
usemin({
myApp: prod?[uglify({mangle:true})]:'',
js: prod?'':[uglify({mangle:false})]
}).
I can keep two index.html files and manage this.But I was wondering can this be achieved with a single index.html?
Thanks in advance for any help.
It looks like you're using the same pipeline id: js
<!-- build:js js/one.js -->
<!-- build:js js/two.js -->
Try using unique pipeline ids like so:
<!-- build:js1 js/one.js -->
<!-- build:js2 js/two.js -->
What about this? Merge all javascript files in 2 files like in your dev env. After that just merge those two files into one big?
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- build:myApp js/myApp.js -->
<script src="js/one.js"></script>
<script src="js/two.js"></script>
<!-- endbuild -->
Or even marge all files with one build?
<!-- build:myApp js/myApp.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
As the title of this post says, since I added the fancybox's sources to my file, other js functions doesn't work anymore. If i switch the position of js source files and put mine after fancybox's js source files, my js functions work but the fancybox no, in the other hand, the fancybox work but my js functions don't.
Here is the header of my file:
<head>
<link rel="shortcut icon" type="image/x-icon" href="imagens/its.png">
<link href="css/mystyle.css" rel="stylesheet" type="text/css"> <!-- MY CSS -->
<link href="http://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- FANCY BOX SOURCES -->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- FANCY BOX SOURCES -->
<script src="js/myjs.js"></script> <!-- MY JS SOURCE FILE -->
I think that src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" is what's doing some conflict..
What can I do ?
You're importing a very old version of jQuery for your own code http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js, but then importing the latest version for Fancybox http://code.jquery.com/jquery-latest.min.js
Many things in the jQuery library have evolved since 1.3 was released almost 5 years ago, and several old APIs no longer work. The ideal thing to do would be to modernize your own code, and then just import jQuery once (a new or new-ish version).
Start by checking the error console to find out what's breaking.