How to apply css only to clicked menu wehn menu click? - javascript

<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<c:forEach items="${datelist}" var="list" varStatus="status" >
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight"
aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">${"Day"} ${status.count}</strong>
<small>${list}</small>
</div>
<div class="col-10 mb-1 small">${city.name}</div>
</a>
</c:forEach>
</div>
Above is my code. When 1day is clicked, I want to change the background color corresponding to 1day's div to red.
And when 2day is clicked, I want to return the color of 1day back to blue and change the background color to red only for 2day.
How can I do this?


Have a look at this
CSS could be this
#schedulelist a strong:active { background-color: red }
and you could use checkboxes too in combination with the + selector.
Here I use JavaScript
const schedulelist = document.getElementById("schedulelist");
const items = schedulelist.querySelectorAll("a strong")
const activate = e => {
const tgt = e.target;
items.forEach(item => item.classList.remove("active"));
if (tgt.tagName==="STRONG") tgt.classList.add("active");
};
schedulelist.addEventListener("click",activate)
//schedulelist.addEventListener("mouseover",activate)
#schedulelist a strong { background-color: blue }
/* #schedulelist a strong:active { background-color: red } */
#schedulelist a strong.active { background-color: red }
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">1</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">A</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">2</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">B</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">3</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">C</div>
</a>
</div>

Related

Find Text Value of closest first p using javascript

I have multiple columns like this
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
//get text નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
console.log("p tag value which is inside flip-card-front");
});
}
I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!

regarding your structure
you search closest blog_content, from there search flip-card-front p:
copy[i].addEventListener('click', evt => {
const el = evt.target.closest('.blog_content');
const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});
not tested but should be ok

You you need to do:
Navigate to the necessary node.
For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
Once you have parent, you can lookup any necessary element from it
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
const content = this.closest('.blog_content')
const cardFront = content.querySelector('.flip-card-front p')
const text = cardFront.textContent;
console.log(text)
});
}
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>

Why don't Bootstrap5 scroll areas work in customElements?

