I have a group of elements that when toggled with the .active class, extend their max-height and animate out. I'm hitting a problem though when removing the .active class, I'm not getting the animation back to the closed state.
document.getElementById("show-all").addEventListener("click", function(e) {
const elements = document.querySelectorAll('.horizontalBarGraphContainer');
elements.forEach((item) => {
item.classList.toggle('active');
});
});
* {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.horizontalBarGraphContainer {
background: #fff;
max-height: 1000px;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
padding: 30px 30px 0;
transition: max-height 1s ease-in !important;
}
.horizontalBarGraphContainer:not(:first-child) {
height: 0;
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
.horizontalBarGraphContainer:not(:first-child).active {
height: auto;
display: block;
max-height: 1000px;
padding: 30px 30px 0;
transition: max-height 0.25s ease-in;
}
<div class="ct TestResultContainer__graph-container">
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Pick A or B</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Car or boat?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Moon, Sun or Car?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
</div>
</div>
</div>
</div>
<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results <!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>
Codepen Example here:
https://codepen.io/serpicolugnut/pen/XYRxVB
The animation works when adding .active to the items and increasing the max-height from 0 to 1000px, but not in the inverse.
The two main things you need to do is:
remove height: 0 from .horizontalBarGraphContainer:not(:first-child)
And as height: auto is the default you can remove that too in .horizontalBarGraphContainer:not(:first-child).active)
adjust the max-height in .horizontalBarGraphContainer:not(:first-child).active
Stack snippet
document.getElementById("show-all").addEventListener("click", function(e) {
const elements = document.querySelectorAll('.horizontalBarGraphContainer');
elements.forEach((item) => {
item.classList.toggle('active');
});
});
* {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.horizontalBarGraphContainer {
background: #fff;
max-height: none;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
padding: 30px 30px 0;
transition: max-height 1s ease-in;
}
.horizontalBarGraphContainer:not(:first-child) {
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.5s ease-out;
}
.horizontalBarGraphContainer:not(:first-child).active {
display: block;
max-height: 300px;
padding: 30px 30px 0;
}
<div class="ct TestResultContainer__graph-container">
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Pick A or B</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1020" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="710" y="0" x="240" height="45" fill="#000">A</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">A</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="950">54</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="950" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="617.9629629629629" y="0" x="240" height="45" fill="#4dbf9d">B</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">B</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="857.9629629629629">47</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="857.9629629629629" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Car or boat?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 170px; position: relative;"><svg width="1080" height="170"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#000">Boat</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Boat</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">58</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end">Your answer</text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="570.8620689655173" y="0" x="240" height="45" fill="#4dbf9d">Car?</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car?</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="810.8620689655173">43</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="810.8620689655173" dy="55" text-anchor="end"></text></g></svg></div>
</div>
</div>
</div>
<div class="horizontalBarGraphContainer active">
<h4 class="crux-component-title">Moon, Sun or Car?</h4>
<div class="ct HorizontalBarContainer">
<div class="ct HorizontalBarGraph">
<div style="width: 100%; height: 250px; position: relative;"><svg width="1080" height="250"><g transform="translate(0, 0)" style="transform: translateY(0px);"><rect width="770" y="0" x="240" height="45" fill="#4dbf9d">Car</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Car</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="1010">35</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="1010" dy="55" text-anchor="end"></text></g><g transform="translate(0, 80)" style="transform: translateY(80px);"><rect width="726" y="0" x="240" height="45" fill="#4dbf9d">Sun</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Sun</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end"></text></g><g transform="translate(0, 160)" style="transform: translateY(160px);"><rect width="726" y="0" x="240" height="45" fill="#000">Moon</rect><text class="ct question-line-1 crux-label-style" fill="#000" width="205" x="0" y="10" height="45" text-anchor="start">Moon</text><text class="ct question-line-2 crux-label-style" fill="#000" width="205" x="0" y="28" height="45" text-anchor="start"></text><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="966">33</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="966" dy="55" text-anchor="end">Your answer</text></g></svg></div>
</div>
</div>
</div>
</div>
<div class="ct TestResultContainer--horizontal-bar--show-all-wrapper"><button id="show-all" class="ct TestResultContainer ct TestResultContainer--horizontal-bar--show-all crux-label-style"><span class="ct TestResultContainer--horizontal-bar--show-all-copy"><span class="ct TestResultContainer--horizontal-bar--show-all-txt active"></span><!-- react-text: 136 --> Toggle Results <!-- /react-text --><span id="show-all" class="crux-icons crux-icons-caret-up-big"></span></span></button></div>
Related
I'm new to programming and currently trying my hand at a project. My code is certainly not good, however, I would like to have a function for my game, with which I can throw a chip in each column, in which I click on the top of the respective button. Is my approach completely wrong or is it possible to work with the current state? Would be glad about tips
body {
background-color: #cecece;
}
h1 {
background-color: rgb(205, 169, 247);
border: 3px solid black;
border-radius: 5px;
padding: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 1px #000000;
}
h3 {
background-color: #fabd68;
border: 3px solid black;
padding: 15px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
width: 400px;
}
.button {
display: inline-block;
padding: 10px 10px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: #e26262;
border: 2px solid;
border-radius: 10px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
background-color: #85e4a1;
border: 3px dotted black;
border-radius: 8px;
padding: 25px;
text-align: left;
width: 600px;
height: 150px;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
margin-left: 900px;
margin-top: -210px;
}
h4 {
background-color: rgb(148, 203, 240);
border: 2px solid black;
border-radius: 5px;
padding: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
width: 900px;
margin-top: 70px;
}
.A {
offset-path: path('M 80 -10 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70');
offset-distance: 0%;
animation: red-ball 1s linear;
animation-iteration-count: 1;
}
#keyframes red-ball {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
.A:hover {
fill: #68fa88;
}
.B:hover {
fill: #68fa88;
}
.C:hover {
fill: #68fa88;
}
.D:hover {
fill: #68fa88;
}
.E:hover {
fill: #68fa88;
}
.F:hover {
fill: #68fa88;
}
.G:hover {
fill: #68fa88;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My first webpage</title>
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<link rel='stylesheet' href='style.css'>
<script src='main.js' charset="utf-8"></script>
</head>
<body>
<svg width="550" height="500">
<path class="line1" d="M 45 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line2" d="M 115 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line3" d="M 185 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line4" d="M 255 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line5" d="M 325 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line6" d="M 395 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<path class="line7" d="M 465 35 l 0 70 l 0 75 l 0 70 l 0 70 l 0 70 l 0 70" stroke="none" stroke-width="3" fill="none" />
<circle class="A"cx="45" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<circle class="B"cx="115" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="C"cx="185" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="D"cx="255" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="E"cx="325" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="F"cx="395" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<circle class="G"cx="465" cy="35" r="30" stroke="black" stroke-width="3" fill="#fabd68" />
<rect class="col1 row1" x="10" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos1/1"cx="45" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col2 row1" x="80" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos2/1"cx="115" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col3 row1" x="150" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos3/1"cx="185" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col4 row1" x="220" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos4/1"cx="255" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col5 row1" x="290" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos5/1"cx="325" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col6 row1" x="360" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos6/1"cx="395" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col7 row1" x="430" y="70" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos7/1"cx="465" cy="105" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col1 row2" x="10" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos1/2"cx="45" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col2 row2" x="80" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos2/2"cx="115" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col3 row2" x="150" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos3/2"cx="185" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col4 row2" x="220" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos4/2"cx="255" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col5 row2" x="290" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos5/2"cx="325" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col6 row2" x="360" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos6/2"cx="395" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col7 row2" x="430" y="140" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<circle style="visibility:hidden" class="Pos7/2"cx="465" cy="175" r="30" stroke="black" stroke-width="3" fill="#fabd68"/>
<rect class="col1 row3" x="10" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row3" x="80" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row3" x="150" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row3" x="220" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row3" x="290" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row3" x="360" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row3" x="430" y="210" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row4" x="10" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row4" x="80" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row4" x="150" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row4" x="220" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row4" x="290" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row4" x="360" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row4" x="430" y="280" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row5" x="10" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row5" x="80" y="350" width="70" height="70"70
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row5" x="150" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row5" x="220" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row5" x="290" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row5" x="360" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row5" x="430" y="350" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col1 row6" x="10" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col2 row6" x="80" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col3 row6" x="150" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col4 row6" x="220" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col5 row6" x="290" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col6 row6" x="360" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
<rect class="col7 row6" x="430" y="420" width="70" height="70"
style="fill:none;stroke:black;stroke-width:5;opacity:1" />
</svg>
</body>
</html>
It's the first time I use StackOverflow, I hope it's right.
I've tried to create a path and run the animation and for the first 2 rows I have invisible circles where I thought that these should then become visible so that a circle remains inside. After several hours I am just completely stumped.
I have this ugly generated code and I want to pick an element and add an additional attribute. I can only use CSS to do this. I tried a few things such as #CHART_1_control div:nth-of-type and nth-child but I seem to be getting lost with all the <g> classes. I'm also not sure if that's the direction I should be heading.
I'm trying to get to the last <g> class and change the three <rect> to include an additional attribute. Is that possible to do?
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
So here we change the fill color just using css on the last 3 rect
Full Code below:
.v-datapoint rect{
fill:blue;
}
<div id="CHART_1_control" style="width:353px;height:200px" class="zenControl">
<div class="uvb-vizframe-container">
<div style="width: 353px; height: 200px; visibility: visible; position: relative;">
<div class="viz-controls-chart-holder viz-controls-common-scrollable" style="position: relative; width: 353px; height: 200px;">
<div class="viz-controls-chart-layer" style="position: absolute; width: 353px; height: 200px; visibility: visible;">
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 100%; width: 100%; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;">
<svg class="v-m-root" focusable="false" tabIndex="-1" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;">
<defs></defs>
<g class="v-m-desc-title">
<title id="UIComp_0-title">An Interactive Column Chart </title>
</g>
<g class="v-m-action-layer-group js-zen-nozoom"></g>
<g class="v-m-decoration-layer-group"></g>
<g class="v-m-background">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="353" height="200" style="fill:transparent"></rect>
</g>
<g class="v-m-title" transform="translate(48.34765625, 24)"></g>
<g class="v-m-legendGroup" transform="translate(329, 24)" role="listbox">
<g class="v-m-legend" transform="translate(0,0)">
<rect class="v-bound" width="0" height="0" visibility="hidden"></rect>
</g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
<g class="v-m-plot" transform="translate(24.34765625, 0)">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="280.65234375" height="126.6" style="fill:transparent"></rect>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="280.65234375" y1="0" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="280.65234375" y2="0" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="126.6" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<clipPath id="plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732">
<rect y="-1" width="281.65234375" height="127.6"></rect>
</clipPath>
<rect class="v-plot-bound v-bound v-zoom-plot" width="280.65234375" height="126.6" fill="transparent"></rect>
<g clip-path="url(#plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732)">
<g class="v-plot-main" role="list" transform="translate(0, 0)">
<g class="v-gridline-group">
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="126.6" x2="280.65234375" y2="126.6"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="84.4" x2="280.65234375" y2="84.4"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="42.2" x2="280.65234375" y2="42.2"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="0" x2="280.65234375" y2="0"></line>
</g>
</g>
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
</g>
</g>
</g>
I have multiple span inside svg text tspan elements are there. I need to count the tspan of each span. According to count i have to restrict the height limit. how to achieve it using jquery.
var count_tspan = jQuery('span text').children().length); // 4
console.log(count_tspan);
<div class="content-inner">
<span id="item-0" class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
aria-disabled="true">
<svg width="84" height="79" viewBox="-0.3791112600718641 0 65.8780487804878 88.875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.8609587374124218">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="0" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan></text></g>
</svg>
</span>
<span id="item-1" class="drag-item ui-draggable ui-resizable drag- item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
aria- disabled="true">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="27" x="50%">Hello</tspan></text></g>
</span>
You need to use find function and length property. Here is solution:
var spans=$('span');
$.each(spans,function(){
console.log($(this).find('tspan').length);
});
var spans=$('span');
$.each(spans,function(){
console.log($(this).find('tspan').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-inner">
<span id="item-0" class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);" aria-disabled="true">
<svg width="84" height="79" viewBox="-0.3791112600718641 0 65.8780487804878 88.875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.8609587374124218">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="0" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan></text></g>
</svg>
</span>
<span id="item-1" class="drag-item ui-draggable ui-resizable drag- item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);" aria- disabled="true">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="27" x="50%">Hello</tspan></text>
</span>
Here is javascript version. You have to iterate through nodeList.
var spans=document.getElementsByTagName('span');
for(i=0;i<spans.length;i++){
console.log($(spans[i]).find('tspan').length);
}
You will have to loop over each span and search inside each span for tspan
Sample
$.each($('span'), function() {
console.log($(this).find('tspan').length)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="content-inner">
<span id="item-0" class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
aria-disabled="true">
<svg width="84" height="79" viewBox="-0.3791112600718641 0 65.8780487804878 88.875" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.8609587374124218">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="0" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan>
<tspan dy="27" x="50%">Hello</tspan></text></g>
</svg>
</span>
<span id="item-1" class="drag-item ui-draggable ui-resizable drag- item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 212px; top: 225px; width: 84px; height: 79px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);"
aria- disabled="true">
<text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="37" y="26.28750228881836" text-anchor="middle" font-size="27px" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.7842624854819976 1.125">
<tspan dy="27" x="50%">Hello</tspan>
</text>
</span>
</div>
#absolute-canvas a {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
border-radius: 100%;
background: black;
}
.deg0 {
transform: translate(12em);
} /* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
<section id="absolute-canvas">
<img src="./images/logoWithShadow.png" id="logo" class="img-responsive animated zoomIn" alt="" title="СП ФИНКИ" />
<div id="nav-container">
<a href='#' class='deg0'></a>
<a href='#' class='deg45'></a>
<a href='#' class='deg135'></a>
<a href='#' class='deg180'></a>
<a href='#' class='deg225'></a>
<a href='#' class='deg315'></a>
</div>
</section>
My current solution works however when the image scales down (decreases in size) I want to keep the circles around the same image. How can I accomplish this?
Image of what I'm trying to accomplish:
The central div is an image that's infact a circle.
Using SVG <circle> elements you can do this:
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
.circle--main {
color: #5E66FF;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke="currentColor" stroke-width="6" fill="currentColor" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
If you want to include an image, you can use a SVG pattern.
body {
margin: 0;
height: 100vh;
display: flex;
}
.circle-container {
flex: 1;
}
.circle {
color: #2F7285;
}
<svg class="circle-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 200 200">
<image x="0%" y="0%" width="200" height="200" xlink:href="http://placehold.it/200x200"></image>
</pattern>
</defs>
<circle class="circle circle--main" cx="50%" cy="50%" r="200" stroke-width="6" fill="url(#image)" />
<circle class="circle circle--one" cx="50%" cy="20%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--two" cx="75%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--three" cx="75%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--four" cx="50%" cy="80%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--five" cx="25%" cy="65%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
<circle class="circle circle--six" cx="25%" cy="35%" r="50" stroke-width="8" fill="currentColor" stroke="currentColor" />
</svg>
Have in mind that since you are using the same shape, instead of creating different elements you could create a SVG Spritesheet and reuse the circle shape with the <use> tag, only if there is no deeper manipulation for each circle element.
I have the following code
<div id="someDiv" style="float: right; margin-right: -350px; position: relative; overflow-x: hidden; overflow-y: auto;">
<svg class="someSvgClass" width="105">
<g>..</g>
<g>..</g>
...
</svg>
</div>
This div contains inside another div with a fixed height.These "g" elements are added dynamically using JavaScript.
So I expect a scroll bar when the no of "g" elements is increased
In IE11 I could able to see the scroll bar when the no of "g" elements are high. But for the same no of elements I was not able to see scroll bar in Firefox and in chrome
anyone please tell me what is gone wrong here
here is a sample fiddle
I'm not an SVG expert, i never used it, but seems SVG doesn't change height. If you set height to the SVG it works: http://jsfiddle.net/u5ymhmht/7/
The practical solution in your js when you add a line, add height of the line to SVG.
p.s. Sorry for the previous misunderstanding.
svg {
height:500px;
}
#Someid {
height: 150px;
overflow-x: hidden;
overflow-y auto;
}
<div id="Someid">
<svg width="105">
<g transform="translate(10,5)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,20)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,35)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,50)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,65)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,80)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,95)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,110)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,125)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,140)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,155)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,170)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,185)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
<g transform="translate(10,200)">
<text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
</g>
</svg>
</div>