Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.
Related
So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#
I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!
You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH
You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)
When I link to foundation.js and foundation.offcanvas.js separately i stead of using the minified, combined version the off canvas menu is not working.
Do I have to call the offcanvas additionally to $().foundation(); ?
You only need to call the foundation() method once after all the Foundation scripts have been loaded.
Taken from their docs:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
If Foundation's Off Canvas still isn't working, it's more likely due to the markup being slightly incorrect than the JS being weird. Make sure you follow the examples exactly.
Sample code
<div class='credit'>
Copy blabla
</div>
in the code above I will add content and links
$(document).ready(function(){
$('.credit').append(' credit by blabladot');
});
but I tried and did not work, how the code is correct?
You need to make sure you add the latest version of jQuery library in your HTML's <head></head> section as follow:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Also, make sure that other jQuery files or scripts are included after the above link.
Working fiddle Demo
You have forgotten to include jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Working jsFiddle here.
If you are using it in a blogger template, check this. I would recommend you to take a look in your developer console (in chrome) or firebug (in firefox) for any javascript errors and mention them in the question.
Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.