I am using twig and JavaScript to create a slideshow, but I need to add a unique css class to each div inside of a wrapping div. The divs inside are all dynamically created and I can't edit the html. I was hoping to either do this with twig or JavaScript.
Any help is much appreciated.
For example:
<div class="slider-wrapper">
<div>image</div> (These are the divs I need to add a unique css class to)
<div>image</div>
<div>image</div>
</div>
Here's a JavaScript solution (I know nothing of Twig). This should be fairly self-explanatory:
// select divs that are children of the wrapper
var divs = document.querySelectorAll(".slider-wrapper > div");
// loop over them
for (var i = 0; i < divs.length; i++) {
// add the unique class using whatever class-naming system you prefer
divs[i].classList.add("c" + (i+1));
}
.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: blue; }
<div class="slider-wrapper">
<div>image</div>
<div>image</div>
<div>image</div>
</div>
I've added the c1-3 classes with colours just so that there is something to look at if you click "Run code snippet", but obviously you'd do your own classes.
Note: you had a typo in your html, you need an equals sign after class.
I'm using jquery.
Suppose, you've a html like this:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
You can add classes to your children like this:
let children = $('.parent').children().addClass("hello");
Example: Jsfiddle
(You can do an inspect element to check that hello has been added to the child classes)
Related
Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
I want to append multiple copies of div with id hello into the div with id container. How do I do this using javascript?
<div id="container">
</div>
<div id="hello">
<p>Hello</p>
</div>
Using cloneNode and appendChild.
Since ids should be unique in a document, I switched things to use a class hello instead.
function makeCopy() {
const target = document.getElementById("container");
const source = document.querySelector(".hello");
const clone = source.cloneNode(true);
target.appendChild(clone);
}
.hello {
padding: 3px;
margin: 3px;
border: 1px dotted orange;
}
<div id="container">
This is the container.
</div>
<button onclick="makeCopy()">Add a clone of hello above</button>
<div class="hello">
<p>Hello</p>
</div>
https://www.w3schools.com/jsref/met_node_appendchild.asp
check this out, it will solve your problem, BUT use a class for the tag not an ID. IDs are unique, a class is for multiple elements.
you can call class in CSS like this
.className {
/*CODE*/
}
you can use append() method:
$(document).on('click', function(){
$('#container').append( $('#hello') );
});
#va{
color:yellow;
}
#v{
color:pink;
}
<div id = "va">
<div id ="v">my name is </div>
<div>khan</div>
</div>
i have tried using document.getelementbyid("va").style.color="yellow"; but the color of element v is not changing i want to change its color by the id of parent i want it to be done through javascript as it is the simple example of the situation in which i am traped plz help
$("#va>#v").css("background-color","green")
#va{
color:yellow;
}
#v{
color:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "va"> asdasd
<div id ="v">my name is </div>
<div>khan</div>
</div>
Use > the direct child selector.
The selector will select the direct child(with id v) of element with id va and change color to red
With jquery you have two options, using the .children() method or using .find() method, take a look in this snippet:
$("#va").children().css("color", "red");
//$("#va").find("#v").css("color","blue");
#va {
color: yellow;
}
#v {
color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
<div id="v">
my name is
</div>
<div>
khan
</div>
</div>
If you want to change the color of ID v, use getElementById("v") rather that getElementById("va")
document.getElementById("v").style.color = "yellow";
#va {
color: yellow;
}
#v {
color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="va">
<div id="v">my name is </div>
<div>khan</div>
</div>
you can change the class attribute of any element and create the css to what you need using:
document.getElementById("va").setAttribute("class", "yellow-class");
css would bw something like:
.yellow-class{
color: yellow;
}
Colors styles only affect child nodes if the child node's color property is set to initial.
#va{
color:yellow;
}
#v{
color:initial;
}
However, this will remove the default pink color from your tag. There are lots of different ways you could solve this problem but the simplest would be to just create a new style rule and simply use js to add a class to #va to change the style.
#va.yellow #v {
color: yellow;
}
And use this js.
document.getElementById("va").className += " yellow";
I have a scenario where I've multiple div with class navToME on/off. Now what I've trying to do here is if a div has a class off, then remove the class navToMe.
E.g.,
if($('.navToME').hasClass('off')){
$('.off').removeClass('navToME');
}
My HTML structure is like this:
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
What's happening right now is it just checks the first div with that class and returns false. Is there a way anyone can suggest so that I could just this for all classes inside my HTML? Thanks in advance!
You can simply use Class Selector to identify element with multiple class then use removeClass()
$('.off.navToME').removeClass('navToME');
$(function() {
$('.off.navToME').removeClass('navToME');
});
.on {
background-color: green;
}
.off {
background-color: red;
}
.navToME {
background-color: grey!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
I have this code:
<div id="parent">
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
I've put the CSS bellow to stop display the first child of div#parent and I'm trying to display with a reaction via JavaScript.
CSS
div#parent div:first-child div:first-child {
display: none;
}
How can I display the the second div#Container1 also?
Because if I use the code bellow, it displays only the first div#Container1.
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block";
}
</script>
Thanks in advance.
If you have access to CSS change it to:
div#parent > div:first-child > div:first-child {
display:none
}
:first-child does not specify its immediate first child, you can use > to specify that and avoid second Container1 from using that style rule.
With this change you can use your existing javascript. and remove id from the child div at a later time without affecting this.
http://jsfiddle.net/oz5g3bxs/
And of course, use unique id as already mentioned by everyone
If you can't change the IDs (and I suggest you try), you can use. This is only relevant if both divs were not set to display block beforehand.
function appear() {
var containers = [];
var parent = document.getElementById("Container1");
containers.push(parent);
containers.push(parent.children[0]);
for (var i = 0; i < containers.length; i++) {
containers[i].style.display = "block";
}
}
http://jsfiddle.net/wxsgpeuk/2/
Note this is purely to get it done in your situation as Joe mentioned in the comments: duplicate IDs is just doing it wrong.