Hello I am working on my website with multiple pages and I want to do smooth scrolling on a certain page but I don't want to use the html tag because it will only be for this specific page and not the whole website here is my code.
{% if section.settings.display_product_detail_description == false and section.settings.display_product_reviews == false and section.settings.display_shipping_returns == false %}
{% assign tab5_active = true %}
{% endif %}
<div class="scroll-to-table">
<li class = "tab-title">
<a href="#product_attributes_table" class="tab-links {% if tab5_active %} active {% endif %}">
Specs
</a>
</li>
</div>
This is the code for the HTML
div.scroll-to-table{
scroll-behavior: smooth;}
And here is the code for the CSS
At the moment all that the page is doing is a jump and not a smooth scroll. I've tried using ID instead of Class, .scroll-to-table instead of div.scroll-to-table, and changing the element in which I call the CSS from but no luck
We can add scroll-behaviour: smooth to particular page by using javascript IIFE (Immediately Invoked Function Expression). This will add the smooth behaviour to the only page that runs this script.
<script>
(function () {
document.documentElement.style.scrollBehavior = smooth;
})();
</script>
Related
so i just started learning django, i understand the basic tag blocks but it didn't works well on my page. i have page called index.html and question.html
i write like this in index.html
<body>
<div>
<div>
sum content
</div>
<div>
{ % block content % }
{ % endblock % }
</div>
</div>
</body>
and like this in question.html :
{ % extends 'index.html' % }
{ % block content % }
<<my content>>
{ % endblock % }
but the content in question.html didn't show up in index.html. i've checked my setting and didn't have django-stub like in other case.
and if you want to know the structure, it goes like :
djangoProject1
>djangoProject1
>myweb
>static
>templates
-index.html
-question.html
this is my views.py
def index(request):
return render(request, 'index.html')
def question(request):
return render(request, 'question.html')
def formdata(request):
nama = request.POST.get("namaa")
umur = request.POST.get("umur")
komorbid = request.POST.get("penyakit_bawaan")
ruang = request.POST.get("ketersediaan_ruang")
demam = request.POST.get("demam")
lelah = request.POST.get("lelah")
batuk = request.POST.get("batuk")
nyeri = request.POST.get("nyeri")
tersumbat = request.POST.get("tersumbat")
pilek = request.POST.get("pilek")
sakit_kepala = request.POST.get("sakit_kepala")
tenggorokan = request.POST.get("tenggorokan")
diare = request.POST.get("diare")
hilang_cium = request.POST.get("hilang_penciuman")
ruam = request.POST.get("ruam")
sesak = request.POST.get("sesak")
sulit_gerak = request.POST.get("sulit_gerak")
nyeri_dada = request.POST.get("nyeri_dada")
hasil_rekomendasi = request.POST("hasil_rekomendasi")
data_resp = DataResponden(nama=nama, umur=umur, penyakit_bawaan=komorbid, ketersediaan_ruang=ruang, demam=demam,
lelah=lelah, batuk=batuk, nyeri=nyeri, tersumbat=tersumbat, pilek=pilek,
sakit_kepala=sakit_kepala, tenggorokan=tenggorokan, diare=diare,
hilang_penciuman=hilang_cium, ruam=ruam, sesak=sesak, sulit_gerak=sulit_gerak,
nyeri_dada=nyeri_dada, hasil_rekomendasi=hasil_rekomendasi)
data_resp.save()
return render(request, 'question.html')
Thank you in advance!
It looks like you might have some confusion regarding how templates work. index.html is a parent/base template, because it is being extended (through the {% extends 'index.html' %} tag). question.html is a child template, which means if you make no changes, it will inherit everything from index.html.
A child template can override parts of the parent template by using {% block %} tags. So when the webpage is getting rendered, the code from the block in the parent is not used at all (if there was any). When you directly render the parent template, there will be no such replacement since it does not extend anything.
So the rendered HTML for your files should be as follows
index.html
<body>
<div>
<div>
sum content
</div>
<div>
</div>
</div>
</body>
question.html
<body>
<div>
<div>
sum content
</div>
<div>
<<my content>>
</div>
</div>
</body>
So yeah, content in question.html is not supposed to show up in index.html. It works the other way around, with the entire structure of index.html being used for question.html, except for the things you override.
If you want index to have some content by default, you can have code inside the content block. It will be replaced by any child templates if necessary, but when you load just index.html it will still be visible.
If you are actually trying to insert something into index.html, take a look at the include tag. This allows for re-using common sections of the website across webpages. But you would not extend the base template inside any template you are planning to include.
Just remove the spaces in tag blocks everywhere like this:
Change this:
{ % block content % }
To this:
{% block content %}
Similarly with other tag blocks.
I want to create a list of modal popups with a for-loop, each of them displaying different text.
The site is created with Jekyll with the Liquid templating engine.
In particular, I want to create the list of my scientific publications, for each of them with 2 icons: one for the bibtex entry and one for the abstract. This information is stored in a yaml file.
I m following this simple tutorial for modal popups.
The popups work, but the text is the same for all the entries. How is possible to generate independent modal popups?
This is the html
{% for papers in papers %}
{% for content in paper.papers %}
<a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#modal"></i></a>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">{{content.name}}</div>
<button data-close-button class="close-button">×</button>
</div>
<!-- text to display -->
<div class="modal-body">{{content.text}}</div>
</div>
{% endfor %}
{% endfor %}
and this is the Javascript code:
const openModalIcons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
openModalIcons.forEach(icon => {
icon.addEventListener('click', () => {
const modal = document.querySelector(icon.dataset.modalTarget)
openModal(modal)
})
})
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal.active')
modals.forEach(modal => {
closeModal(modal)
})
})
The problem is that all your modals have id="modal", so the selector #modal is probably always selecting the first one. The id attribute should be unique in the entire document.
Something like this should work:
{% for papers in papers %}
{% for content in paper.papers %}
<a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}"></i></a>
<div class="modal" id="paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}">
<div class="modal-header">
<div class="title">{{content.name}}</div>
<button data-close-button class="close-button">×</button>
</div>
<!-- text to display -->
<div class="modal-body">{{content.text}}</div>
</div>
{% endfor %}
{% endfor %}
Instead of the for loop counter, you could also use the paper name as the ID (as long as it's unique), e.g. id="paperModal_{{content.name | slugify}}".
Edit: Edited the snippet to use forloop.counter and account for the nested for loop.
I'm new to Django and I have a problem moving my stuff to the front end of my website.
I want to do fantasy-style website. My main page will display a list of NHL players. These players will be picked by the user and added to their team in order .
My problem is this: I want a popup-style modal to open when a user clicks a player on the main page. This modal would contain a confirmation before this specific player is added to the user's team.
Here is my player model:
class Player(models.Model):
name = models.CharField(max_length=30)
position = models.CharField(max_length=5)
Here is my main page view:
def main_page(request):
players = Player.objects.all()
my_dict = {"players":players}
return render(request, 'my_app/main_page.html', context=my_dict)
Here is my template for the main page:
{% extends "my_app/base.html" %}
{% block body_block %}
<button onclick="document.getElementById({{player.name}}).style.display='block'" class="w3-button w3-black">Open Modal</button>
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById({{player.name}}).style.display='none'" class="w3-button w3-display-topright">×</span>
<p>{{player.position}}</p>
</div>
</div>
{% for player in players %}
<tr>
<th>{{player.name}}</th>
<th onclick="document.getElementById({{player.name}}).style.display='block'" class="w3-button w3-black" width="100%">Open Modal</th>
</tr>
{% endif %}
{% endblock %}
As you can see, I would like the modal popup to display the player's position.
Unfortunately, not only is the modal not working, I have no clue how to make it display attributes of my Player model.
Would anybody know how to modify my html to fix the modal?
Thank you very much for your help!
EDIT: found a very interesting answer on How do I integrate Ajax with Django applications?
My case is this: I've got a Django website, and have implemented functionality to scroll through a list of photos using next- and previous arrow-buttons. This functionality works perfectly if I go to 127.0.0.1:8000, where it looks like this: 1
But on localhost:8000 this functionality does not work, and it looks like this: 2
The relevant template-code looks like this:
<div class="apartment-images">
{% for image in apartment.apartmentimage_set.all %}
<img src="{{ image.image.url }}" alt="Apartment image" class="{% if forloop.first %}active{% endif %}">
{% endfor %}
<div id="left-arrow" onclick="prevImage()"></div>
<div id="right-arrow" onclick="nextImage()"></div>
<div class="ellipses">
{% for i in apartment.apartmentimage_set.all %}<div class="ellipse {% if forloop.first %}active{% endif %}"></div>{% endfor %}
</div>
</div>
And the javascript used to show the next and the previous image:
<script>
let activeImageIndex = 0;
let apartmentImages = $('.apartment-images img');
let dots = $('.ellipse');
function nextImage() {
if (activeImageIndex < apartmentImages.length - 1) {
activeImageIndex++;
} else {
activeImageIndex = 0;
}
changeImage(activeImageIndex);
}
function prevImage() {
if (activeImageIndex > 0) {
activeImageIndex--;
} else {
activeImageIndex = apartmentImages.length - 1;
}
changeImage(activeImageIndex);
}
function changeImage(index) {
dots.removeClass('active');
dots.eq(index).addClass('active');
apartmentImages.removeClass('active');
apartmentImages.eq(index).addClass('active');
}
</script>
Now, as I've said, this functionality works on 127.0.0.1:8000 but not on localhost:8000 on the Google Chrome browser, and it works on both localhost:8000 and 127.0.0.1:8000 on Microsoft Edge browser. I've tried clearing the cookies for the localhost on Chrome.
Any help would be very much appreciated, thanks :)
I found out how to fix this!
I deleted all the buffered images and files in my chrome browser, and now it works on localhost as well :)
Here's how to do so:
https://7labs.io/tips-tricks/clear-site-specific-cookies-cache.html
I am building a web app using flask. I found that I am retying the same thing over and over with a minor edit into everyone of my HTML pages so I want to make it into a template. How can I make it a dynamic template? Below is the code that I use for my ABOUTUS page which is just one line different from my CONTACT page.
About Us Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
Contact Page header:
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="#">WebAPP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Membership</li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">Contact</li>
{% if current_user.is_authenticated %}
<li class="pure-menu-item">Log out</li>
{% else %}
<li class="pure-menu-item">Log in</li>
{% endif %}
</ul>
</div>
</div>
The only change is that I move the menu-item-divided pure-menu-selected line from one line to the other based on what template I am loading. I cannot think of a way to do this dynamically so that I can turn this into a template that I can just extend for every file.
You could just use standard jinja template inheritance as mentioned in comment above.
Docs here: Template Inheritance
Method 1:
Import request method in your routes.py file,
Use jinga if condition to check whether page is pointing to
current url endpoint.
<li class="pure-menu-item{% if request.path == '/contact'} menu-item-divided pure-menu-selected{% endif %}"><a href="/contact" class="pure-menu-link">Contact</a</li>
Tip: You can use flask dynamic url difination {{ url_for('contact') }} instead of hard coding urls.
Method 2: (recommended)
This is not related to flask jinja but does the work as intended in front-end but using JavaScript with jQuery library.
Add this script at the end of the template before closing body tag.
jQuery version
<script>
let current_path = "{{ request.path }}"
if (current_path === window.location.pathname) {
$(".pure-menu-item a[href='"+current_path+"']")
.prop("href", "#").closest('li')
.addClass("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
Vanilla JS (plain js)
<script>
let current_path = "{{ request.path }}"
let current_nav = document.querySelctor("div.pure-menu-item a[href='"+current_path+"']");
if (current_path === window.location.pathname) {
current_nav.setAttribute("href", "#");
current_nav.closest('li').classList.add("pure-menu-item menu-item-divided pure-menu-selected");
}
</script>
What it does?
If the current url matches to the url specfied in navigation above, it adds the menu-item-divided pure-menu-selected class to the div and disables the current url routing by replacing the actual url to #.
Clean and elegant.
Why?
If you use JavaScript you don't have to define hundreds of {% if... %} in back-end, those if statements you defined in back-end will be checked in every pages user loads, additionally you just saved on more ifs and elses to check if loaded page is nav link's page and disable routing by change url to #. Wow you just saved millions of cpu cycles. :-)