Python Django project - move div class footer into body - javascript

I'm creating a blog with python and django. Most of it has been fine up until i've just tried to create the footer. The footer display's fine on the home page but when you click into the blog post the footer gets constrained by the content container and row div class.
When you look at this in firefox dev inspector and DOM it's showing that my footer div is sat within the content container and row, and not in the body. Most things i've usually managed to find the answer for but this is driving me nuts. I think i'm either missing something or i'm not asking the right question.
I don't understand why it's just the footer div that has been put within the content container / row div and nothing else that is effected in the same way.
Is there anyway to amend this without using jquery / jscript and changing the parentElement node?
If i have to amend this with jscript, where exactly do i have to amend it, and with what?
Thanks
.footer {
height: 50px;
background-color: #000000;
color: #ffffff;
padding: 10px;
text-align: center;
clear: both;
}
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<footer>
<div class="footer">
Copyright &copy 2017
</div>
</footer>
firefox dev inspector image - sat in row div
firefox dev inspector image - moved to body

This could happen if there are opening tags that don't have closing tags. For example, if your blog looked like this,
{% block content %}
<div id="open_tag_1">
<div id="open_tag_2">
{% endblock %}
The tags that you expect to be closing <div class="content container"> and <div class="row"> will actually be used to close <div id="open_tag_1"> and <div id="open_tag_2">.
<footer> will then be inside <div class="row">.

This is the blog post detail page
{% extends 'blog/base.html' %}
{% block content %}
{% if post.published_date %}
{{ post.published_date }}
by Matt Cheetham
{% else %}
<a class="btn btn-default" href="{% url 'blog.views.post_publish' pk=post.pk %}">Publish</a>
{% endif %}
{% if user.is_authenticated %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn btn-default" href="{% url 'post_remove' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
{% endif %}
<div class="postview">
{{ post.title }}
</div>
<p>{{ post.text|safe }}</p>
<div class="comment">
<div class="date">
<h3>Comments</h3>
<br>
<a class="btn btn-default" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a>
<br>
<br>
{% for comment in post.comments.all %}
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.created_date }}
{% if not comment.approved_comment %}
<a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
<a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
{% endif %}
</div>
<strong>{{ comment.author }}</strong>
<p>{{ comment.text|safe }}</p>
</div>
{% endif %}
{% empty %}
<p>No comments here yet...</p>
{% endfor %}
{% endblock %}

Related

Django and waypoints Infinite scroll not working

I have tried all the answers on stack and the infinite scroll is still not working. My home.html is still displaying the pagination. I suspect the problem is with jquery or the js files or with how the static file is loaded?
Here is my home.html:
{% block content %}
{% load static %}
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}">
<div class="media-body">
<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|date:"F d, Y" }}</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>
</div>
{% endfor %}
</div>
<div class="d-flex d-none position-fixed" style="top:35vh;left:46vw">
<button class="btn btn-primary loading">
<span class="spinner-border spinner-border-sm"></span>
Please wait...
</button>
</div>
<!--pagination logic -->
<div class="col-12">
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">next</a>
{% endif %}
</div>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
offset: 'bottom-in-view',
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function () {
$('.loading').hide();
}
});
</script>
{% endblock content %}
In my settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [Path(BASE_DIR, 'static'),]
The directory of my js files.
I have added the following within my base.html at the bottom.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
here is my class based view in view.py:
class PostListView(ListView):
model = Post
template_name = 'blog/home.html'
context_object_name = 'posts'
ordering = ['-date_posted']
paginate_by = 5

Shopify Store Refresh cart content. AJAX request

