HTML5 Page: Make all divs completly visible in browser without scrolling (Django) - javascript

I would like to create one indexview which content is completely visible with any browser (mobile and desktop) without the need of scrolling.
So I need any function which scale the content of the page (shrink html5 elements) so that all elements have their place on the screen.
At the moment I try to go with CSS.
I tried to set the max-height: 94vh (6vh are for my navbar) of my main container. But sadly that not works.
the included elements of the maincontainer are overlapping... So I have to scroll
Maybe this has something to the with the bootstrap cards?
The result looks like this: I have the undesirable scrollbar on the right (I would like to see all six cards without scroll, so the cards must be smaller...depending on the screensize):
Here my django templates:
Base template
<!-- Load nessessary static files-->
<!-- ===============================================================================================================================================-->
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/base_style.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">
<link href="//cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/round-slider#1.5.1/dist/roundslider.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="{% static 'img/greencube2.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
Greencube
</a>
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'rooms_index' %}">Raumübersicht</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 3 %}">Schlafzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 1 %}">Wohnzimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 2 %}">Badezimmer</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 5 %}">Küche</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 4 %}">Büro/Studio</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'rooms_detail' 6 %}">Garten</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="testid">
{% block page_content %}
{% endblock %}
</div>
</body>
{% block javascript %}{% endblock %}
</html>
CSS for my base template
body {
background: white url("img/leaf.png");
}
h1 {
color: white;
}
#testid{
background-color: blue;
max-height: 94vh;
}
IndexView
{% extends "base.html" %}
{% load static %}
{% block page_content %}
<div class="row">
{% for rooms in rooms %}
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="{% static rooms.image %}">
<div class="card-body">
<h5 class="card-title">{{ rooms.title }}</h5>
<p class="card-text">{{ rooms.description }}</p>
<label id="ActTmp{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} °C</label>
<label id="Space{{ forloop.counter0 }}"> / </label>
<label id="ActHumy{{ forloop.counter0 }}">{{ DBObjActhumidity.value }} %</label>
<img id="windowimage{{ forloop.counter0 }}" src="{% static 'img/window_opened.png' %}" alt="Mein Bild" style="visibility: hidden; position: absolute;"><br>
<a href="{% url 'rooms_detail' rooms.pk %}"
class="btn btn-primary">
Raumsteuerung
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
Do you have any idea how I can reach my goal?
Thank you for your response!

Related

Nav Bar Toggle Button - Won't dropdown

I have a Django homepage that has a Bootstrap navbar, and when resized I have it show a toggle button. My issue is that when this toggle button comes into effect, I cannot dropdown the navbar items? I am unsure how I can fix this.
Snip of what these look like (for an idea):
https://imgur.com/a/PyiUs38
This is my imports:
Pastebin: https://pastebin.com/QqPiyVxf
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- SCRIPTS -->
<script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
These are my scripts at the bottom of the body:
<!-- SCRIPTS -->
<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://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Updated Working Snippet with Bootstrap 5.1 version
Bootstrap 5.1
I did following changes in your code
I used Bootstrap 5.1 version
I changed following attributes in button element
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
Changed to
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
Please check the following working snippet
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Updated Working Snippet with Bootstrap 3.4.1 version
Note: Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Thant's mean you have to call dropdown via javascript
Ex:
// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();
Please check the following working snippet
$('.dropdown-toggle').dropdown();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
</a>
<!--MAIN NAV-->
<button
type="button"
class="dropdown-toggle"
id="dropdownMenu1"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
{% with request.resolver_match.url_name as url_name %}
<ul class="navbar-nav">
<li class="nav-item {% if url_name == 'home' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item {% if url_name == 'about' %}active{% endif %}">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
<a class="nav-link" href="{% url 'projects' %}">Projects</a>
</li>
<li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
<a class="nav-link" href="{% url 'uses' %}">Uses</a>
</li>
<li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
{% endwith %}
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Reference Link (My Another Stack Overflow Answer): https://stackoverflow.com/a/69763221/3073842

Does the html file link to the Bootstrap JavaScript dependency? It is required for navbars.

Include following JS libraries into your template file, right before the closing body tag,
<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>

responsive hamburger navbar not functioning in django base.html