I am trying to learn webcomponents and I'm trying to take a simple bootstrap example and turn it into some basic components. A list component and an item component.
I am using the "List Group" example as my template:
https://getbootstrap.com/docs/5.2/examples/sidebars/
For some reason, all the other bootstrap styles work just fine (as long as I don't use the shadowDOM) but the scroll area will not work. There are no errors in the console (the joy of web development), the list just cuts off at the end.
So the output of my static conent (which works) is IDENTICAL (compared it using notepad++) the only difference is that the HTML that makes up the component is wrapped in the cusomeElement tag that I made.
Here is an example you can copy paste into a text file, save as example.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Target Reason Administration
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"></script>
<style>
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
main {
display: flex;
flex-wrap: nowrap;
height: 100vh;
height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.bv-divider {
flex-shrink: 0;
width: 0.5rem;
height: 100vh;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bh-divider {
height: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bi {
vertical-align: -.125em;
pointer-events: none;
fill: currentColor;
}
.scrollarea {
overflow-y: auto;
}
</style>
</head>
<body>
<main class="d-flex flex-nowrap">
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Works without Component</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea overflow-auto">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
</div>
</div>
<div class="bv-divider"></div>
<cpr-category-list>
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Dead when wrapped by component</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
<div id="contentArea" class="border-bottom list-group list-group-flush scrollarea ">
<tbd-category name="ADVANCE" reasoncount="11" description="Notify user when the event is X hours from a completion">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">ADVANCE</strong>
<small class="text-muted">11</small>
</div>
<div id="descr" class="col-12 mb-0 small">Notify user when the event is X hours from a completion</div>
</a>
</tbd-category>
<tbd-category name="AXT_EXP" reasoncount="10" description="Category of codes to explain Expired Alerts">
<a class="lh-sm list-group-item list-group-item-action py-1" style="outline: none;" href="#">
<div class="align-items-center d-flex justify-content-between w-100">
<strong class="mb-1">FTW_EXP</strong>
<small class="text-muted">10</small>
</div>
<div id="descr" class="col-12 mb-0 small">Category of codes to explain Expired Alerts</div>
</a>
</tbd-category>
</div>
</div>
</cpr-category-list>
</main>
</body>
</html>
Just make sure your browser window is small enough to cut off some list items and you should see that the list on the left gets scroll bars while the list on the right (wrapped in a custom element) does not.
I have not included the component itself (it's proprietary) but the result is the same.
I have 2 questions:
why does some styling work inside the custom element and some does not?
how can I get the scrolling to work inside my component?
Thanks everyone for you time and attention.

Bootstrap5 tab content on second tab creates unlimited white space

in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year.
The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the
This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go e.g. to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.
What is the problem?
Actual look:
How it has to be looked:
After some testing i see this:
Code snippet:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-header">
<div>
<ul class="nav nav-pills nav-fill mt-4" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab">
<span><strong>Current Month</strong></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab">
<span><strong>Current Year</strong></span>
</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="month"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-month" id="current-month">Current Month</button>
<button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="monthly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="monthy_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="monthly_training_days"></h2>
<h2 class="card-title text-white" id="monthly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="monthy_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="monthly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Year" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="card-title" id="year"></h2>
<div class="justify-content-end">
<button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button>
<button class="btn btn-info current-year" id="current-year">Current Year</button>
<button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white" id="yearly_training_sessions"></h2>
</div>
<div class="card-body">
<span class="badge chart-label-intervall">Intervall</span>
<span class="badge chart-label-longrun">Longrun</span>
<span class="badge chart-label-speedwork">Speedwork</span>
<span class="badge chart-label-stabilisation">Stabilisation</span>
<span class="badge chart-label-competition">Competition</span>
<span class="badge chart-label-cycling">Cycling</span>
<span class="badge chart-label-swimming">Swimming</span>
<br><br>
<canvas id="yearly_session_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse d-flex justify-content-between">
<h2 class="card-title text-white" id="yearly_training_days"></h2>
<h2 class="card-title text-white" id="yearly_injury_days"></h2>
</div>
<div class="card-body">
<div class="d-flex justify-content-evenly" style="margin-bottom: 18px">
<span class="badge chart-label-training">Training</span>
<span class="badge chart-label-injury">Free</span>
<span class="badge chart-label-free">Injury</span>
</div>
<br>
<canvas id="yearly_training_stats" width="180" height="180"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-inverse">
<h2 class="card-title text-white">Shoes</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="yearly_shoes_stats">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

After a lot of researching and reading i found the solution for this problem.
The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}

It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...
<div class="tab-pane active" id="Month" role="tabpanel">
<div class="row">
<div class="col-md-12">
<div class="row">
With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.

how do i display more than 1 item with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
hello everyone i have made a dropdwon list that displays something on screen when i press a item in it but i need it to display more than 1 thing at a time but i dont know how to do that
<?php
session_start();
if (!isset($_SESSION["userId"])) {
header('Location: ../../auth/login');
die();
}
<div class="d-flex justify-content-center row">
<div class="col-md-10 col-lg-10">
<div class="border">
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row justify-content-between align-items-center mcq">
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row align-items-center question-title">
<h3 class="text-danger"></h3>
<h5 id="complaintHeader" class="mt-1 ml-2">welke lichaamelijke klachten heeft u</h5>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">klachten</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item Maag" href="#" onClick="changeHeader('Maag')">MAAG</a>
<a class="dropdown-item Darmen" href="#" onClick="changeHeader('Darmen')">DARMEN</a>
<a class="dropdown-item Hyperventilatie" href="#" onClick="changeHeader('Hyperventilatie')">HYPERVENTILATIE</a>
<a class="dropdown-item Hartritme-Klachten" href="#" onClick="changeHeader('Hartritme-Klachten')">HARTRITME-KLACHTEN</a>
<a class="dropdown-item Misselijkheid" href="#" onClick="changeHeader('MIsselijkheid')">MISSELIJKHEID</a>
<a class="dropdown-item Keelklachten" href="#" onClick="changeHeader('Keelklachten')">KEELKLACHTEN</a>
</div>
</div>
</div>
<div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
<button class="btn btn-primary d-flex align-items-center btn-danger" type="button">
<i class="fa fa-angle-left mt-1 mr-1"></i>
previous
</button>
<button type="button" class="btn btn-primary">bij klachten</button>
<button class="btn btn-primary border-success align-items-center btn-success" type="button">Next
<i class="fa fa-angle-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
require '../include/footer.php'; //include footer
require '../auth/logout-modal.php'; //include logout modal
?>
<script>
function changeHeader(s){
document.getElementById("complaintHeader")
.innerHTML = "welke lichaamelijke klachten heeft u: " + s;
}
so as you can see in my code i made a dropdown button with a script that when i press something in the dropdown it displays it on screen but i want it to display multiple things

If you want to pass multiple things to changeHeader() function you can pass them as an array and in your function append them to your complainHeader with a map() method or a for loop.
<a class="dropdown-item Maag" href="#" onClick="changeHeader(['Maag','DARMEN','MISSELIJKHEID'])">MAAG</a>
function changeHeader(s){
const yourArray = s;
const Header = document.getElementById("complaintHeader");
yourArray.map(item => {
Header.innerHTML += item;
})
}
you can use for loop instead of map() method.

Changing the image output based on radio button output

Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!

Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">

Categories

Resources