How do add a tooltip in Bootstrap v5 via Javascript? I'm tying to add a tooltip and popover to the same element and it seems the best route is to enable both them via JS.
The tooltip added via html works as expected:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<span class="input-group-text mb-3" id="basic-addon2" title="If you want us">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</span>
Next I tried to add the tooltip via JS:
var options =
{
title : "If you want us",
};
var responseTeamMemberSpanElm = document.getElementById("basic-addon2");
var tooltipResponseTeamMember = new bootstrap.Tooltip(responseTeamMemberSpanElm,options );
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<span class="input-group-text mb-3" id="basic-addon2" >
<!-- info icon with circle around: from https://icons.getbootstrap.com/icons/info-circle/ -->
<svg "basic-addon2-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</span>
The look of the tooltip looks different. Also, I can put my cursor on the grey background, the tooltip works as expected but when I hover over the circle "i", the tooltip stops working. After I hover over the circle "i", I see the tooltip get moved to the bottom of the screen and the tooltip doesn't work even if I hover elsewhere and come back to the background.
All the older answers I found are using the JQuery version of bootstrap.
Is this a bug or am I doing something wrong?
If you define css propertry pointer-events: none; in all child of tooltip element then its working fine but this may be create a problems on click, hover, focus and other events listener.
So re-initialize tooltip method when hide tooltip by hide.bs.tooltip method in Bootstrap-v5.
Source: https://getbootstrap.com/docs/5.0/components/tooltips/#events
Try below snippet.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
this.addEventListener('hide.bs.tooltip', function () {
new bootstrap.Tooltip(tooltipTriggerEl)
})
return new bootstrap.Tooltip(tooltipTriggerEl)
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div class="container mt-5">
<div class="row">
<div class="col-sm-12">
<span class="input-group-text border position-relative" id="basic-addon2" data-bs-toggle="tooltip" data-bs-placement="top" title="If you want us">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
</span>
</div>
<div class="col-sm-12 my-3">
<span class="input-group-text border position-relative" id="basic-addon3" data-bs-toggle="tooltip" data-bs-placement="top" title="If you want us">
<input type="text" class="form-control me-2" placeholder="First Name">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
</svg>
</span>
</div>
</div>
</div>
Related
Hi I wanted to print a specific div that has a canvas consisting of a chart. I had written a script to print the specific div in my HTML body tag but it returns everything except the graph.
This is what I want:
This is what I get:
How can I achieve the results shown in image 1? Thanks in advance.
This is my code for the script:
<script>
//Print specific div
function printFunc() {
var tagname = $('#div-report').prop("tagName").toLowerCase();
var attributes = "";
var attrs = document.getElementById("div-report").attributes;
$.each(attrs, function(i, elem) {
attributes += " " + elem.name + " ='" + elem.value + "' ";
})
var divToPrint = $('#div-report').html();
var head = "<html><head>" + $("head").html() + "</head>";
var allcontent = head + "<body onload='window.print()' >" + "<" + tagname + attributes + ">" + divToPrint + "</" + tagname + ">" + "</body></html>";
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write(allcontent);
newWin.document.close();
};
</script>
This is my code for the front-end HTML(in case you need it):
<body class="d-flex flex-column">
<div class="container p-2 pb-0 mt-5 pt-3" id="admin-dashboard">
<h2 class="pt-3 pb-5 display-6">Report Summary</h2>
<div class="row g-2 mb-5 justify-content-md-end">
<div class="col-auto">
<button type="button" onclick="printFunc()" class="btn btn-outline-primary" style="--bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .75rem;">Print</button>
</div>
</div>
</div>
<div class="container pb-0" id="div-report">
<div ALIGN=CENTER>
<b>
<h6>Report Summary Generated on DD/MM/YYYY
</b>
</div>
<br />
<div ALIGN=CENTER>
<p>
Demo
</p>
</div>
<a class=" nav nav-item text-decoration-none text-muted" href="cstaff-report-generation.php">
<i class="bi bi-arrow-left-square me-2"></i>Go back</a>
<div class="row row-cols-2 row-cols-md-3 g-3 py-3">
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z" />
</svg>
Total Sales Revenue
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-receipt" viewBox="0 0 16 16">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
</svg>
Total Number of Order Placed
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
</svg>
Total Number of Customer Visited
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-diagram-2" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM3 11.5A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z" />
</svg>
Best-Selling Menu Item
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-info">
<div class="card-body">
<h6 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
</svg>
Peak Hour
</h6>
<p class="card-text my-2">
Demo
</p>
</div>
</div>
</div>
</div>
<br />
<h4 class="border-top fw-light pt-3 mt-2">Menu Performance</h4>
<div class="container p-2 pb-0 mt-2 mb-5 pt-3" style="text-align: center;">
<canvas id="mpChart"></canvas>
</div>
</div>
Hi I know there is a way to make this code shorter. I'm repeating myself and it's practically the same. It's supposed to be the profile page where I show my picture, and social media:
const Profile = () => {
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
<a href="https://www.linkedin.com/in/paulasierra7/" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
<a href="https://github.com/paulasierra7/proyecto_react" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://www.instagram.com/paulasierra7/">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
</div>
</div>
)
}
export default Profile
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Thanks!!
You can make a component that has an anchor element on top of an svg, since you have repeated this multiple times. Make a component like this:
const ClickableSvg = ({link, svg}) => {
return (
<>
<a href={link.url}>{link.text}</a>
{svg}
</>)
}
Then you could do something like this:
const Profile = () => {
const data = [...] //this contains objects with a link and svg.
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
{data.map((d)=> <ClickableSvg link={d.link} svg={d.svg} />)}
</div>
</div>
)
}
export default Profile
Where data in the code above is an array of objects that contain a link and svg property.
I use the SortableJS library (SortableJS/Sortable) to reorder pictures. I placed buttons: Next and Previous on each pictures to facilitate movement in desktop mode.
The buttons work well but the problem is that the SortableJS: OnEnd function (which manages the processing of the indexes: oldIndex and newIndex) is not executed.
How can I make my buttons work so that sortableJS can get the new indexes to organize the photos?
Here is my code
<div class="pictures">
<div class="picture-item">
<img src="...mypicture.jpg...">
<div class="btn-nav">
<button type="button" class="sort-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-left-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</button>
<button type="button" class="sort-next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</button>
</div>
</div>
...
</div>
// Array populated from dropzoneJS upload
var pictures = [{filename:test.jpg, position:0},{filename:test2.jpg, position:1}, ...]
var sortable = new Sortable(document.getElementById('pictures'), {
onEnd:function(evt)
{
// Function work with drag and drop not button click !
console.log(pictures);
let oldIndex = evt.oldIndex,
newIndex = evt.newIndex;
pictures.splice(newIndex, 0, pictures.splice(oldIndex, 1)[0]);
pictures.forEach((picture, index) => picture.position = index);
updateHiddenField(pictures);
}
});
$(document).on('click', '.sort-prev', function(){
var current = $(this).closest('.picture-item');
current.prev().before(current);
});
$(document).on('click', '.sort-next', function(){
var current = $(this).closest('.picture-item');
current.next().after(current);
});
I am trying to add addEventListener in one of the span tag inside my header.php file but its not working I don't know why. I tried several times. I am working on wordpress theme. I am successfully imported the file. when i put alert('helllo word) outside addEvent listener it works but inside the addEvent listener nothing is working. Please help.
This is my code
header.php
<div class="header__menu">
<span class="header__menu_btn">
<svg class="header__menu_icon" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-filter-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<!-- <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg> -->
</div>
</nav>
</header>
<div class="header__sidenav">
<div class="header__sidenav_content">
<h1 >Hello From Drawer</h1>
</div>
</div>
header.js
const headerMenuIcon = document.getElementsByClassName("header__menu_btn");
const headerSideBar = document.querySelector("header__sidenav");
headerMenuIcon.addEventListener("click", function () {
headerSideBar.style.width = "100%";
alert("Hello world");
});
I am working on an Angular application and I have the following problem. Into a component view I have something like this:
It shown a people list, as you can see next to each person there is a little funnel icon used to filter the output of another component using the selected person (this filter behavior works fine). Once that the funnel icon related to a specific person is clicked it change color to indicate that the filter is active on the specific person.
The problem is that clicking on the funnel icon related a specific person in my list, all the funnel icons of all the persons change color, in this way:
I was handling it in this way into my component view:
<p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"
filter="filter" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
<ng-template let-person pTemplate="item">
<div class="ui-helper-clearfix fc-event" style="background-color: transparent; color:black !important;border: 0px !important;">
<div class="container">
<div class="row">
<div class="col-sm">
<img src="assets/img/people/person-icon.png" style="display:inline-block;float: left; margin:2px 20px 2px 2px" width="48">
<div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>
</div>
<div class="col-sm">
<div class="people-operations-icons">
<button class="btn" (click)="onClickFilter(person, $event)">
<svg *ngIf="isFilterByPersonActive == false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
<svg *ngIf="isFilterByPersonActive == true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</ng-template>
As you can see to choose the empty or the full funnel icon I am doing:
<button class="btn" (click)="onClickFilter(person, $event)">
<svg *ngIf="isFilterByPersonActive == false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
<svg *ngIf="isFilterByPersonActive == true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
</svg>
</button>
So I am using this isFilterByPersonActive variable defined in my typescript code. This variable is false by default and when the user click the funnel it change status and become true.
The problem is that in this way it works on all the member of my list and not only on the selected one. How can I activate this behavior only on the selected item?
Create a component for single persona item and use it for rendering personas items in list. All of your items will have their personal state which u can mutate with its own value/data