So I have a webpage, and I have all of the js scripts in the footer of the webpage, yet it is not letting me use the js functions of bootstrap, like using drop downs. The
Can anyone help?
I can't put the code here because of the character limit, but here is a paste bin:
http://pastebin.com/fzy6e5CZ
I find that linking to scripts makes your page relatively slow. I would try using a CDN, here is the code to include the min. versions of those scripts through the CloudFlare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.3/holder.min.js"></script>
Use the following for Bootstrap CSS
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css">
I think you should update your jQuery and bootstrap .js file and check your file adding path is right. Your file destination exactly there where you trigger it?
Related
I'm currently making a form for uploading new members to a web page. I built the form using JotForm which includes js files for controlling the style (hide/show fields, fields that are required turn red, etc.)
The js for this form worked fine on its own, but I also included a picture crop/upload as an extra. This also worked when I was testing it in a separate web page on its own, but now combined with the form, the js conflicts and I don't know how to stop that.
My script head section looks like this:
<!-- Jotform js -->
<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10027" type="text/javascript"></script>
<script type="text/javascript">
JotForm.setConditions([{"action":[{"id":"action_0_1448505712729","visibility":"Show","isError":false,"field":"77"}],"id":"1448505521328","index":"0","link":"Any","priority":"0","terms":[{"id":"term_2_1448505712729","field":"68","operator":"equals","value":"Librarian","isError":false},{"id":"term_1448505745204","field":"68","operator":"equals","value":"Social Sec.","isError":false},{"id":"term_1448505752197","field":"68","operator":"equals","value":"Press & Publicity","isError":false},{"id":"term_1448505759596","field":"68","operator":"equals","value":"Webmaster","isError":false},{"id":"term_1448505768860","field":"68","operator":"equals","value":"Tour Manager","isError":false},{"id":"term_1448505778873","field":"68","operator":"equals","value":"Merch Rep.","isError":false},{"id":"term_1448505785856","field":"68","operator":"equals","value":"Ordinary Member","isError":false}],"type":"field"}]);
JotForm.init(function(){
setTimeout(function() {
$('input_76').hint('e.g. 1st, 2nd, 3rd');
}, 20);
JotForm.clearFieldOnHide="disable";
JotForm.onSubmissionError="jumpToSubmit";
});
</script>
<!-- Image cropper js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.cropit.js"></script>
<script src="js/index.js"></script>
Because the prototype.forms.js and jotform.forms.js appear first, they seem to work whilst the image cropper does not.
If I put the image cropper files first, the reverse happens and the image cropper works but the other javascript doesn't.
Having read up on this a lot of people talk about this being jQuery conflicts, but I'm not entirely sure what the problem/solution is. All I want is for both features to work simultaneously.
All help appreciated, thanks.
Source (image cropper working only): http://concert-band.co.uk/new/Forms/index2.php
Source (form validation working only): http://concert-band.co.uk/new/Forms/index3.php
Slightly my fault as I realised that there was no conflict with the index.js or jquery.cropit.js, it was actually some embedded jquery at the bottom of my <body> I had forgotten was there. I've now implemented jQuery.noConflict() the normal way and it works fine. Thanks for your help.
Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?
Typically stylesheets in the head and scripts before the closing </body> tag:
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS
Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
You can decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
Style css need to present in top <Head> to access in page.
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CDN (or others, like cloudflare - for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
Advanced techniques imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.
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.
I'm very new to the HTML5 world and I could use some help with how to use this javascript file.
jquery.autoanchors-0.3
It is found here. http://fredibach.ch/jquery-plugins/autoanchors.php
How do I do use this? How can I include this in the html file in the and the js file how will it automatically add the anchors/links to the html file?
<script src="js/jquery.autoanchors-0.3.js"></script>
Any help would be great.
Thanks
damon
as sachleen points out you'll need jQuery first.
Download jQuery (http://jquery.com/download/)
Include both jQuery and autoanchors into the head of your html file
Follow the instructions on the autoanchors page (http://fredibach.ch/jquery-plugins/autoanchors.php#usage)
Add this to the head section of your webpage, which will add jQuery to your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /></script>
Download the Autoanchors.js file and add it to your site (put it in a folder named js):
<script type="text/javascript" src="js/jquery.autoanchors-0.3.js"></script>
Then follow the instructions on that site under "usage" which would look like this (this goes in the head, right under the line above):
<script>
$(document).ready(function(){
$("div.demo").autoAnchors();
});
</script>