How to change the color of a parent div relative to the size of the childs

Question

How to change the color of a parent div relative to the size of the childs

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have div parent and 4 div's child and would like to change the color of border of div parent relative to div child size. To exclarge better put below an image with an example of what I speak.

Thepinkandredcolorsarejustforexamplethesizeofdivschildandtheborderontheleftbelongstodivparent.Iwouldliketobeansweredinjquery.

Edit:

Followtherequestedcode.ItisthebordergrayofdivparentthatIwanttochangethecolorwiththesizeofitsdivschild.

$(".timeline").css({
	"border-left" : "5px solid lightgray",
	"padding-left" : "10px"
}).children().css({
	"margin-bottom" : "5px",
	"padding" : "5px",
	"border" : "2px solid black"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="timeline">
	<div>
		<bold name="10 3 2017 9:10">Block 1 </bold>
	</div>
	<div>
		<bold name="10 3 2017 10:30">Block 2 </bold>
	</div>
	<div>
		<bold name="10 3 2017 12:30">Block 3 </bold>
	</div>
	<div>
	    <bold name="10 3 2017 13:50">Block 4 </bold>
	</div>
</div>

Edit 2:

The second div starts then ends the margin.

html jquery css

asked by anonymous 03.10.2017 / 13:15

2 answers

1

Interesting functionality!

You could do it like this:

const divs = [].slice.call(document.querySelectorAll('body > div'));
// máximo de children
const max = Math.max.apply(Math.max, divs.map(div => div.children.length));

divs.forEach(div => {
  div.style.borderColor = 'rgba(255, 0, 0, ${div.children.length / max})';
});

div {
  border: red 2px solid;
  padding: 10px;
  background-color: #eee;
  margin: 5px;
}

div > p {
  display: inline-block;
}

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
</div>
<div>
  <p>1</p>
</div>
<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<div>
  <!-- nada -->
</div>

The idea is to use the opacity of rgba . Knowing the div that has more descendants we can do the counts between 0 and 1

03.10.2017 / 13:34

Show the number of rows and columns Javascript How does the firebase for sending notifications work?

score 1 · Accepted Answer

Use css to do this.
leave your divs from inside class .timeline with position: relative

div.timeline > div {
  position: relative;
}

and with a pseudo elemento ::after or ::before you can make a fake border and style it as you like and css

div.timeline > div::before {
  content: '';
  width: 5px;
  height: 135%;
  background-color: #000;
  position: absolute;
  left: -17px;
  top: -2px;
}

See this JSFiddle that I did as an example.