I am developing simple blogging site, the problem I am facing is my navbar is not responsive, below is my navbar seen in desktop.
but as I decrease the size of browser, nav bar gets hidden
what I need is hamburger icon on left top when I decrease the size of the screen on clicking that all navbar menu items should be visible vertically.
below is my code:
{% load static %}
<!doctype html>
<html lang="en">
<head>
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Young Minds</title>
{% endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/fontawesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/flaticon/font/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
<link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merienda&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Theme Style -->
<!-- jquery functions -->
</head>
<body>
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav" style="font-family: 'Hind', sans-serif;margin-left:198px;">
{% with url_name=request.resolver_match.url_name %}
<li class="nav-item" style="margin-right:15px;margin-left:-20px;">
<a class="nav-link active" href="{% url 'blog-home' %}" style="margin-top:-3px;">
<span style="font-size: 18px;">Blog </span></a>
</li>
<li class="nav-item" style="margin-right:15px;margin-left:88px;">
<a class="nav-link" href="{% url 'blog-home' %}">Home</a>
</li>
<li class="nav-item dropdown" style="margin-right:15px;">
<a class="nav-link dropdown-toggle" href="category.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catogery</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
{% for category in categories %}
<a class="dropdown-item" href="{% url 'category-posts' category.category__category %}">{{category.category__category}}</a>
{% endfor %}
</div>
</li>
<li class="nav-item dropdown {% if url_name == 'index' %}active{% endif %}" style="margin-right:15px;">
<a class="nav-link" href="{% url 'about' %}">About Us</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'profile' user%}">Profile</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'post-create' %}">Create Blog</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'user-posts' user %}">My Blogs</a>
</li>
<li class="nav-item" style="float: left;">
<a class="nav-link" href="{% url 'logout' %}" >Logout({{ user.username }})</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'registration' %}">Signup</a>
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</div>
</header>
{% block content%}
{% endblock content%}
<footer class="site-footer">
<div class="container">
<div class="row mb-5">
<div class="col-md-4">
<h3>Developer's Message</h3>
<p class="mb-4">
</p>
<p>Wish you all a very good day ! Enjoy Blogging ! <i class="fa fa-smile-o" aria-hidden="true"></i></p>
</div>
<div class="col-md-6 ml-auto">
<div class="row">
<div class="col-md-7">
<h3>Quick Links</h3>
<ul class="list-unstyled">
<li >
Home
</li>
<li>About</li>
<li class="About">Categories</li>
</ul>
</div>
<div class="mb-6">
<h3>Social</h3>
<ul class="list-unstyled footer-social">
<li><span class="fa fa-twitter"></span> Twitter</li>
<li><span class="fa fa-facebook"></span> Facebook</li>
<li><span class="fa fa-instagram"></span> Instagram</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="small">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright © <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- END footer -->
<!-- loader -->
<script src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'blog/js/jquery-migrate-3.0.0.js' %}"></script>
<script src="{% static 'blog/js/popper.min.js' %}"></script>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'blog/js/main.js' %}"></script>
<script type="text/javascript">
$('.reply-btn').click(function(){
console.log($(this).parent());
console.log($(this).parent().parent());
console.log($(this).parent().parent().next());
$(this).parent().parent().next('.comment-body').fadeToggle()
console.log("trigerred")
});
$(document).ready(function() {
$('.About').click(function(event) {
$("#About-content").toggle("slow");
});
});
$(document).ready(function(event){
$(document).on('click',"#like_the_post_by_user", function(event){
event.preventDefault();
console.log($("#like_the_post_by_user").val())
console.log("from jquery section")
var pk = $(this).attr('value');
$.ajax({
type : "POST",
url : "{% url 'like_post' %}",
data : {'id': pk , "csrfmiddlewaretoken": '{{ csrf_token }}' },
dataType : 'json',
success : function(response){
$('#like-section_user').html(response['form'])
console.log($('#like-section_user').html(response['form']));
},
error : function(rs, e){
console.log(rs.responseText);
}
});
});
});
</script>
</body>
</html>
I tried searching everywhere and tested on my own but I couldn't do it myself.
Any help will be greatly appreciated!
Thanks in advance!

You need to add a toggle button to have a hamburger menu
in your case would be something like
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
...
</div>
</div>
</header>
...

Error using jQuery with django: Uncaught ReferenceError: jQuery is not defined

I am trying to use jQuery with my django app but when I use the inspector and look at the .js file in Sources, I am seeing this error. I know this question has come up before, but I haven't been able to figure out how to fix it in my case. This is the HTML for the page I am trying to load:
{% extends 'great_songs_app/base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'great_songs_app/playlist_jquery.js' %}">
</script>
--code--
{% endblock %
And this is my base HTML file:
{% load static %}
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://rsms.me/inter/inter-ui.css" rel="preload" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'great_songs_app/style.css' %}">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:great_songs' %}">Songs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:playlists' %}">Playlists</a>
</li>
</ul>
<ul class="navbar-nav" id="login-list">
{% if user.is_authenticated %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:logout' %}" id=login>log out</a>
</li>
{% else %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:login' %}" id=login>log in</a>
</li>
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 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>
This is my jQuery file:
jQuery(document).ready(function($) {
$(".playlist-row").click(function() {
window.location = $(this).data("href");
});
});

I had a similar problem and just I pasted the js files inside head tag.
Here is my base.html
Then inside body tag, the {% block content %}{% endblock %}.

The .navbar-toggler-icon does not appear

<header class="container">
<div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center">
<img src="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</div>
</nav>
</header>
The .navbar-toggler-icon does not appear on the .navbar-toggler button when the menu is collapsed for mobile responsiveness.
I want the Navbar button above the left

Use this body code only...... for your bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<img src="#">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap menu disappears onclick on mobile / & header image wont resize

So I spent a few hours trying to solve this myself, with the help of other people's posts but had no luck. Allow me to explain my issues first.
My website, www.discoverbugs.org, has a bootstrap navigation menu. It looks fine on the desktop, but on mobile, the drop-down menu disappears when you click on it. What's causing it and how can I fix it?
The second issue is the header image. On mobile, it expands across the entire width of the phone. I'm having this issue with a lot of images on the site. I tried adding max and min widths and it just won't work for me. Can someone please help me edit this? It looks ridiculous.
CSS:
#media screen and (max-width: 420px) { header {
padding: 65px 0 0px; } }
Index.php
<header class="bg-primary text-white">
<div class="container text-center">
<img src="img/header-v6.jpg">
</div>
</header>
Header.php (Navigation menu)
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Javascript coding I have:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

The reason is simple: Bootstrap 3 JavaScript is not designed to work with Bootstrap 4.
In other words, for Bootstrap 4 css you also need Bootstrap 4 JavaScript (as well as jQuery 3.2.1 and popper.js).
To fix the header image issue add the img-fluid class to the image like so:
<img class="img-fluid" src="img/header-v6.jpg">
This will make the image responsive.
To fix the first issue, use the css and JavaScript files from the following template (and load them in that order):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.php">Discover Bugs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="testimonials.php">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="collections.php">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="form.php">Costs & Booking</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="faq.php">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5 pt-5">
<div class="row">
<div class="col">
<h1>Hello, world!</h1>
</div>
</div>
</div>
<!-- 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>
</body>
</html>

Categories

Resources