I have product page on which I have shop now btn. When user clicks on this button, page opens cart drawer with custom ajax template content.
I rewrited click event with my own logic. I use AJAX and send request for adding product by myself. Products are adding but is not showing in the cart drawer. Only after reloading page it is appearing.
Question is to can I refresh cart content? I'm trying to past content template via inner html. But it is looks like not liquid format.
Here is the template
<script id="CartTemplate" type="text/template">
{% render 'banana-stand-cart-top-container' %}
{% raw %}
<div class="drawer__scrollable">
{{#items}}
<div class="ajaxcart__product appear-animation appear-delay-{{animationRow}}">
<div class="ajaxcart__row">
<div class="grid">
<div class="grid__item one-third">
<img src="{{img}}" alt="{{name}}">
</div>
<div class="grid__item two-thirds">
<div class="ajaxcart__product-name--wrapper">
{{{name}}}
{{#if variation}}
<div class="ajaxcart__product-meta">{{variation}}</div>
{{/if}}
{{#if selling_plan_name}}
<div class="ajaxcart__product-meta">{{selling_plan_name}}</div>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{#key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
</div>
<div class="grid grid--full display-table">
<div class="grid__item display-table-cell one-half">
<label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>
<div class="js-qty__wrapper">
<input type="text" id="updates_{{key}}"
class="js-qty__num"
value="{{itemQty}}"
data-id="{{key}}"
min="0"
aria-label="quantity"
pattern="[0-9]*"
name="updates[]">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
</div>
<div class="grid__item display-table-cell one-half text-right">
{{#if discountsApplied}}
<small class="cart__price--strikethrough">{{{price}}}</small>
<span class="ajaxcart__price">
{{{discountedPrice}}}
</span>
{{else}}
<span class="ajaxcart__price">
{{{price}}}
</span>
{{/if}}
</div>
</div>
<div class="grid grid--full display-table">
{{#if discountsApplied}}
<div class="grid__item text-right">
{{#each discounts}}
<small class="ajaxcart__discount cart__discount">
{{this.discount_application.title}} (-{{{this.formattedAmount}}})
</small>
{{/each}}
</div>
{{/if}}
{{#if unitBase}}
<div class="grid__item text-right">
<div class="product__unit-price">
{{{ unitPrice }}}/{{{ unitBase }}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/items}}
{% endraw %}{% if settings.cart_notes_enable %}{% raw %}
<div class="appear-animation appear-delay-{{lastAnimationRow}}">
<label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
<textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{note}}</textarea>
</div>
{% endraw %}{% endif %}{% raw %}
</div>
<div class="drawer__footer appear-animation appear-delay-{{lastAnimationRow}}">
{{#if cartDiscounts }}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.discounts' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
{{#each cartDiscounts}}
<p class="ajaxcart__price cart__discount">
{{this.title}} (-{{{this.formattedAmount}}})
</p>
{{/each}}
</div>
</div>
{{/if}}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
<p class="ajaxcart__price"><span class="tdf-cart-total-parent">{{totalPrice}}</span></p>
</div>
</div>
<p class="ajaxcart__note">
{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}
</p>
{% endraw %}{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartAgree" />
<label for="CartAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}{% raw %}
{% endraw %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% raw %}
<button type="submit" class="btn btn--full cart__checkout{% endraw %}{% if settings.cart_terms_conditions_enable %}{% raw %} cart__checkout--ajax{% endraw %}{% endif %}{% raw %}" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
</button>
</div>
{% endraw %}
Usually, there is some way (js-function) that allows you to rebuild the cart with new items.
You need to check the js-code that is responsible for showing the drawer-cart
So, need fire some event that you can find in your theme.js file. In my case I needed to add this:
document.dispatchEvent(new CustomEvent('cart:build', {
detail: {
cart: cart
}
}));

fadeToggle() does not respect hierarchy in HTML

I'm trying to use fadeToggle () in the comments section of my blog to open the reply form to existing comments. Initially I'm using display: none in CSS to hide both the comments list and the form. The fadeIn/Out actions should be performed by clicking on the 'Reply' link. However, when I click on reply, I go straight to the top of the page and the fade effect doesn't take effect. I reviewed the hierarchy in the html to make sure that the fadeToggle function would be redirected to the correct class, but even so, something is not correct.
html
{% for comment in comments %}
<blockquote class="blockquote">
<p>{{ comment.content }}</p>
<footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} ago |
{% if comment.children.count > 0 %}{{ comment.children.count }} comment{% if comment.children.count > 1 %}s
{% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Reply</a>
</footer>
<div class="comment-reply">
{% for child_comment in comment.children %}
<blockquote class="blockquote">
<p class="mb-0">{{ child_comment.content }}</p>
<footer class="blockquote-footer">Por: {{ child_comment.user }} |
{{ child_comment.timestamp|timesince }}
ago
</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form action="" method="POST">
{% csrf_token %}
{{ comment_form|crispy }}
<input type="hidden" name="parent_id" value="{{ comment.id }}">
<input class="btn btn-secondary" type="submit" value="Reply">
</form>
{% else %}
<p>You must login to reply</p>
{% endif %}
</div>
</blockquote>
{% endfor %}
css
.comment-reply {
display: none;
}
js
<script type="text/javascript">
$(document).ready(function () {
$(".comment-reply-btn").click(function (event) {
event.preventDefault();
$(this).parent().next(".comment-reply").fadeToggle();
})
})
</script>

How to hide and show button after page reload

I am learning jQuery and I have issues on how to hide and show a button during page reload. I tried my code below, it hides and shows the button on click, but when the page loads, the button changes back to former state. This is what I've tried:
Template:
<span class="load-requests-sections"> <!-- Load page if request sent in Ajax -->
<!-- Main -->
<main>
<!-- Container -->
<div class="container-fluid" id="suggested-people-cont" style="position:relative;top:170px;padding-bottom:100px;">
<!-- Row Grid Container -->
<div class="row d-flex justify-content-center">
<div class="col-lg-6 col-md-9 col-12">
{% if following %}
<h6 class="suggested-people-header mb-3" style="font-weight:500;">Following {{ following.count|human_format }}</h6>
{% endif %}
<div class="card news-card mb-2" id="suggested-people-card" style="width:700px;padding:13px;box-shadow:none;">
{% for data in profile_and_button_status %}
<!-- Copy and paste for another post below -->
<div class="row mb-3">
{% if data.0.to_user.profile.profile_pic %}
<a href="{% url 'site:profile-view' data.0.to_user.username %}">
<img src="{{ data.0.to_user.profile.profile_pic.url }}" class="rounded-circle avatar-img ml-4" height="50" width="50" style="border:none;padding:0px;position:relative;top:-1px;object-fit: cover;">
</a>
{% endif %}
<div class="suggestionfrndnamemutual-cont mt-1 ml-3">
<p class="dark-grey-text text-lowercase font-weight-bold">
<a href="{% url 'site:profile-view' data.0.to_user.username %}"><span class="suggestionfrnd-username username dark-grey-text text-truncate" style="">
{{ data.0.to_user.username }}</span></a>
</p>
<p class="card-text" style="position:relative;top:0px;">
<span class="suggestionfrnd-mutual text-muted" style="font-size:13px;">New to Pixmate</span>
</p>
</div>
{% if not data.0.to_user == request.user %}
<div class="mt-2" style="position:absolute;right:30px;">
{% if data.1 == 'not_friend' %}
<a href="{% url 'site:send_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow</span>
</button>
</a>
{% elif data.1 == 'cancel_request_sent' %}
<a href="{% url 'site:cancel_friend_request' data.0.to_user.id %}" class="friend-request">
<button type="button" class="btn btn-amber btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Cancel</span>
</button>
</a>
{% elif data.1 == 'follow_back_request' %}
<!-- CLICK ON THIS BUTTON TO HIDE AND SHOW THE BELOW BUTTON -->
<a href="{% url 'site:accept_friend_request' data.0.to_user.id %}" class="friend-request followback-btn">
<button type="button" class="btn btn-primary btn-sm btn-block waves-effect text-capitalize font-weight-bold p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Follow Back</span>
</button>
</a>
<!-- SHOW THIS BUTTON AFTER PAGE RELOAD -->
<a href="{% url 'site:remove_friend' data.0.to_user.id %}" class="friend-request following-btn" style="display:none;">
<button type="button" class="btn btn-sm btn-block border waves-effect text-capitalize font-weight-bold dark-grey-text p-1" style="box-shadow:none;font-size:13px;width:100px;border-radius:30px;">
<span style="padding-right:10px;" class="ml-2">Following</span>
</button>
</a>
{% endif %}
</div>
{% endif %}
</div>
<!-- Row Grid -->
{% empty %}
{% if owner_of_the_following %}
<div class="container text-center image-post mt-0">
<!-- <img src="{{ '/static/' }}images/photo-camera-img.png" class="mb-3" width="60" height="60"> -->
<p class="dark-grey-text" style="font-size: 28px;">People you're Following</p>
<p class="dark-grey-text">When you follow someone, it will show here.</p>
<a href="{% url 'site:people-suggested' %}" class="btn btn-primary btn-md waves-effect mx-auto my-4" style="box-shadow:none;border-radius:30px;">
<strong>Find People to Follow</strong></a>
</div>
{% else %}
<div class="container text-center image-post mt-0">
<p class="dark-grey-text"><strong>No users</strong></p>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Card -->
</div>
<!-- Column Grid -->
</div>
<!-- Row Grid Container -->
</div>
<!-- Container -->
</main>
<!-- Main -->
</span>
Jquery:
//SEND FRIEND REQUESTS WITHOUT PAGE RELOAD THIS WORKED
$('.load-requests-sections').on('click', '.friend-request', function(event){
event.preventDefault();
var page = $(this).attr('href');
$('.load-requests-sections').load(page);
});
//HIDE AND SHOW BUTTON AFTER PAGE RELOAD RETURN BACK TO OLD STATE WHEN PAGE RELOAD
$('.followback-btn').on('click', function(event){
event.preventDefault();
$('.followback-btn').hide();
$('.following-btn').show();
})
I also tried using localstorage, to show the hidden button after the page reloads, but the old button clicked is still shown. How do I hide the old button after a page reload.
$(document).ready(function(){
var $hidden = $('.following-btn');
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
$('.followback-btn').on('click', function() {
localStorage.setItem('show', true);
window.location.reload(false);
});
})
There seems to be a problem in how you test if the .followback-btn was pressed.
In your second jQuery example, try replacing this line:
localStorage.getItem('show') && $hidden.show();
With this:
if (localStorage.getItem('show')) {
$hidden.show();
$('.followback-btn').hide();
}
This means that if the show variable is set in the local storage, the .following-btn will be shown when the page loads, instead of the .followback-btn one.
Hope this helps.

Navigation on one site using href="#About us" does not work on smaller devices

In my django project, I am trying to build a menu for navigation on one single site. The navigation should be done by href="#about us" The menu has three sizes, one for big screens (PC), one for medium screens (Tablets), and one for small screens (Phones). The navigation works on PC size menu, but does not work on the other ones. To be clear, all of the menus redirects the user to something like mywebsite.com/info#about us, but just the PC menu actually scrolls the site. There, I fill the menus with some content from a database:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
And there is the template for the menus:
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right w3-hide-small" style="width:300px;right:0;top:0;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"><h3>Menu ×</h3></button>
<a class="w3-bar-item w3-large w3-hide-small w3-hide-medium"><h3>Menu</h3></a>
{% block big-menu %}
{% endblock %}
</div>
<div class="w3-bar-block w3-collapse w3-animate-right w3-hide-large w3-hide-medium w3-light-gray" style="display:none;" id="smallSidebar">
<a class="w3-bar-item w3-large"><h3>Menu</h3></a>
{% block small-menu %}
{% endblock %}
</div>
And there I assign ids to content I am linking to in the menu:
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
There are screenshots of working & not working menu:
The problem was caused by two elements (the big content and the small one) having the same id ({{faq.question}}). So, the fix is as following:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block body %}
<h1>Vitosoft - FAQ</h1>
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}big">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
A jquery script will do it, try the following:
$("a").on('click', function(event) {
# Distinguish the a tags with others by adding a class, like $('a.anchor').click
if (this.hash !== "") {
event.preventDefault(); // prevent the default behavior of the link
var hash = this.hash;
$('html, body').animate({ # With just a smooth animation within 800 miliseconds, we scroll towards the target anchor
scrollTop: $(hash).offset().top // we scroll
}, 800, function(){
// window.location.hash = hash; // Optional here
// this will return the part of the URL that follows the # symbol, including the # symbol.
});
} // End if
});

Categories