<div>
<a><img src="../photos/vacances01.jpg"></a>
</div>
<div>
<a><img src="../photos/vacances02.jpg"></a>
</div>
i would like to create a loop to read all the images in the file called vacances01, vacances02...
and famille01, famille02...
with for exemple the possibility to defina a part the word "vacances", or "famille", or "cars"....
like i specify a word which go after '../photos/' then it loops the numbers with 'i++' and it write at the end '.jpg'
and it generate that in loops :
<div>
<a><img src="../photos/vacances01.jpg"></a>
</div>
...
do you understand me ?
thank you in advance, my level is not very high
First of you have to understand that HTML is not a programming language in the way you think it is. HTML is, as the name suggests, a markup lanuage, used for designing websites. The "i++" is used in languages like C++ and Java. JavaScript could be used for such a task. How, I do not know.
Related
In the following markup, what is the best BEM approach?
This?:
<footer role="footer">
<footer class="footer__inner">
<div class="footer__left">© Some text</div>
<div class="footer__right">Some text</div>
</footer>
</footer>
OR this?:
<footer role="footer">
<footer class="footer__inner">
<div class="footer__inner__footer__left">© Some text</div>
<div class="footer__inner__footer__right">Some text</div>
</footer>
</footer>
Or none of them are right and you know a better way?
Thanks
You want to have clean reusable blocks. Ask yourself which part you might want to reuse.
Multi level nesting of blocks are frowned upon. And that's for a good reason. In case of reusability there should only be one block as root reference. Everything below that one block is, from a bem syntactic point of view, simply an element of that block. Not a sub-block, not a sub element, but only an element.
So, BEM doesn't care about your HTML structure. It's much more a question of what purpose a block or an element has.
I can't really tell from your example what the purpose of your nested footers might be, but it looks to me as if you consider the role attribute of your outer footer element as part of BEM-naming. But it's not. Keep in mind the idea of separation of concerns. role="footer" is HTML semantic. You should not use it as BEM naming reference because you might want to change that HTML attribute one day and then your BEM semantic would go up in smoke.
So, here's what I would do.
Let's say you want your outer footer to be the reusable element then you might want to name your classes like this (just as an example):
<footer class="footer" role="footer">
<footer class="footer__textbox">
<div class="footer__text footer__text--left"> <!-- left as modifier -->
<div class="footer__text footer__text--right"> <!-- right as modifier -->
</footer>
</footer>
Now you can take your footer and use it in any appropriate section of the page and anyone reading your code can get grasp an idea about the purpose of this css structure.
First variant looks fine for me.
Second is wrong as you shouldn't reflect DOM structure in class names. See https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2
Markup suggest by LongHike is also good.
I need to conditionally close tag in my Thymeleaf template. Say, during iterating some collection of elements I have to wrap series of some of them into single <div>:
<div>...element1, element2, element3...</div>
<div>...element4...</div>
<div>...element5, element6...</div>
This could be archived if some way of conditionally tag closing would exist. But I can't obviously write </div th:if="...">. If it would be jsp I could easily write something like:
<%if (condition) {%></div><%}%>
Any ideas how to solve this issue?
EDIT To be precise, my elements aren't just strings, they are complex inner html blocks.
I think it's better represent the data as separate lists, as you mentioned in your previous answer.
But even for curiosity, there is an ugly workaround to achieve something similar to <%if (condition) {%></div><%}%>, as you asked.
The trick is to generate the tag as escaped text:
<th:block th:if="${openTagCondition}" th:utext="'<div>'" />
<th:block th:if="${colseTagCondition}" th:utext="'</div>'" />
This is just out of curiosity. I do not recommend using this workaround as it's pretty unreadable, harms maintainability and you can leave unbalanced tags.
I've found the workaround. Series of blocks which should be wrapped into single <div> should be represented as separated lists inside model. Say, it I have Element class which describes my element block. So, my model should be like:
List<Element> elementGroups
and I have to create double loop for it:
<div th:each="group : ${elementGroups}">
<th:block th:each="element : ${group}">
...
</th:block>
</div>
move the conditional logic up one layer
<body th:each="...">
<div></div>
</body>
take a look at the documentation here: http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#using-theach
I'm trying to allow custom "template code" within the source code editor. My code snippets would always look like {* anything here *}. It mostly works, but if used inside an HTML tag things gets scrambled.
I'm already using allowedContent: true, when starting CKEDITOR.
Example:
<p style="{* some "short code" of mine... *}">Text</p>
turns into
<p style="{* some " short="" code"="" of="" mine...="" *}"="">Text</p>
And
<p {* tet_pos_is_inside *}>Fuss</p>
into
<p {*="" tet_pos_is_inside="" *}="">Fuss</p>
Any advise ?
Thanks,
Sebastian
My advise would be to never use them inside tags, it sounds like a nightmare to configure. What is the requirement you are trying to fill with those?
You could go around this issue with pre- and post processing using classes, data attributes and/or custom attributes. For example you could use something like his:
<p class="tet_pos_is_inside_val-12345 foo-val-12345">I love horses</p>
<p data-tet_pos_is_inside="12345" data-foo="">I love bunnies</p>
<p tet_pos_is_inside="12345" foo="">I love cats</p>
Well,
apparently there was a simple solution to solve my current problem:
<p style="{* some 'short code' of mine... *}">Text</p>
works ! Note the use of singe-quotes inside the double quotes.
IOW, as long as there is a <tag attr="val"> then val can be anything except containing more double quotes.
Thanks for the comments.
I am sorry if this is a stupid question but i am new to programming. I just want to know how to extract text between two tags. For example, if i have the html below:
<div class="s1">
Hi
</div>
<div class="s2">
Hello
</div>
The expected output is to extract the #href in class s1 and the text Hi.
I know that this is easy in JavaScript with the JQuery Library. In PHP it is also possible (php jquery like selector engine)
I have a list of elements that I pass as an argument into the render method. I have no experience in HTML though and was wondering how I'd print all elements in the list?
I assume that you are using playframework 1.x
if you call render(myElements) from your controller, an myElements is a list of strings, it will look something like this in your view.
...
<ul>
#{list myElements, as:'elem'}
<li>&{elem}</li>
#{/list}
</ul>
...
I will advice you to read the documentation on playframework.org. It is really good and easy to read. You will probably learn a lot. If you want to learn html, I think w3schools.com is a good starting point.
if using play 1.2.x with Groovy templates:
<ul>
#{list items:myList, as:'element'}
<li>${element.name}</li>
#{/list}
</ul>