I am currently trying to push my website from my computer to a remote server, everything works fine except a few Bootstrap components (carousel and cards) which are animated with JS.
The problem is that locally it works just fine, my divs show up and do their things as expected, but on the remote server its just a blank area.
I tried replacing the CDNs and playing with them but nothing has changed.
Does anybody encountered this issue before or knows how to fix it?
Here are the CDN links in my <head>:
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome -->
<script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script>
<!-- Bootstrap Scripts -->
<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>
I do see errors in my console every time the page loads I get:
GET coowoork.000webhostapp.com/js/index.js net::ERR_ABORTED 404
index.html:168
GET coowoork.000webhostapp.com/images/techcrunch.png 404 VM143:137 DomDistiller debug level: 0
GET coowoork.000webhostapp.com/images/techcrunch.png 404
Related
While adding bootstrap 5 in my HTML page it shows this error Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID. how to fix it?
i am adding these files.
for CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
for JS
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
The topic sums it up, I have an angular app that I start with ...
ng serve
and I build using ...
ng build
When I build the application, deploy it, and go to the debug console on the home page of the app and run
> window.innerWidth
1280
> window.innerHeight
610
Which seem to be correct according to https://www.rapidtables.com/web/tools/window-size.html.
When I go to the home page of the app deployed locally (using ng serve) and run the same commands i get incorrect window sizes ...
> window.innerWidth
1707
> window.innerHeight
813
What could be causing this? I would supply more code but I don't even know where to start with this issue.
for some context, here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RDF</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Bootstrap 4 Autocomplete -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-4-autocomplete/dist/bootstrap-4-autocomplete.min.js" crossorigin="anonymous"></script>
</head>
<body class="fill">
<app-root></app-root>
</body>
</html>
Appreciate the help!
I have restarted the system and updated the window OS.
Now it's showing correctly the viewport for ng serve and ng build.
I have included Bootstrap into my Scala/Play Project in Intellij.
But it is not rendering.
I included bootstrap.min.css, bootstrap.min.js and jquery-3.4.1.min.js.
Folder structure:
in public folder: Folder css with bootstrap.min.css and main.css; Folder images with favicon.img; Folder js with bootstrap.min.js, jquery-3.4.1.min.js and main.js
HTML-Codes where I am trying to access bootstrap
in the HTML header
<link rel="stylesheet" media="screen" href=#routes.Assets.versioned("css/main.css")">
<link rel="shortcut icon" type="image/png" href=#routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Before the closing body-tag:
<script src=#routes.Assets.versioned("js/main.js")" type="text/javascript"></script>
<script src=#routes.Assets.versioned("js/jquery-3.4.1.min.js")" type="text/javascript"></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=#routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
The result is a HTML page without any css (Default font: Times new Roman).
The HTML page is not rendered using bootstrap.
How I can include Bootstrap so that it is rendered correctly?
I added the following HTML to the head section of my blogger.com theme.
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'https://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
But when I view a page via HTTP the browser tells me I am requesting insecure HTTP resources from a second HTTPS page.
https://mrpmorris.blogspot.co.uk/2017/06/loading-assembly-from-specific-path.html
If I right-click the alexgorbatchev link in the Chome Console and select Open in new link it takes me to an insecure page, if I add https:// to the start of the url it loads securely.
Why are Chrome and MS Edge trying to fetch these resources via http when the markup explicitly indicates https?
I was facing the same issue with my blog.
I replaced below piece of code:
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
With the below one:
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
And now my blog stopped throwing that error of insecure content blocked. Because now all the content is served over https and that too by one of the best cdn in the world.
$ curl -I https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js -k
HTTP/1.1 302 Moved Temporarily
...
Location: http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js
...
You can see that it's actually being redirected to TypePad.com. There's a "cool" story behind this. Back in the dark days when bandwidth was expensive, I was getting 100s of GBs of traffic on these scripts, which was starting to cost over $100 a month. I moved the files to free hosting service, but I didn't want all existing links to alexgorbatchev.com to break, and so I set up redirects.
I should probably fix the redirect to use the same protocol as the request :)
I'm referencing these files in my index.html:
<link href="wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="wwwroot/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="wwwroot/lib/angular/angular.min.js"></script>
<script src="wwwroot/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="wwwroot/app/app.js"></script>
<script src="wwwroot/app/controllers/home.controller.js"></script>
But when I build the project with IIS Express in visual studio, I get a 404 error for each one. When I look at the console and resources tabs in Chrome to see where it's trying to pull the files from, I see that the directory is an old one from a previous, similar project.
I've tried clearing my cache in several different ways and deleting the old project altogether, but nothing is working...
wwwroot is the root WWW directory. You should remove these path prefixes from your script's and css's links.
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers/home.controller.js"></script>