Infinite Scroll Django does not work proprely - javascript

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

Related

Having trouble with a hierarchical Wordpress sidebar menu. The script always appends the slug so you can't navigate back up the hierarchy

The menu uses a toggle to drop down child pages. It's then possible to navigate to a child page, but getting back to the parent page, or a different parent page is impossible, since each time, the slug is appended to the URL.
For example:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/
Within the Women and Epilepsy segment I can reach child pages like:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/
But I can't then go back to a different section like 'Living With Epilepsy' because this happens, resulting in a 404:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/living-with-epilepsy
Can anyone help? Thanks so much for taking the time to read this!
<aside class="sub-menu col mx-auto">
<ul class="nav flex-column mx-2 menu">
{% set siblings = post_query({
'post_type': 'page',
'post_parent': ancestor,
'orderby': 'menu_order',
'order': 'ASC'
}) %}
<a class="nav-side-title {% if fn('is_page', ancestor.slug) %}active{% endif %}" href="{{ ancestor.link }}">
<h4>{{ ancestor_name }}</h4></a>
{% for sibling in siblings %}
{% if sibling.children %}
<div class="top mx-2 d-flex align-items-baseline">
<li class="nav-item top-parent has-child collapsed" href="#{{ sibling.slug }}" data-toggle="collapse" aria-controls="{{ sibling.title }}"></li>
<a class="nav-link {% if fn('is_page', sibling.slug) %}active{% endif %}" href="{{ sibling.slug }}">{{ sibling.title }}</a>
</div>
<ul id="{{ sibling.slug }}" class="collapse child-menu" aria-labelledby="{{ sibling.title }}">
{% for subpage in sibling.children %}
{% if subpage.post_type == "page" %}
{% if subpage.children %}
<div class="mx-3 d-flex align-items-baseline">
<li class="nav-item middle-parent has-child collapsed" href="#{{ subpage.slug }}" data-toggle="collapse" aria-controls="{{ subpage.title }}"></li>
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</div>
<ul id="{{ subpage.slug }}" class="grandchild-menu collapse" aria-labelledby="{{ subpage.title }}">
{% for subpage_2 in subpage.children %}
{% if subpage_2.post_type == "page" %}
<li class="nav-item bottom">
<a class="nav-link subpage{% if fn('is_page', subpage_2.slug) %} active{% endif %}" href="{{ subpage_2.link }}"> {{ subpage_2.title }}</a>
</li>
{% endif %}
{% endfor %}<!--subpage_2-->
</ul>
{% else %}<!--subpage.children-->
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %} <!--subpage.children-->
{% else %}
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %}<!--subpage.children page-->
{% endfor %} <!--subpage-->
</ul>
{% else %} <!--sibling.children-->
<li class="nav-item top">
<a class="nav-link {% if fn('is_page', sibling.slug) %} active{% endif %}" href="{{ sibling.link }}">{{ sibling.title }}</a>
</li>
{% endif %}<!--sibling.children-->
{% endfor %} <!--sibling-->
</ul>
</aside>

How to prevent javascript element from rendering over collapsible Navbar Menu

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>

changing navbar icons to active with django-Javascript

I have made a navbar with bootstrap4 and I want to toggle the icon of current page to active.
Currently, I am using
<li class="nav-item"><a href="/" id="A"
{% if request.path == "/" %}
class="nav-link active"
{% else %}
class="nav-link"
{% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
{% if request.path == "/blog/" %}
class="nav-link active" {% else %}
class="nav-link"
{% endif %}>Blog</a></li>
what I would like is a simpler way with use of url names that could activate a script
like this:
{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>
{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}
Could there be an easier way? Please suggest to highlight the active page icon on navbar to toggle styles.
Thank you

The best way to do this without violating DRY principles and hard-coding your urls would be to use reverse in the templates.
Example:
<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}
<!-- ..... Body HTML ..... -->
<li class="nav-item">
<a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
Blog
</a>
</li>

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

uncaught Reference error YUI is not defined console error

I am using alloyui for fronted , when i trying to use this getting issue.uncaught Reference error YUI is not defined console error. below is code
any help. i just updatet this code please look the bellow code .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
<script>
YUI().use(
'node',
'transition',
function (Y) {
Y.one('.navbar-brand').on(
'click', function() {
this.transition(
{
width: '500px'
}
);
}
);
}
);
</script>
</head>
<body>
{% block body %}
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="{{ path('dashboard.index') }}">NewsDriver</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if is_granted('IS_AUTHENTICATED_FULLY') %}
<li>{{ app.user.getName() }}</li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
{% endif %}
</ul>
</nav>
{% for flashType, flashMessages in app.session.flashbag.all() %}
{% for flashMessage in flashMessages %}
<div class="alert alert-{{ flashType }}">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ flashMessage }}
</div>
{% endfor %}
{% endfor %}
{% block content %}{% endblock %}
</div>
{% endblock %}
{% block javascripts %}
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
{% endblock %}
</body>
</html>

You have to put <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script> before the <script> where you are calling YUI().

You need to load the aui-min.js script before you run your custom JS code.
See edited code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="{{ path('dashboard.index') }}">NewsDriver</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if is_granted('IS_AUTHENTICATED_FULLY') %}
<li>{{ app.user.getName() }}</li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
{% endif %}
</ul>
</nav>
{% for flashType, flashMessages in app.session.flashbag.all() %}
{% for flashMessage in flashMessages %}
<div class="alert alert-{{ flashType }}">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ flashMessage }}
</div>
{% endfor %}
{% endfor %}
{% block content %}{% endblock %}
</div>
{% endblock %}
{% block javascripts %}
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
{% endblock %}
<script>
YUI().use(
'node',
'transition',
function (Y) {
Y.one('.navbar-brand').on(
'click', function() {
this.transition(
{
width: '500px'
}
);
}
);
}
);
</script>
</body>
</html>

Categories

Resources