I'm trying to use the django-boostrap4 in my project, so I did the following:
My home_base.html
{% load static %}
{% load bootstrap4 %}
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% bootstrap_css %}
<title>Avaliei - Inteligência Imobiliária</title>
{% endblock %}
</head>
<body>
{% block body %}
Body Content
{% endblock %}
{% bootstrap_jquery %}
{% bootstrap_javascript %}
</body>
</html>
My index.html:
{% extends "home_base.html" %}
{% load static %}
{% block body %}
<div class="body_wrapper">
<div id="preloader">
<div id="ctn-preloader" class="ctn-preloader">
<div class="animation-preloader">
<div class="spinner"></div>
<div class="txt-loading">
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="V" class="letters-loading">
V
</span>
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="L" class="letters-loading">
L
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
<span data-text-preloader="E" class="letters-loading">
E
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
</div>
<p class="text-center">Carregando</p>
</div>
<div class="loader">
<div class="row">
<div class="col-3 loader-section section-left"><div class="bg"></div></div>
<div class="col-3 loader-section section-left"><div class="bg"></div></div>
<div class="col-3 loader-section section-right"><div class="bg"></div></div>
<div class="col-3 loader-section section-right"><div class="bg"></div></div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
My settings.py:
INSTALLED_APPS = [
...,
'bootstrap4', # Django Bootstrap 4
...
]
But when I runserver, my page is blank with no style at all, either animation from preloader. Despite that, when add a component like a button 'btn-danger', it works fine! At least it's showing the right style.
Am I missing some basic setting for this to work properly? I've tried add the CDN links directly in the index.html, but the behavior is the same.
I had the same problem and it was very frustrating, and even more so when I learned how simple it was! If you check the documentation for the library you will see what you need to do.
Add:
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
Into your heading or body for before any other script/links that may use or extend the bootstrap definitions.
Documentation: https://django-bootstrap4.readthedocs.io/en/latest/quickstart.html
I hope that works for you.
Related
I want to make an infinite scroll but it's not working and throws errors in the console:
Here is my HTML:
{% extends 'base.html' %}
{% load static %}
{% block imports %}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock imports %}
{% block main %}
<h1 class="title">Was soll es denn heute geben?</h1>
<div class="all-recipes infinite-container" id="all-recipes">
{% for recipe in queryset_recipes %}
<div class="recipe-box infinite-item">
<a href="{{recipe.get_absolute_url}}" class="recipe-link">
<img src="{{recipe.images}}" alt="Rezept Bild" class="image" />
<h3 class="recipe-title">{{recipe.title}}</h3>
</a>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
{% endblock main %}
{% block scripts %}
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
{% endblock scripts %}
And here are the Errors:
1.
infinite.min.js:57 Uncaught TypeError: Cannot set property 'Infinite' of undefined
at infinite.min.js:57
at infinite.min.js:58
(index):329 Uncaught ReferenceError: Waypoint is not defined
at (index):329
I really hope that somebody could help me solving those errors because I have no idea why this is happening. Thank You!
You should have instead of
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Next ordering:
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Pay attention to jquery.waypoints.min.js
I have a custom popup that shows upon form submission to let the user know it was successful. Currently it displays when it's supposed to (although I can't get it to display in the middle right on top, but that's a minor issue) like shown below:
But the little X button does not actually close the message. You can click it but it does nothing, and if you reload the page then it's gone until you submit again.
base.html
{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/apps.css" %}" rel="stylesheet">
<script src="{% static "js/plugins/jquery.js" %}"></script>
<script src="{% static "js/plugins/bootstrap.min.js" %}"></script>
<!--[if lt IE 9]>
<script src="{% static 'js/plugins/respond.js' %}"></script>
<![endif]-->
</head>
<body>
<div id="login" class="panel panel-default">
<div class="panel-body">
{% block main %}
{% endblock main %}
</div>
<div class="panel-footer">
{% block panel_footer %}
{% endblock %}
</div>
</div>
{% if messages %}
<script>
{% for message in messages %}
$(document).ready(function () {
$('.toast').toast('show');
});
{% endfor %}
</script>
{% endif %}
</body>
I think the problem could be related to the warning I get that says Unresolved function or method toast() on $('.toast').toast('show'); but I'm not sure how to resolve this issue (I got this from https://www.w3schools.com/bootstrap4/bootstrap_toast.asp but I don't know if I just didn't add something important to make this work)
enter_exit_area.html
{% extends "base.html" %}
{% load core_tags %}
{% block main %}
<form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div>
<label>Station</label>
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter" >Enter Area</button>
</div>
</div>
</form>
{% endblock main %}
message.html
{% for message in messages %}
<div style="position: absolute" class="bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div>
<strong class="mr-auto">
{{message.tags|capfirst}}
</strong>
<button type="button" class="ml-2 mb-1 close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
{{message|safe}}
</div>
</div>
{% endfor %}
views.py
class EnterExitArea(CreateView):
model = EmployeeWorkAreaLog
template_name = "operations/enter_exit_area.html"
form_class = WarehouseForm
def form_valid(self, form):
emp_num = form.cleaned_data['employee_number']
area = form.cleaned_data['work_area']
station = form.cleaned_data['station_number']
if 'enter_area' in self.request.POST:
form.save()
EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True)).update(time_in=datetime.now())
messages.success(self.request, "You have entered")
return HttpResponseRedirect(self.request.path_info)
The close button is missing the attribute data-dismiss="toast"
You'd need to add the toast class to the containing div though as well
https://www.w3schools.com/bootstrap4/bootstrap_toast.asp
when a user clicks a tab I want that tab to show as active in blue. I can do it using if statements like the one I show on the code, but I would be repeating the code a LOT, so there has to be another way, could someone let me a hand please?
The current if statement shows the profile page which is active
<!-- This is saying: inherit everything from __base.html -->
{% extends "storePage/partials/__base.html" %}
<!-- Main base template which contains header and footer too -->
{% load crispy_forms_tags %}
<!-- To beautify the form at signup -->
{% block body %}
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
</div>
{% endblock %}
Here is a screenshot:
[]
How can I do it so when I go to Account it shows blue?
Thanks guys
Try to match your request URL name with your current URL, you can add active class like this or directly to the tag.
<ul>
<li class="{% if 'profile' in request.resolver_match.url_name %} active {% endif %}">
Profile
</li>
</ul>
This should solve your question:
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
create a common component like this
<angular-anchor-tag [url]="link1"></angular-anchor-tag>
angular-anchor-tag.html
<div>
<a href="url" class="link" (click)="highlightFunction($event)">
<div>
angular-anchor-tag.ts
#Input url;
highlightFunction(event){
//remove all the highlight classes from links
.$("link").removeClass("highlight");
add highlight class to the events target
event.target.addClass('highlight');
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have a Jekyll blog here and have implemented navigation between adjacent posts (next and previous) at the bottom of each post page. I wrote a quick script that adds a hover effect on each image.
Here is the script:
$(document).ready(function() {
// animate home page post links on hover
$('.post-summary').hover(
function() {
$(this).animate({opacity: 1}, 100);
},
function() {
$(this).animate({opacity: .7}, 100);
}
);
});
It works on the main page fine but when you go to another post page it does not work at all, even though it is still included in the page source.
Why is this?
Your actual _layouts/post.html layout as layout as layout...
In fact it's a layout problem.
Actually your layout layout doesn't load your script.
Change front matter for layout: "default" and deleted include header and include footer.
Your layout layout now reads like this :
---
layout: default
---
<article class="article">
<section class="article-cover">
<img class="header-image" src="{{ page.headerImage }}" alt="{{ page.headerAlt }}">
<span>
<h3 class="post-id">{{ page.postId }}:</h3>
<h1 class="post-title">{{ page.title }}</h1>
<h4 class="post-date">{{ page.date | date: "%Y.%m.%d" }}</h4>
</span>
</section>
<div class="content-wrapper">
<section class="article-body center" itemprop="articleBody">
{{ content }}
</section>
</div>
</article>
{% if page.next %}
{% assign next = page.next %}
{% endif %}
{% if page.previous %}
{% assign previous = page.previous %}
{% endif %}
<div class="next-previous">
<ul class="adjacent-list">
{% if page.next %}
<li>
<a class="post-link" href="{{ next.url | absolute_url }}">
<div class="post-summary"
style="background-image: url({{ next.headerImage }}); background-position: center; opacity: .7;">
<div class="title-container">
<h3 >{{ next.postId }}:</h3>
<h1>{{ next.title }}</h1>
</div>
</div>
</a>
</li>
{% endif %}
{% if page.previous %}
<li>
<a class="post-link" href="{{ previous.url | absolute_url }}">
<div class="post-summary"
style="background-image: url({{ previous.headerImage }}); background-position: center; opacity: .7;">
<div class="title-container">
<h3 >{{ previous.postId }}:</h3>
<h1>{{ previous.title }}</h1>
</div>
</div>
</a>
</li>
{% endif %}
</ul>
</div>
I am using JQuery's countdown plugin in my Django application. I set up the countdown init script in a JQuery document.ready callback function, and I can see the javascript load when I check the network tab in Chrome's web inspector, but the plugin doesn't show up. I logged the element to the web console to make sure that it existed when I tried to call JQuery.countdown's .countDown method that kickstarts the plugin. It does in fact exist, but there is just empty space in between the tags. There are also no errors in the console.
Scripts "both JQuery and JQuery countdown being loaded"
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/menu.js"></script>
<script type='text/javascript' src="/static/js/user_actions.js"></script>
<script type="text/javascript" src="/static/js/jquery.countdown/jquery.countdown.js"></script>
<!-- JQUERY Countdown -->
<script type="text/javascript">
$(document).ready(function () {
var clock = $("#countdown");
console.log(clock);
$("#countdown").countDown("2017/12/01", function (event) {
console.log("CLOCK WORKS");
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
});
</script>
HTML
{% block content %}
<div id='billboard' class='flexslider billboards'>
<ul class='slides'>
{% for billboard in billboards %}
<li class='slide' style="background-image: url('{{ billboard.image }}');">
<div class='transparent-overlay'></div>
<div class='container'>
<div class='slide-content'>
<h1>{% inplace_edit "billboard.header" %}</h1>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="home-sub-container">
<div class="col-xs-8" style="border: 1px solid lime;">
<div id="daily-sales-tracker" style="height: 500px; background-color: lightgray; margin-bottom: 30px;"></div>
<div id="additional-plugins" style="height: 500px; background-color: lightgray;"></div>
</div>
<div class="col-xs-4 red-alerts">
<p>RED ALERTS</p>
<div class="styled-divider">
<div class="color"></div>
<div class="no-color"></div>
</div>
{% for alert in red_alerts %}
<div class="red-alert">
<div class="fa-container">
{% if alert.font_awesome_one %}
<i class="fa {{ alert.font_awesome_one }}"></i>
{% endif %}
{% if alert.font_awesome_two %}
<i class="fa {{ alert.font_awesome_two }}"></i>
{% endif %}
{% if alert.font_awesome_three %}
<i class="fa {{ alert.font_awesome_three }}"></i>
{% endif %}
</div>
<p class="alert-title">
{{ alert.title }}
</p>
<a href="{{ alert.link }}" class="alert-links">
DOWNLOAD
</a>
</div>
{% endfor %}
<div id="countdown">
</div>
</div>
</div>
<div id='sections' class='home-sections'>
{% for section in sections %}
<div class='section-wrapper {% cycle "white" "dark" %}'>
<div class='container'>
<div class='row'>
{% inplace_edit 'section.content|safe' adaptor='tiny' %}
<div class='clear-both'></div>
</div>
</div>
</div>
{% endfor %}
<div class='clear-both'></div>
</div>
{% endblock %}