I am building an website and trying to use template tag. And the template is below:
<template class="company-template">
<div>
<img>
<div></div>
<button></button>
<button></button>
</div>
</template>
I want to add class for the elements in the template tag. However, as I know in BEM methology, the names of classes should be dependent to upper element. Should I write the codes just like below and modify or add classes depending on the upper element in JS?
<template class="company-template">
<div class="company-template__company">
<img class="company-template__company__logo">
<div class="company-template__company__description"></div>
<button class="company-template__company__report">Report this company</button>
<button class="company-template__company__chat">Chat with this company</button>
</div>
</template>
Or should I write codes depending on where the template will be used like below?
<template class="company-template">
<div class="search-result__company">
<img class="search-result__company__logo">
<div class="search-result__company__description"></div>
<button class="search-result__company__report">Report this company</button>
<button class="search-result__company__chat">Chat with this company</button>
</div>
</template>
In addition, if the template should be used in many other elements, how should classes be?
I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!
Is there a way to dynamically assign a title attribute in an element so that when the page loads it automatically be assign with a title attribute with the value of an h2 element on top of it?
I'm guessing that it's possible with jQuery/javascript but i am not too sure how.
Here's the code i started with:
<a><h2>Website</h2></a>
<div class="indent">
1st Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Website"</b>.
</div>
</div>
<a><h2>Portal</h2></a>
<div class="indent">
2nd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Portal"</b>
</div>
</div>
<a><h2>Stackoverflow</h2></a>
<div class="indent">
3rd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Stackoverflow"</b>
</div>
</div>
And the jsfiddle: https://jsfiddle.net/Rgohing/1yrzhpxw/19/
Thank you in advance, I would greatly appreciate any help that i can get.
The code you need is very dependent on the structure of your html, so I have assumed the following:
Your <div class="contentbox"> will always be in a container ( in your example, its <div class="indent"> but the code will work no matter what the class is)
The <h2> will always be surrounded by an <a> tag
Based on this, the jQuery you need to get the heading is:
$(function() {
$('div.contentbox').attr('title', function() {
return $(this).parent().prevAll("a:first").text();
});
});
This works as follows:
For each div with class contentbox...
this code gets its parent (e.g. the container div with class indent)...
then gets all previous siblings until it finds the first one that is an <a> tag...
and returns the text it contains (which is actually the heading text).
The returned value is added as the title on the div with class contentbox
Here it is in a working snippet that also outputs the heading text to the console so we know its getting the right text.
$(function() {
$('div.contentbox').attr('title', function() {
var headingtext = $(this).parent().prevAll("a:first").text();
console.log(headingtext); // just for testing - output the text it finds
return headingtext;
});
});
.indent
{
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a><h2>Website</h2></a>
<div class="indent">
1st Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Website"</b>.
</div>
</div>
<a><h2>Portal</h2></a>
<div class="indent">
2nd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Portal"</b>
</div>
</div>
<a><h2>Stackoverflow</h2></a>
<div class="indent">
3rd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Stackoverflow"</b>
</div>
</div>
You can also achieve this using javascript.Just add you h2 tag inside indent div.Below is the fully working code.
<div class="indent">
<a>
<h2>Website</h2>
</a>
1st Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title
that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Website"</b>.
</div>
</div>
<div class="indent">
<a>
<h2>Portal</h2>
</a>
2nd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title
that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Portal"</b>
</div>
</div>
<div class="indent">
<a>
<h2>Stackoverflow</h2>
</a>
3rd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title
that has the value of the h2 element that was on top of it. For this instance, it's
<b>title="Stackoverflow"</b>
</div>
</div>
<script>
let contentbox = document.querySelectorAll('.contentbox');
for (i = 0; i < contentbox.length; i++) {
contentbox[i].setAttribute('title', contentbox[i].parentElement.firstElementChild.innerText);
}
</script>
You just need to assign element's html/text to title attribute. like below
$('h2').each(function(){
var val = $(this).text();
$(this).parent('a').siblings('.indent').children('.contentbox').attr("title", val);
})
The best approach would be to make the changes at the source, meaning editing the HTML or code generating the HTML. A client-side approach should be a last resort.
Let's say you wanted to add the attribute to the div.indent element. The code to add a title attribute using jQuery would be:
$('div.indent').attr('title', function() {
return $(this).prev().text();
});
$(function() {
$('div.indent').attr('title', function() {
return $(this).prev().text();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><h2>Website</h2></a>
<div class="indent">
1st Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Website"</b>.
</div>
</div>
<a><h2>Portal</h2></a>
<div class="indent">
2nd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Portal"</b>
</div>
</div>
<a><h2>Stackoverflow</h2></a>
<div class="indent">
3rd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Stackoverflow"</b>
</div>
</div>
If, however the goal is to add title attribute to the inner div here is how you might approach that:
$('div.contentbox').attr('title', function() {
return $(this).closest('div.indent').prev().text();
});
$(function() {
$('div.contentbox').attr('title', function() {
return $(this).closest('div.indent').prev().text();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><h2>Website</h2></a>
<div class="indent">
1st Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Website"</b>.
</div>
</div>
<a><h2>Portal</h2></a>
<div class="indent">
2nd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Portal"</b>
</div>
</div>
<a><h2>Stackoverflow</h2></a>
<div class="indent">
3rd Div<br><br>
<div class="contentbox">
Content of div with a class of contentbox, this div should dynamically be assign with the attribute of title that has the value of the h2 element that was on top of it. For this instance, it's <b>title="Stackoverflow"</b>
</div>
</div>
I have a dynamically generated snippet of HTML which could look something like this (but may have many different levels of nesting):
<div class="content">
<div class="thing"></div>
<div>
<div class="thing"></div>
<div class="thing"></div>
</div>
<div>
<div>
<div class="thing"></div>
<div class="thing"></div>
</div>
</div>
<div>
<div class="thing"></div>
</div>
</div>
I would like a CSS expression to select the last element with the class thing that is a (not necessarily direct) child of .content.
:last-child or :last-of-type won't work because they match if the element is the last child (of a certain type) of their parent, in which case it will match more than .thing.
Is there a CSS expression I can use to do this?
The answers to this question suggest that this is not possible in CSS, unfortunately.
I have an issue, when i try to load content into my element, it is always has height = 0, i need element to be sized by content size, is there any suggestions?
There is my template
<template>
<paper-dialog id="dialog" modal>
<h2>{{_computeTitle()}}</h2>
<paper-dialog-scrollable id="main">
<content id="form" select=".content"></content>
</paper-dialog-scrollable>
<div class="buttons">
<content select=".buttons"></content>
</div>
</paper-dialog>
</template>
why are you using a scrollable dialog inside of a dialog? You should use a dialog and give the children the position: relative property.