I'm working on a Django Project and I see navbar error after adding a few script tags. It worked before.
Navbar is moving down but it is not moving back to its position. I see after commenting a few script tags it works. I'm unsure what it needs exactly. HTML code below.Thanks
I could understand that we need to add few js files. But what needs to be added is my question.
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<title>Cricket Management</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-black">About</h4>
<p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet. It features news, articles and live coverage of cricket matches including videos, scorecards, text commentary, player stats and team rankings. Their website also offers a mobile app. </p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-black">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-primary">
<div class="container d-flex justify-content-between">
<a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
<img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50">
<em>CrickyMac</em>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
{% block content%}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'backgroundImage.jpg'%}');" data-stellar-background-ratio="0.1">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true">
<div class="col-md-11 ftco-animate text-center">
<h1 class="mb-4">Howdy Partner !!!! CRICKET- not just a game It’s an emotion, For Team Details click Below.</h1>
<p>Teams <span class="ion-ios-arrow-forward"></span></p>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Stats</strong>
<h3 class="mb-0">Matches and Results</h3>
<p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI, TEST</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Fixures »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Rankings</strong>
<h3 class="mb-0">Points Table</h3>
<p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams. Discover latest ICC rankings table, predict upcoming matches, see points and rating.</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Points Table »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<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>
</body>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>CricketManagement#2020 © “Life is simply a cricket match, with temptation as the bowler.”</p>
</div>
</footer>
</html>
The problems which I can see in your code which is causing this problem is:
You have called bootstrap 4 CDN in your code's head.
you have also called bootstrap JS files in your footer
you have called proper.js which is a dependency for BS 4, jQuery is needed for BS and proper before.
Solution:
Remove bootstrap CDN from your head
add it to bottom of your page,
make sure jquery is called before BootStrap's js and proper.js.
don't call any js file twice, weather its jquery or BS files.
now I am updating your code in this edit... check now and don't forget to checkpoints below.
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<title>Cricket Management</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-black">About</h4>
<p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet. It features news, articles and live coverage of cricket matches including videos, scorecards, text commentary, player stats and team rankings. Their website also offers a mobile app. </p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-black">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-primary">
<div class="container d-flex justify-content-between">
<a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
<img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50">
<em>CrickyMac</em>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
{% block content%}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'backgroundImage.jpg'%}');" data-stellar-background-ratio="0.1">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true">
<div class="col-md-11 ftco-animate text-center">
<h1 class="mb-4">Howdy Partner !!!! CRICKET- not just a game It’s an emotion, For Team Details click Below.</h1>
<p>Teams <span class="ion-ios-arrow-forward"></span></p>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Stats</strong>
<h3 class="mb-0">Matches and Results</h3>
<p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI, TEST</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Fixures »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Rankings</strong>
<h3 class="mb-0">Points Table</h3>
<p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams. Discover latest ICC rankings table, predict upcoming matches, see points and rating.</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Points Table »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>CricketManagement#2020 © “Life is simply a cricket match, with temptation as the bowler.”</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
I have updated you code, check now, the mistakes you are still doing was match with your code.
You were calling bootstrap and proper js and jquery cdn many times before body closing tag.
you were calling footer after body closing tag which is wrong. all your html tags need to be within the body.
you were using a link tag to add script files, which is wrong.
Related
So I have the bootstrap 5 library downloaded - both the compiled css and js and the source files. I have tried both of them - the css loads well from what I can tell - yet, I can't get this example to work from a related post on boostrap 4, which should work for bootstrap 5... I am trying to avoid using CDNs to provide the libraries, hence why I downloaded them. When I use the CDNs provided in the example it works like a charm.
Can someone point me to what the heck I am missing to make the carousel work? What file(s) do I need to reference to make it slide?
(Here is some code so I don't get yelled at)
I am using dJango and when I check the console I have no resource errors.
Once again, when I use the BS 4 CDN everything works...
{% load static %}
<html>
<head>
<title>
Welcome!
</title>
<!--
uncomment this and it works
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
the problem is the below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
<!--example:-->
<!--href="{% static 'polls/style.css' %}"-->
<!--theme-->
<link rel="shortcut icon" type="image/jpg" href="{% static 'favicon/CES.png' %}"/>
<link type="text/css" rel="stylesheet" href="{% static 'CSS/main.css' %}">
<!--jQuery-->
<script src="{% static 'Java/jQuery/jquery-3.6.0.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.slim.js' %}"></script>
<script src="{% static 'Java/jQuery/jquery-3.6.0.slim.min.js' %}"></script>
<!--<script src="https://code.jquery.com/jQuery/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--bootstrap related-->
<!--
<link type="text/css" rel="stylesheet" href="{% static 'Bootstrap/bootstrap-5.0.2-dist/css/bootstrap.min.css' %}">
<script src="{% static 'Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js' %}"></script>
-->
<link type="text/css" rel="stylesheet" href="{% static 'Bootstrap/bootstrap-5.0.2/dist/css/bootstrap.min.css' %}">
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.bundle.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.js' %}"></script>
<script src="{% static 'Bootstrap/bootstrap-5.0.2/dist/js/bootstrap.min.js' %}"></script>
<!--
this is the problem...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
</head>
<body>
<!--Image Carosel-->
<div class="d-flex justify-content-center">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/1080/500/animals" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>My Caption Title (1st Image)</h5>
<p>The whole caption will only show up if the screen is at least medium size.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I have to go to bed and do things in the morning... I will be up in like 12 hours - so no rush.
To migrate from version 4 to 5 you have to change the data values, for example data-bs-target instead of data-target.
In your case, just make simple changes
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 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">
<title>Hello, world!</title>
</head>
<body>
<body>
<!--Image Carosel-->
<div class="d-flex justify-content-center">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/1080/500/animals" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>My Caption Title (1st Image)</h5>
<p>The whole caption will only show up if the screen is at least medium size.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
I am a total newbie of Jquery and JavaScript. I am using this code as reference: https://jsfiddle.net/6uzU6/2/
What I am trying to do is similar as the link above, which is to display a div after a corresponding button is clicked while others divs are hidden.
I was trying to modify the code to use div instead of unordered list.
The problem I am having right now is when I use Brave Browser to open the page, the divs are not hiding and no changes are made after clicking the button. While using Chrome, the page will be blank, nothing is shown.
tutorialIndex.html
{% extends "morse_logs/base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">
<div class="container">
<h1>Tutorial</h1>
</div>
<div id="menu">
<button class="justClick" href="#">A</button>
<button class="justClick" href="#">B</button>
<button class="justClick" href="#">C</button>
<button class="justClick" href="#">D</button>
</div>
<div class="content">
</div>
<div class="content1">
<h1>A</h1>
<img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
</div>
<div class="content2">
<h1>B</h1>
</div>
<div class="content3">
<h1>C</h1>
</div>
<div class="content4">
<h1>D</h1>
</div>
<script src="{% static 'morse_logs/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'morse_logs/js/jquery-ui/jquery-ui.js' %}"></script>
<script src="{% static 'morse_logs/js/app.js' %}"></script>
{% endblock content %}
app.js
$('div').not(".content").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
Not sure about your code but here's another way to do it.
Its easy to read and understand...
$(document).ready(function(){
$(".justClicka").click(function() {
$(".content1").css("display", "block");
$(".content2,.content3,.content4").css("display", "none");
});
$(".justClickb").click(function() {
$(".content2").css("display", "block");
$(".content1,.content3,.content4").css("display", "none");
});
$(".justClickc").click(function() {
$(".content3").css("display", "block");
$(".content1,.content2,.content4").css("display", "none");
});
$(".justClickd").click(function() {
$(".content4").css("display", "block");
$(".content1,.content2,.content3").css("display", "none");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">
<div class="container">
<h1>Tutorial</h1>
</div>
<div id="menu">
<button class="justClicka" href="#">A</button>
<button class="justClickb" href="#">B</button>
<button class="justClickc" href="#">C</button>
<button class="justClickd" href="#">D</button>
</div>
<div class="content">
</div>
<div class="content1" style="display:none">
<h1>A</h1>
<img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
</div>
<div class="content2" style="display:none">
<h1>B</h1>
</div>
<div class="content3" style="display:none">
<h1>C</h1>
</div>
<div class="content4" style="display:none">
<h1>D</h1>
</div>
Page is blank because $('div').not(".content").hide() hides ALL divs except the one with the class="content" including the container and menu divs
Change it to $('div.content ~ div').hide()
This question already has answers here:
how to select all class except the clicked element in JQuery?
(3 answers)
Closed 5 years ago.
This code removes the div that is selected, i was trying to when i click in the button that is in the div,all the other would disapear, and the one that i clicked stayed, but i only can remove the one that i click, sry for my english and sry for being a beginner at jquery.
I have here a video to youtube to show you better what is my problem https://www.youtube.com/watch?v=kiUECo33-d0
$('.product-removal button').click( function() {
removeItem(this);
});
function removeItem(removeButton)
{
var productRow = $(removeButton).parent().parent();
productRow.remove();
}
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
<!--Processador-->
<div id="AL" class="expandContent">
<h3 class="header">
<div class="headerColumn1">Processador</div>
<div class="headerColumn2 expand"><img src="img/plus.png" /></div>
<div class="expandedContentClearFloat"></div>
</h3>
<div class="expandedContent">
<div class="container">
<ul id="orders">
{% for item in processador %}
<div class="product-removal">
<li>
<div class="row carousel-row" >
<div class="col-xs-8 col-xs-offset-2 slide-row" id="container">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="iconcomp" src="{{ item.img|e }}" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>{{ item.marca|e }}</h4>
<p>
{{ item.descr|e }}
</p>
</div>
<div class="slide-cima" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw fa-undo"></i></button>
</span>
</div>
<div class="slide-footer" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button name="" class="btn1" id='item' value='{{ item.id|e }}' ><i class="fa fa-fw fa-shopping-cart"></i></button>
</span>
<button class="remove-product">
Remove
</button>
</div>
</div>
</div>
</li>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<!-- scripts-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>
use this this hides all div except one you click
$('div').click(function(){
$('div').not(this).hide();
});
provide selector as per your's
I have the below page from a website I inherited. Everything is fine when I try different window sizes but if I switch to mobile view in Chrome divs start to float on top of the page.
I just don't understand what makes this happen.
{% load staticfiles %}
<!doctype html>
<head>
<meta charset="utf-8">
<title>www</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="static/favicon.ico">
<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/StudioHanel/styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="{% static "bower_components/modernizr/modernizr.js" %}"></script>
<!-- endbuild -->
</head>
<body onLoad="studioHanel.StudioHanel()">
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="navbar-fixed-top">
<img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/>
<ul id="menu" class="nav nav-pills pull-right"></ul>
</div>
<div id="landing">
</div>
<div id="teaser-about" class="teaser">
<h1></h1>
<div class="arrow"></div>
</div>
<div id="about">
<div class="container-fluid">
<div class="header"></div>
<h1></h1>
<div class="container">
<div class="row">
<div id="about-copy-column" class="col-md-8"><div class="two-columns"></div></div>
<div id="about-photo-column" class="col-md-4"><img src="{% static "images/cordelia_old.png" %}" width="244" height="274"></div>
</div>
</div>
</div>
</div>
<div id="interiors">
<div class="container-fluid"></div>
</div>
<div id="teaser-interiors" class="teaser">
<div class="shadow-up"></div>
<div class="pattern"></div>
<h2></h2>
<div class="shadow-down"></div>
<div class="arrow"></div>
</div>
<div id="case-study">
<div class="container-fluid">
<div class="row">
<div id="cell1" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div id="cell3" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell4" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div id="cell5" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell6" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
<div id="product-design">
</div>
<div id="teaser-contact" class="teaser">
<h2></h2>
<div class="arrow"></div>
</div>
<div id="contact-util"></div>
<div id="contact">
<div class="container">
<div class="row">
<div class="col-md-7" id="contact-form">
<form name="contact" action="" method="">
<fieldset>
<input id="name" class="text-input" type="text" name="name" placeholder="Your name">
<input id="email" class="text-input" type="text" name="sender" placeholder="Your email">
<input id="message" class="text-input" type="text" name="message" placeholder="What's on your mind?">
<label id="error"></label>
<input id="send" class="button" type="button" value="Send">
<!--<input id="send" class="button" name="submit" value="Send">-->
</fieldset>
</form>
</div>
<div class="col-md-4">
<div id="contact-details">
<div id="phone" class="contact-details"></div>
<div id="address" class="contact-details"></div>
</div>
</div>
</div>
</div>
<div class="shadow-up"></div>
<div class="pattern"></div>
</div>
<div id="copyright">
<p>© Studio Hanel 2014 All rights reserved including all imagery as shown on this website</p>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="{% static "bower_components/jquery/dist/jquery.js" %}"></script>
<!-- <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js" %}"></script> -->
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js" %}"></script>
<!-- <script src="{% static "bower_components/greensock/src/uncompressed/TweenMax.js" %}"></script> -->
<script src="{% static "bower_components/gsap/src/uncompressed/TweenMax.js" %}"></script>
<!-- <script src="{% static "bower_components/greensock/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script> -->
<script src="{% static "bower_components/gsap/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script>
<!-- <script src="{% static "bower_components/modernizr/feature-detects/css/scrollbars.js" %}"></script> -->
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!--
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js" %}"></script> -->
<!-- build:js scripts/plugins.js -->
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js" %}"></script>
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="{% static "scripts/utils.js" %}"></script>
<script src="{% static "scripts/landing.js" %}"></script>
<script src="{% static "scripts/about.js" %}"></script>
<script src="{% static "scripts/interiors.js" %}"></script>
<script src="{% static "scripts/case_study.js" %}"></script>
<script src="{% static "scripts/product_design.js" %}"></script>
<script src="{% static "scripts/contact.js" %}"></script>
<script src="{% static "scripts/menu.js" %}"></script>
<script src="{% static "scripts/navigation.js" %}"></script>
<script src="{% static "scripts/main.js" %}"></script>
<!-- endbuild -->
</body>
</html>
main.css
can't be posted due to large size.
can be downloaded from here
The problem seems to be the logo and nav bar overlapping.
To fix this you can wrap the logo with a div and use the bootstrap's class hidden-xs like this:
<div class="navbar-fixed-top">
<div class="hidden-xs">
<img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/>
</div>
<ul id="menu" class="nav nav-pills pull-right"></ul>
</div>
I am using the materialize.min.css and materialize.min.js and no other stylesheets.
I made a simple webpage. The code:
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}">
<title>
TITLE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body data-marker-image="{% static 'img/truck3.png' %}">
<div>
<nav class="light-green lighten-3">
<div class="nav-wrapper">
<a class="brand-logo center" href="SITE" target="_blank">
LOGO<!-- <img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/> -->
</a>
</div>
</nav>
<div class="side-menu-bar">
<ul id="slide-out" class="side-nav full">
<li>About Us</li>
<li>Support</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse">
<i class="large mdi-navigation-menu white"></i>
</a>
</div>
</div>
<main>
<div id="map-canvas" style="width: 100%; height: 100%;">
<div id="onmap-div">
<div id="onmap-price"></div>
</div>
</div>
</main>
<footer>
<div class="page-footer light-green lighten-3">
<div class="container">
Footer Note
</div>
</div>
<div class="footer-copyright light-green lighten-2">
<div class="container">
Copyright
</div>
</div>
</footer>
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
<script>$(".button-collapse").sideNav();</script>
<script type="text/javascript">var shipment_id = {{shipment_id}};</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="{% static 'js/socket.io.js' %}"></script>
<script type="text/javascript" src="{% static 'js/map.js' %}"></script>
<script>google.maps.event.addDomListener(window, 'load', initialize());</script>
</body>
</html>
The webpage made was like this: http://pasteboard.co/1hz4vuHF.png
As you can see from the image that the blue button is not coming on top of the NavBar.
How to fix it?
PS - Also How to change its color?
I think it's because you added the additional div
<div class="side-menu-bar">
</div>
Try removing that.