I'm having some issues with my website. It runs and renders just fine, but I get the blocked scripts icon at the top right of the address bar. I don't want users to see this pop up when visiting the site. I can press "load unsafe scripts", which will make it go away but then my site is no longer https. I've tried rearranging the lines and tried other things as well in my html but I can't seem to find a solution.
The site uses bootstrap as well as 2 of my own CSS files and 1 JavaScript file.
Below is HTML head tag. And below that are the errors that Chrome is showing. Does anyone understand why this is happening?
<head>
<meta charset="utf-8">
<meta name="keywords" content="NASA,JPL,near,earth,objects,asteroid,meteor,neo,neowise,api,opendata">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearing Earth</title>
<!-- Lines necessary for Bootstrap-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--My files-->
<link rel="stylesheet" href="neoRules.css">
<link rel="stylesheet" src="neoStyles.css">
<link rel="icon" type="image/ico" href="favicon.ico"/>
<script src="https://nearingearth.com/neoFunctions.js" type="text/JavaScript"></script>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js" type="text/javascript"></script>
<script src="/js/respond.min.js" type="text/javascript"></script>
<![endif]-->
</head>
Error 1:
Mixed Content: The page at 'https://nearingearth.com/' was loaded over
HTTPS, but requested an insecure script
'http://code.jquery.com/jquery-latest.min.js'. This request has been
blocked; the content must be served over HTTPS.
Error 2:
Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
neoFunctions.js is loading jquery without SSL. It's nothing to do with your HTML. I'd maybe recommend downloading neoFunctions.js and modifying the script to replace instances of http:// with https:// and host it on your own server.
Related
I have a modal for preview before submitting which works properly with any of my browsers that are connected with the internet. However, my modal is not displaying on the computers which have no access to certain websites. I tried checking the browser's versions. I've also downloaded every bootstrap and jquery script and included in my file but still doesn't work.
Here's what I've included in my code
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script src="jquery-3.4..min.js"></script>
Here's the exact code I used and for reference
Display form input in Bootstrap MODAL
You have used cdn which will require internet access while the page loads to download scripts and css.
In case you want to use it without internet download bootstrap and place it in your directory & use it.
So we are currently building a client side CEF login for a game server. It works but we still keep getting this annoying error on launch client side:
"Bootstrap's javascript requires jquery. jquery must be included
before bootstrap's javascript"
I have checked everywhere and everything seems to be in the correct order though I'm likely very wrong! Here is the order we have it in the head tag:
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tether.min.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
Thanks for your help so far!
Have you tried using the google or microsoft CDN? I would check
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It doesn't hurt to try and see if that works!
I am developing my first web app for learning purposes. It consists on a calendar wher you can add tasks, edit, and remove them asynchronously. Simple.
Everything seemed to work fine but once I uploaded it to my hosting, one friend reported me he can´t see the calendar, only the header and the footer... he says it happens on all browsers, but that on the smartphone it works fine... I checked myself and I can see it fine on all my browsers (that´s why I have not noticed), but happens the same bug on smartphone! It is just the same problem my friend had, but on the opposite device.
I contacted the hosting, and changed the PHP version to the most similar I had on the XAMPP I used to develop it... (5.6.32 on xampp and 5.6.35 on the hosting), but the problem still goes on.
I also tried to update bootstrap version. Calendar is done with bootstrap, JS (with some ES6 features like importing-exporting modules) and jquery returning data through PHP from a database... nothing special.
Do you know what could be happening? To see the calendar you must be logged.
If you want to log and see it, use these fake credentials:
email: test#gmail.com
pass: 12345678
and this is the link
http://myreminder.avanzartewebs.com/
I will put the head tag of the problematic file to see if it can give you a hint
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous" defer></script>
<link rel="stylesheet" type="text/css" href="../assets/css/styles.css">
<script src="getAndPrintDate.js" defer></script>
<!--<script src="assets/js/crearCalendario.js" defer></script>-->
<script src="view_crearAnioCompleto.js" type="module"></script>
<!--<script src="assets/js/buildList.js" defer></script>-->
<!--the scripts with type=module (which work with modules using the imports) are defer by default-->
<script src="../controls/clickOnCell.js" type ="module" ></script>
<script src="../controls/taskSubmit.js" type ="module" ></script>
<script src="../controls/listButtonsClick.js" defer ></script>
<script src="../controls/editTaskSubmit.js" type="module" ></script>
<script src="../assets/js/fontawesome-all.js" defer ></script>
</head>
Try downloading those instead of having them linked from their site and try that. My the host is blocking it. Thats something i would try just to see.
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous" defer></script>
I'm building a basic front-end website in HTML and CSS. It consists of multiple web pages, each sharing the same JS and CSS files. My <head> tag therefore contains about 45 lines of code. I'm just wondering if this is "best practice?" Is there a way to have one file with all the shared links to various stylesheets and scripts so that I can reduce the 45 lined header tags in all of my pages to maybe just 3 or 4.
Also, if I have to change my custom CSS location or add a new custom JS file, then that means adding to each of my webpages. This becomes cumbersome and I'd just like to know if there's anything that can be done about it. I might end up with a dozen or so pages when I'm done so that sounds like a lot of unnecessary code.
Thanks!
EDIT:
My code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons generated using realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap Core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="lib/device-mockups/device-mockups.min.css">
<!-- Theme CSS -->
<link href="css/new-age.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/new-age.min.js"></script>
That is a lot of code to have in each of my dozen or so web pages. Is there a way to avoid this?
For example if your file name is index.html rename it to index.php and then cut your head section and create a new file named head.php and do like for footer also.for the new pages you create just include these references like below
<!DOCTYPE hml>
<html>
<?php include 'head.php' ?>
<body>
<?php include 'footer.php' ?>
</body>
</html>
The short answer is that every page that you send to the browser must contain the full <head> and so you must include it.
The longer answer is that there are several ways to avoid having to copy paste all the content every time. For instance, if you have a php server you could have a separate head.html file that contains your head and you would include in every page like this:
<?php include('head.html'); ?>
Or, if you're using a web framework like express.js, Flask or Symfony (just to name a few, there are many more) you would have templates where you can extend one base. You would define one base template and all other templates are based off that template, allowing you to avoid duplicate code.
If you're not using a webserver at all, you could introduce a build pipeline like Gulp for instance. Gulp can take all your html files and optimise / manipulate them before you deploy them. You could inject all the head contents using a plugin gulp-inject-html for example.
Hope this provides you with plenty of options to decide how you'd like to proceed :)
You can create a new file and past all the head codes in it. Save as either .php or .html. e.g saved in filePath/headings.html;
inside the main page which must be a php file, do this:
<?php include('filePath/headings.html');?>
OR USE
<?php require_once('filePath/headings.html')?>
include is built in function allows you add a file to the page, and if the file is not found it will show some warnings and continue is execution WHILE require or require_once will throw an error and halt code execution if the file is not found.
You can also use
<?php require('filePath/headings.html')?>
You can have this in any part of your code, e.g sidebar, header, navigation, etc.
Please don't save your include or require file name as header.php, instead use heading.php or head.php
I hope this help
Since your using a lot of external libraries for your page adding another one will not hurt. This is straight from W3school, here
header.html (Content)
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
</head>
<body>
Content.html (Content)
<h1>Header1</h1>
footer.html (Content)
</body>
</html>
Then on index.html (content)
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<div w3-include-html="content.html"></div>
<div w3-include-html="footer.html"></div>
<script>
w3.includeHTML();
</script>
This is just only using HTML and JavaScript the most effective way is using a server side language like PHP.
I see you are using jQuery:
So this would help you:
$(document).ready(function() {
$('head').load('pathToCommonCode/head.html');
});
place all your redundant code in head.html and provide the path to it.
For example head.html would contain the following:
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
Note: This method will work with files in the same domain.
As mentioned in comments:
From documentation:
Due to browser security restrictions, most "Ajax" requests are
subject to the same origin policy; the request can not successfully
retrieve data from a different domain, subdomain, port, or protocol.
I am working on a personal project with Bootstrap 3, but when I add things like modals/dropdowns, they don't work. I have looked at the code and it is all fine, so I am assuming that it is an issue with the linking of the files.
Header links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer links:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I also have the modal which is an exact copy from the Bootstrap website and all of the code for that is correct.
Do i have to delete all of the other local CSS/JS files or something?
The HTML for he site can be found here.
As far as I can see you have not loaded the jQuery-Library. As indicated on Bootstrap's page, you need jQuery for any Javascript-Component of Bootstrap, see here
Make sure to load it before the Bootstrap Javascript, like this:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Then you should be all set up.
Looking at the HTML i could see that it is missing jquery library path. Please include it at the top before any other JS files in your HTML
You are not included jquery in your code, just include jquery.js before bootstrap.min.js
<!-- Core javascript and icons -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>