I am trying to use the bootstrap carousel, but cannot really get it to work. I have a list with pictures I want to loop through and show in the carousel. I cannot show all the pictures since the "activate" (line 3 in the text below) only should be applied for the first picture (and not for the other ones in the list). This mean that I need some kind of restriction regarding the "activate". Probably something like "only use activate for the first loop-through". I'm not quite sure how to write that. I'm writing in javascript (newbie) and having a really hard time incorporating it in the html file.
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active">
<img src="{{ url_for('static', filename='images/' + image.image) }}" alt="{{ name }} product image" class="d-block w-100">
</div>
{% endfor %}
</div>
You are using some template language here, I think Django.
You need to put class active in if block.
{% if image in images is first %} active {% endif %}
{% with %} {% endwith %}
I think you can use with syntax. This example is just logic you need to follow.
Just find the correct syntax. Other you do not need to change.
Related
I would like to implement that on my sidebar dropdowns but Liquid being pretty new to me, I don't seem to find a way to do it.
On JS I would have a for loop closing all the items that contains the 'open' class for example then add that class to the single item.
I wish I add tried more but I feel like I don't have the 'Liquid logic' yet..
<a href="{{ link.url }}"
class="mobile-nav__link mobile-nav__link--top-level"
id="Label-{{ child_list_handle }}"
{% if link.active %}data-active="true"{% endif %}>
{{ link.title }}
</a>
<div class="mobile-nav__toggle">
<button type="button"
aria-controls="Linklist-{{ child_list_handle }}"
{% if link.active or link.child_active %}aria-open="true"{% endif %}
class="collapsible-trigger collapsible--auto-height {% if link.active or link.child_active %}is-open{% endif %}">
{% include 'collapsible-icons' %}
</button>
The interesting parts are the {% if link.active %}
First, I'm not sure what's setting link.active to true,
Then I also don't know how I would select these dropdowns element to use them in a loop.
Now what I would like to do is to have a for loop that would set link.active to false on all dropdowns and then setting it to true on the single element.
You don't have to give me the total answer, just a way for me to figure out how to select all the elements and what causes link.active to be true.
Thanks in advance.
picture of said dropdowns
When the first page is loaded, I want the user to come across all the music, but if he selects a list from RadioButton, I only want the music in that list, but the javascript function doesn't work.
Let me add that I don't normally know JavaScript, but I need to use it.
<div style = "margin-top : 100px;"class = "container">
{% for table in tables %}
<input type="radio" name="list1" onclick="mL('{{table}}')"> {{table}}
{% endfor %}
<div align="center">
<audio class="my_audio" controls="controls" autoplay="autoplay" style="width:500px;"></audio>
<ul>
{% for table in tables %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="{{table}}" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
{% endfor %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="default" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<script> function mL(x)
{
{% for table in tables %}
if (x=={{table}})
document.getElementById("{{table}}").style.display="block";
document.getElementById("default").style.display="none";
{% endfor %}
else
document.getElementById("{{table}}").style.display="none";
document.getElementById("default").style.display="block";
return;
}
</script>
This isn't a Django issue, it's purely about the JavaScript (or should be).
Here are some problems with your code:
In HTML, the id attribute should be unique in the document. You seem to have many <a> tags with the same id. Use the class attribute, or even better use your own data attribute like data-table.
You can code generate JavaScript using Django template tags like you have, but I think it's a bad idea because it's very hard to reason about how the code will work. Don't use {% for %} inside the <script> block.
JavaScript doesn't use spaces for code blocks like Python does. You need to use braces { } instead.
Once those things are fixed, use the debugging console in your browser (F12 in Firefox and Chrome). It will let you see any syntax errors, and you can even run code in the console to see how things like document.getElementById work.
Is this code enough to preload images on my website? I use Django template langue for the loop, instead of javascript, like there. Is there any advantage of using javascript? Is my way as good as the javascript way?
{% for marker in markers %}
<img src="{{ marker.image }}" style="display: none"/>
{% endfor %}
On our online fashion store http://www.showstyle.lu I am the webmaster trying to improve the user experience perspective. I finally managed to use a toggle tool for our filters (click on any category: e.g. Homme) as you can see if you click on Couleurs/Tailles etc all the filters appear (they used to be displayed permanently which didn't look aesthethic).
Now, the issue is upon selection of filters the page is then reloaded with a new url to filter the products. Each time the filters then toggle back up of course and it's redundant to have to reclick each one and see what filter's one chose.
Is there a way I can either make the center content container refresh like php where the rest of the site remains static? Or otherwise can I at least force the toggle to remain open if the url has "%filter%*****" in it ?
We are using a ecommerce platform called SEOshop so I don't have access to every script/index page on the website but I have access to a large part.
The filters work on generation from backend so in the html code the placeholders are simply:
{% for filter in collection.filters.custom %} <a class="filtertitle" href="javascript:;">
<p>{{ filter.title }}</p>
</a>
{% for value in filter.values %}
<div class="filterbox2">
<div class="sidebar-filter-item clearfix">
<input id="filter_{{ value.id }}" type="checkbox" name="filter[]" value="{{ value.id }}" {% if value.active %} checked="checked"{% endif %} />
<label for="filter_{{ value.id }}">{{ value.title }}{% if not value.active and value.has_count %} <span>({{ value.count }})</span>{% endif %}</label>
</div>
</div>
{% endfor %}
{% endfor %}
</form>
</div>
Another topic, is it possible to have the toggle open a popup instead? Something to look like this: https://dl.dropboxusercontent.com/u/5636466/showstyle/mockup_filters.png
Thanks for any help, I will continue my research and post my attempts/anything I find :)
If you want to reload only a specific part of the website then there is no way to do it only with php. What you are trying to do will require ajax requests to load the data without reloading the page and javascript to determine where it should be displayed (I would recommend looking into a framework like angular for that). I don't know anything about your site backend but I'm guessing this is not a trivial change and will require you to learn about such things.
I have an html file which I am rendering with jinja2 in python, which has some div sections like
<div id="imdb">
{{imdb_output}}
</div>
Now even when the value of imdb_output variable is returned None from its function in python file, as expected HTML still displays the div section although with no content, but with its css!
But what do I need to do so that even the empty div section does not appear if imdb_output has no values to display?? Do I need to add some JS?
Please help!
Here is a screenshot of the problem:-
http://imgur.com/qVfk2
use this
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}
You should read jinja2 documentation for template designers
Just check if imdb_output is empty:
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}