The HTML code given below does not follow the stylesheet that is provided in the link. I have entered several cdn links but none seem to render to the app.
<!DOCTYPE html>
<html>
<head>
<title>Refugee Stories</title>
<link rel = "stylesheet" href = "index.css">
<meta name = "viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- jQuery Version 1.11.0 -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://raw.githubusercontent.com/IronSummitMedia/startbootstrap/gh-pages/templates/agency/js/bootstrap.min.js"></script>
<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>
</head>
...
</html>
To many jquery and not the right cdn for boostrap...
I have test it... and it seem like your boostrap code is not working... i replace then in my exemple, and make sure that your css file as the right path too :
<!DOCTYPE html>
<html>
<head>
<title>Refugee Stories</title>
<meta name="viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- Style sheet (make sure yout path is valide)-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<!-- Script -->
<!-- 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>
</head>
<body>
<!-- Your html -->
</body>
</html>
Hope it can help you continue your project :)
Related
My react app is displaying what appears to be javascript on the screen in firefox, it does not display in chrome or edge. Below is a screenshot of what i see in firefox.
if i comment out the local stylesheet like this, it disappears.
<!-- <link rel="stylesheet" href="styles.css" /> -->
Any one have anyideas as to why this may be?
[
when i inspect it shows as part of the head tag in html:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="portal"></div>
<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>
</body>
</html>
I have a #container1 div on index.php.
I am trying to load #container1 with the contents of a #container2 div from page1.php.
I cannot figure out why this isn't working.
My file hierarchy is like this:
Project
-Js
--myJs
-index.php
-page1.php
index.php:
<!doctype html>
<html dir="rtl">
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<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>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
page1.php
<!doctype html>
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<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>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container2">
<div id="hello" style="height:100px; width:100px; background-color:blue;">
<p>hello<p>
</div>
</div>
</body>
</html>
myJs.js:
$(document).ready(function(){
$("#container").load("../page1.php #container2> *");
});
index otherwise shows up just fine. when I manually put the div #hello into #container1 it displays perfectly.
page1 also shows up well.
debugging didn't tell me much. the code successfully stepped into the function, but the hello is just not showing up.
the console is empty.
You are using jQuery Slim which does not contain any AJAX functionality.
To rectify your problem you need to include the full jQuery library and change the jQuery code slightly.
Replace your jQuery script tag with the following:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Then, in myJs.js, change the code to this:
$(document).ready(function(){
$("#container").load("../page1.php #container2");
});
Notice that I have changed the string from ../page1.php #container2> * to what it is above. CSS selectors cannot be used in that way in the load function, instead you can just target one element.
The other thing you might need to do is remove the <base> tag. That's playing havoc with relative URLs.
The console will then tell you the problem Uncaught TypeError: $(...).load is not a function.
I have implemented the Bootstrap-Year-Calendar plug-in but it appears vertically, I don't know if it has to do anything with my scripts or links.
I tried changing the version of my Jquery and bootstrap version but the result is the same.
I was following these instructions:http://www.bootstrap-year-calendar.com/#Documentation/Installation
This is my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="{{ static_url('css/bootstrap.min.css') }}">
<!-- CUSTOM & PAGES STYLE -->
<link rel="stylesheet" href="{{ static_url('css/custom.css') }}">
</head>
<body>
<div class="container">
<div data-provide="calendar" class="calendar">
</div>
</div>
<!-- Bootsrap -->
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" 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 rel="stylesheet" href="{{ static_url('css/bootstrap-year-calendar.min.css') }}">
<script src="{{ static_url('js/bootstrap-year-calendar.min.js') }}"></script>
<script>
$(function() {
$('#calendar').calendar();
});
</script>
</body>
</html>
This is how it looks now
This is because you're using bootstrap 4. Bootstrap-Year-Calendar works with Bootstrap 3 versions only. If you can't use bootstrap3 in your site there is a fork customized for BS4.
From fork authors comment:- He has Migrated the classes that relied on deprecated BS3 classes and it should work. BS4 no longer uses glyphicons,So he used open-iconic as a dependency, as it was one of their recommended sources for icons (https://getbootstrap.com/docs/4.0/extend/icons/)
Im building a page using Bootstrap and still feeling my way around. Im trying to load content to a div once the page has finished loading and Im using jQuery .load method. For some reason it always comes back as : load is not a function, even when Ive copied a working example from w3schools.
My code is as follows:
$(document).ready(function(){
$(".carousel-load").load('HTML/avaleht.html');
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="CSS/bootstrap.min.css" >
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<title>ASMRi</title>
</head>
<div class="carousel-load"></div>
<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>
</body>
</html>
Any sort of help is much appreciated!
You're including jQuery two times in your code, and the latter (slim version) doesn't include load() function in it. Since the latter also overrides the former, you get this error.
You need to remove this line from the code:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
To see the difference between the two flavors, this post is a good start.
I'm developing project with AngulaJS , Flask , Apache2.
My index page can't find css styles,jsscripts ,images and other sources.
That is from my head tag in HTML:
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"
type="text/javascript"></script>
<script src="/js/app.js"></script>
<script src="/js/services.js"></script>
<script src="/js/script.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="text/javascript" src="/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
What's going on? I'm noobie in development. So don't be mad.
Thanks for you attention!