For some reason depending on where i put this import statement for my script, it may or may not be detected. I cant figure out why though. The image below shows a script that for some reason is not being detected.
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="sendmessage.js"></script>
The first script tag is being closed incorrectly:
You are doing:
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"/>
You should be using:
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"></script>
Related
I tried to use Bootstrap 4.5 with the CDN that they have on their main page, however, after I inserted all the lines of code into my project I have a lot of issues with my custom css and the bootstrap carousel doesn't work. When I look at the inspector I see the following message:
The CDN codes that i used are the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
The "link" before the other links like Google Fonts, my custom css and fontawesome, and the scripts before the final body tab, so I don´t know, THANKS!
Sorry for my english, i don´t speak this language
Your cdn links are from an older version - 4.4.1, not - 4.5.0.
Here are the correct links:
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
https://getbootstrap.com/
I'm trying to initialize this plugin in different ways, inside my HTML document, but it seems isn't working...
I attached a picture of the Usage documentation, and this is the link of the plugin: https://unpkg.com/darkreader.
I'm using javascript for that, and not typeScript.
enter image description here
Here you haven't mentioned how you're including plugin in HTML document, So try to add jquery first and after that include this script like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>
</script>
<script src="/scripts/darkreader.js"></script>
</head>
<body>
</body>
</html>
This is the end of my HTML file:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Google LogIn Client -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- DarkReader Dark theme plugin -->
<script src="https://unpkg.com/darkreader#4.7.15/darkreader.js"></script>
<script type="text/javascript">
import {
enable as enableDarkMode,
disable as disableDarkMode,
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
</script>
I tried to initialize the plugin, but still not working...
var result = document.getElementById("result")
//can't add bootstrap classes to <div> and <table>
<div class="container"><table class="table">
result.innerHTML = "<div><table><thead><tr><td>Column A</td>
First of all in your code the outer div doesn't seem to have an id attached to it, call the div like:
<div id="result>
To add bootstrap to your html you have to first import the css file and put it in the head element of your html like:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
Then add the javascript, jquery, and popper.js file to the end of the body of the html:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Also make sure to add your javascript to the html using the script tag as seen above or put it b/w the script tags
<script>
some js
</script>
I am trying to add popovers to my fullcalendar within my codeignitor application, however, I keep getting the following error despite the mentioned library being clearly already included: Bootstrap tooltips require Popper.js.
Here is the order of my JavaScript libraries:
<!-- JS Libs -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/moment.js')?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/fullcalendar-3.9.0/fullcalendar.js')?>"></script>
Here is the relevant section from my calendar configuration
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
It seems that you forgot to close your first script correctly.
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.
For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.