How to prevent javascript element from rendering over collapsible Navbar Menu - javascript

I'm trying to add a Full-Calendar to my website but the calendar div keeps rendering over the expanded Navbar.
Is there a way to make the navbar stay on top of the full-calendar ? On top meaning that the menu once expanded hides the calendar.
For information I'm using bootstrap 4 for the styling and django as framework.
This is the body section from my base template:
<body>
<!-- Header -->
<header id="header">
<!--Loading Navbar-->
{% include 'navbar.html' %}
<div id="branding">
{% block branding %}{% endblock %}
</div>
</header>
<!-- END Header -->
<!-- Container -->
<div id="container">
<!-- Content -->
<div id="content" class="{% block content_container_class %}colM{% endblock %}">
{% block pretitle %}{% endblock %}
{% block content %}{% endblock %}
</div>
<!-- END Content -->
</div>
<!-- END Container -->
{% include 'footer.html' %}
<!-- Load Javascript-->
<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>
{% block script %}{% endblock %}
<!-- End Javascript-->
</body>
My navbar :
{% load static %}
<nav class="navbar navbar-expand-md bg-light navbar-light shadow-sm">
<div class="navbar-header justify-content-between d-flex flex-row">
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<img src="{% static 'img/navbar-menu.svg' %}" alt="menu" class="nav-menu">
</button>
<!-- Brand -->
<a class="navbar-brand d-lg-none d-xl-none d-md-none" href="#">
<img src="{% static 'img/navbar-logo.png' %}" alt="logo" style="width: 80px;">
</a>
<!-- Search Button-->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleSearch">
<a class="navbar-search d-lg-none d-xl-none d-md-none" href="#"><img class="search-logo" src="{% static 'img/navbar-search.svg' %}" alt="" style="width: 24px;"></a>
</button>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="{% url 'home' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/home.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Acceuil</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'event' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/event.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Événements</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'info' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/info.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Informations</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'members' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/join.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Rejoindre</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'contact' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/contact.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Contact</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'us' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/us.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Nous</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="collapsibleSearch">
<form class="form-inline" action="">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="border-0 shadow-0" type="submit">
<span class="input-group-text">Rechercher</span>
</button>
</div>
</div>
</form>
</div>
</nav>
And this is the page containing the full-calendar:
{% extends 'base.html' %}
{% load static %}
{% block header_script %}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
events: [
{
title: 'Antred Réunion Annuelle',
start: '2020-07-15',
end: '2020-07-15'
}
]
});
calendar.render();
});
</script>
{% endblock %}
{% block content %}
<div id="calendar"></div>
{% endblock %}
Thanks everyone for the help !


Found the answer, I moved my nav into:
<div style="position:relative; z-index:10"></div>

Related

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

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!

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>

Infinite Scroll Django does not work proprely

Note: Intro: I am using this https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html to add infinite scroll with django. Just in case anyone wants the detailed code its on Github.It is a very simple code
The Problem: Rather than having infinite scroll I only get more link so it does not work properly
In my static folder. I made a folder called js and added 3 files in it
infinite.min.js, jquery-3.1.1.min.js, jquery.waypoints.min.js
I copied the code exactly from the github in my files
BELOW IS MY VIEW
from django.shortcuts import render, get_object_or_404
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from django.contrib.auth.models import User
from .models import Post
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.http import HttpResponse
def home(request):
numbers_list = range(1, 1000)
page = request.GET.get('page', 1)
paginator = Paginator(numbers_list, 20)
try:
numbers = paginator.page(page)
except PageNotAnInteger:
numbers = paginator.page(1)
except EmptyPage:
numbers = paginator.page(paginator.num_pages)
return render(request, 'blog/home.html', {'numbers': numbers})
class PostListView(ListView):
model = Post
template_name = 'blog/home.html'
context_object_name = 'posts'
ordering = ['-date_posted']
paginate_by = 5
class UserPostListView(ListView):
model = Post
template_name = 'blog/user_posts.html'
context_object_name = 'posts'
paginate_by = 5
def get_queryset(self):
user = get_object_or_404(User, username=self.kwargs.get('username'))
return Post.objects.filter(author=user).order_by('-date_posted')
MY base.html
<!DOCTYPE html>
{% load static %}
<html>
<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">
<link rel = "stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
{% if title %}
<title> Django Blog - {{title}} </title>
{% else %}
<title> Django Blog </title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
<button class= "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'profile' %}"> Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}"> Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{message}}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
{% if user.is_authenticated %}
<a class="nav-item nav-link pb-2" href="{% url 'post-create' %}"> CREATE A POST!</a>
{% else %}
{% endif %}
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>
**FINALLY MY HOME.HTML**
{% extends "blog/base.html" %}
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
});
</script>
{% block content %}
<a class="infinite-container">
{% for post in posts %}
<article class="media content-section ">
<img class ="rounded-circle article-img" src="{{post.author.profile.image.url}}">
<div class="media-body infinite-item">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
</div>
{% block javascript %}
{% endblock %}
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
{% if page_obj.has_previous %}
<a class="infinite-more-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% endblock %}
Thank you

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 %}.

Categories

Resources