In my template, I am iterating over a django variable using a for loop.
There is a Carousel within the td.
What I want to do is add an overlay over the td with class CAROUSEL and not to anything within the If condition. if animal.available exist. Maybe execute javascript and add class that would add an overlay over the td. Basically, There should be a difference between the carousels where animal.available and where it doesn't.
Basically, when inner html tag is populated by Django variable, I want the parent html to be overlayed.
template.html
<table>
<td class="carousel">
{% for animal in stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
<!-- Add overlay over td ->
{% endif %}
</div>
{% endfor %}
</td>
</table>
Overlay css
.overlay {
background-color: rgba(0,0,0,0.5);
}
How do I add overlay class to td with class carousel if django variable animal.available exist? There are many such td's in the table, generated dynamically, so adding ID to the elements is also not possible.
No javascript needed. Just close your carousel td, start a new one, put your content in the new td.
<table>
<td class="carousel">
{% for animal in animal.stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
</td><td> add your stuff here
{% endif %}
</div>
{% endfor %}
</td>
</table>
I solved it by adding a dummy hidden div with class exist if the django variable animal.available existed and then added an overlay on the parent TD with class carousel as below.
<table>
<td class="carousel">
{% for animal in stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
<div class="exist" style="display:none"></div>
{% endif %}
</div>
{% endfor %}
</td>
</table>
Jquery
$(document).ready(function(){
var x = $('.exist');
x.parents('.carousel').addClass('overlay');
});
Related
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>
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
});
Inside my well i have a list that splits to left and right. I want to place users in that list. I want to order them like: Firs one in the left list, second one in the right, third one in the left list, forth in the right... So every second user would be placed in the right list. Here is the html of the well:
<div class="well">
<h4>Users</h4>
<div class="row">
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User1
</li>
<li>User3
</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User2
</li>
<li>User4
</li>
</ul>
</div>
</div>
</div>
Now i cant do it just with classic for loop, because if i do as the below code shows, it would load the whole second list many times:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
<li> {{ user }}
</li>
</ul>
</div>
{% if forloop.counter|divisibleby:2 %}
<div class="col-xs-6">
<ul class="list-unstyled">
<li>{{ user }}
</li>
</ul>
</div>
{% endfor %}
</div>
I would probably have to use forloop.counter|divisibleby:3 but i dont know how to load just users in the second unordered list , without the whole list being copied for every user. Maybe soulution would use javascript too?
I hope you understand my problem :D
Other thing you can do to avoid sending 2 additional arrays is to use divisibleby in this manner.
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if not forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
EDIT: I figured it out, after two days of trying it just came to me. If anybody is dealing with the same problem; I handled it in views:
def index(request):
users = User.objects.all()
odd_users = users[::2]
even_users = users[1::2]
return render(request, 'index.html', {'users': users, 'odd_users': odd_users, 'even_users': even_users})
And then i just loaded it in template:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in odd_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in even_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
Cheers!
I'm trying to make a left side navigation bar where by-default categories are listed and while clicking on a category, the subcategories are shown under it (in sort expanding sub-menu). I'm working in Django and relevant portions of my code are below. When I include the JS code, none of the links on the page work and when I exclude it, all the subcategories for all categories are shown by-default. I need only categories to be shown by default and while clicking on any, the respective subcategories be shown. What I'm missing here?
JS CODE: at the bottom of the page, loaded after the footer:
{% block theme_script %}
<script src="{% static " pinax/js/theme.js " %}"></script>
<script>
$(function() {
$(".nav-collapse88").hide();
$(".nav-collapse89 a").click(function(e) {
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
</script>
{% endblock %}
My HTML:
My CATEGORYINDEX.HTML TEMPLATE:
{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}
{% catindexlist as catindexlisted %}
{% block body %}
<div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;">
<div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;">
<h2><center>Categories</center></h2>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}</li></div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum"><li style="padding-right:10px;">{{forum.name}}</li></div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
MY SITE_BASE.HTML:
<div class="col-md-2" style="border-right:solid;text-align:right;height:99%;padding:0 0 0 0px;" id="sidebar"> {% include "categoryindex.html" %} </div>
All who answer will win a magical Pony! Thanks,
Using the concept of parent siblings you can do that as:
Code Snippet
$(function() {
$(".category-name a").parent('li').parent('div').siblings('div').hide();
$(".category-name a").click(function(e) {
e.preventDefault();
$(".category-name a").parent('li').parent('div').siblings('div').slideUp();
if(!($(this).parent('li').parent('div').siblings('div').is(":visible"))){
$(this).parent('li').parent('div').siblings('div').slideToggle();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}01</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}01</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}02</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}02</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}03</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}03</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
Hi I'm trying to middle vertical align my site's logo with my navigation link list. I've tried adding "vertical-align: middle" to my div columns, but nothing happens. Right now my logo and my navigations look kinda weird and is just floating around. Any help on this would be great.
HTML:
<div class="sixteen columns clearfix">
<div class="five columns">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if settings.use_logo %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" />
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
<div class="eleven columns">
<div id="mobile_nav"></div>
<div id="nav">
<ul id="menu">
{% for link in linklists[settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
{% else %}
<li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}class="active"{% endif %}{% endfor %}>{{ link.title }}
<span class="arrow">∨</span></a>
<ul>
{% for link in linklists[link.handle].links %}
{% if linklists[link.handle] == empty %}
<li>{{ link.title }}</li>
{% else %}
<li>{{ link.title }} <span class="arrow"> ></span>
<ul>
{% for link in linklists[link.handle].links %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
Column CSS:
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
}
Here's how it currently looks like:
Need to move it to the middle:
Specify the parent container as position: relative or position: absolute.
Specify a fixed height on the child container.
Set position: absolute and top: 50% on the child container to move the top down to the middle of the parent.
Set margin-top: -yy where yy is half the height of the child container to offset the item up.
(http://phrogz.net/CSS/vertical-align/)
Either relatively position .columns (position: relative) or absolutely position it (position: absolute)
Give .column a height value
Absolutely position .column (position: absolute), and give it top: 50%
Give .column a top margin of the negative of half its height value (margin-top: -yy where yy is half of the height of .column)
As you have already used vertical-align: middle in class; so by just adding display: table-cell property your problem must solved.
Note: There are many ways to align content or div vertically.. using line-height (condition is only apply for first line), padding-top, table-cell and giving absolute position.