How to find xpath to the image element - javascript
I have a below HTML Code which points to a SVG (image) Element on the screen
<div _ngcontent-c25="" class="chart-div ng-star-inserted">
<!---->
<!----><div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
<svg width="80" height="80">
<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
</g>
</svg>
<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;"><div class="attrLabel" style="font-weight: bold;">Germany</div><div class="attrCount">693</div><div class="attrPercent">51.4%</div></div></div>
<!----><p _ngcontent-c25="" class="filtered-text ng-star-inserted">
no value filtered
</p>
<!---->
<!---->
<!---->
</div>
I am able to find the element till the div tag but if I try to access the element in SVG and its child chrome is unable to find the element
XPath : //div[#class='pie-div ng-star-inserted'] - this works perfectly until div
but if I try to access its child element SVG and path it's not locating it at all (though code is visible on screen)
Xpath I've tried : //div[#class='pie-div ng-star-inserted']/svg/g/path1
on-screen the element would look like as in the below screenshot.
The element is actually a svg image on screen (Pie Chart) once we hover on that it displays a popup of the corresponding location data
your xpath needs to be //div[#class='pie-div ng-star-inserted']/*[name()='svg']/*[name()='g']/*[name()='path'] - found by searching for xpath + svg
There is another syntax //div[#class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path - and using the NSresolver argument, you can make it work as follows
const xpath = "//div[#class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path";
let result = document.evaluate(
xpath,
document,
prefix => prefix === 'svg' ? 'http://www.w3.org/2000/svg' : null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
for (var i = 0; i < result.snapshotLength; i++) {
console.log(result.snapshotItem(i).getAttribute('fill'));
}
<div _ngcontent-c25="" class="chart-div ng-star-inserted">
<div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
<svg width="80" height="80">
<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
</g>
</svg>
<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;">
<div class="attrLabel" style="font-weight: bold;">Germany</div>
<div class="attrCount">693</div>
<div class="attrPercent">51.4%</div>
</div>
</div>
<p _ngcontent-c25="" class="filtered-text ng-star-inserted">
no value filtered
</p>
</div>
Related
Set Click event in a SVG button
How do I set a .click() event in this SVG? To click automatically. <span style="margin-right: 15px;" id="play"> <svg class="speechace-playback-30" aria-label="Start playing example audio" aria-pressed="false" role="button" viewBox="0 0 30 30" tabindex="0" style="position: relative; cursor: pointer; vertical-align: middle; outline: 0px;"> <circle cx="15" cy="15" r="14" style="fill: rgb(69, 97, 26); stroke: rgb(69, 97, 26); stroke-width: 1;"></circle> <path d="M19.5,15 L12.75,11.102885682970026 L12.749999999999998,18.897114317029974 z" style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round;"></path> </svg> </span>
write this in your js code. Try to cover svg with div tag
document.getElementById("IdOfYourSvg").addEventListener("click",(event)=>{
//your logic
})
Close menu when click detected outside
I'm trying to close a menu when the user clicks outside of the element. I have tried many solutions from Stack overflow but none of them work for me. The user should be able to click on the menu button (3 dots), which then shows the menu. Then if they click outside of this, it should close each time.
https://jsfiddle.net/Lzeukhcj/1/
Here is my code and what I have tried:
Javascript
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = () => {
popup.style.display = "block";
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
SCSS
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
.tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.tweet-username {
font-size:15px;
color: #526470;
}
.middle-dot{
margin-left: 3px;
margin-right: 3px;
}
.time {
font-size: 15px;
color: #526470;
}
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick{
margin-right: 3px;
}
.dots-popup-container {
position: relative;
.dots {
width: 18px;
fill: red;
}
.popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
.popup-option {
display: flex;
margin-bottom: 20px;
p {
color: #526470;
}
.popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
}
}
}
HTML
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>
When you click the dots to open the popup, your document click event listener is checking whether the target is a child of the popup. Since the toggle is not, the modal is opened, then closed.
You can fix this by using Event.stopPropagation() to prevent this click event from being captured by the document click event listener when the dots are clicked.
Your JS should be:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
Demo:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
/* compiled from scss */
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
}
.user-info .tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.user-info .tweet-username {
font-size: 15px;
color: #526470;
}
.user-info .middle-dot {
margin-left: 3px;
margin-right: 3px;
}
.user-info .time {
font-size: 15px;
color: #526470;
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick {
margin-right: 3px;
}
.dots-popup-container {
position: relative;
}
.dots-popup-container .dots {
width: 18px;
fill: red;
}
.dots-popup-container .popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
}
.dots-popup-container .popup .popup-option {
display: flex;
margin-bottom: 20px;
}
.dots-popup-container .popup .popup-option p {
color: #526470;
}
.dots-popup-container .popup .popup-option .popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
<div class="tweet-container">
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>
Making the div follow autoresize textarea? [closed]
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
PROBLEM
I have a comment textarea which i made text responsive thanks to Jack Moores npm package https://www.jacklmoore.com/autosize/. Now this all works fine but i have a div which is usually bottom:75px; and when textarea autoresizes it updates the hight of textarea. This is where the problem occurs i would like to update also bottom of that div for example to keep it from going over textarea.
HTML
<form action="#">
<textarea
type="text"
id="text"
spellcheck="false"
placeholder="Type message..."
maxlength="50"
></textarea>
</form>
<div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
<div class="three_dots_messages_menu">
<div class="three_dots_messages_menu_buttons">
<div class="send_tip_button all_message_buttons" >
<span>Send tip</span>
<svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15" style="margin: 2px 0 0 2px ;">
<path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
</svg>
</div>
<div class="chat_rules_button all_message_buttons" >
<span>Chat rules</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
<path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
</svg>
</div>
<div class="muted_users all_message_buttons" >
<span>Muted users</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
<path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
</svg>
</div>
<div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
<span>Close chat</span>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
</svg>
</div>
</div>
</div>
CSS
.three_dots_messages_menu {
position: fixed;
width: 15%;
height: 130px;
min-width: 232px;
bottom: -250px;
background-color: #363636;
border-radius: 5px;
opacity: 0;
transition: 0.3s;
}
#text {
border: 1px solid #d4af37;
background-color: #343333;
position: fixed;
bottom: 15px;
margin: 0 auto;
font-size: 17px;
width: 13%;
padding: 12px 30px 5px 10px;
color: white;
border-radius: 5px;
min-width: 190px;
min-height: 33px;
height: 33px;
max-height: 100px;
outline: none;
resize: none;
}
SOME INFORMATION AND QUESTIONS
I need to keep it position absolute not just fix this with margins.
I know i can do this modifying the js of autosize but i am honestly
not skilled enough to completely understand everything that is going
on.
Is there a way to maybe manipulate the DOM so i can make div children of that textarea ?
Do you know maybe easy js fix ?
JS for autoresize is too big you can view it from the website
It's best if you simply move the menu to a point before the textarea and remove its fixed positioning, so that it automatically remains in place.
If you want to adapt it dynamically, Autosize triggers an event where you can hook some code to update its position.
var $text = jQuery('#text'),
$menu = jQuery('.three_dots_messages_menu'),
baseDistance = 75;
$text.on( 'autosize:resized', function() {
$menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})
IE & Firefox rendering incorrectly but not in Chrome, Safari & Chromium browsers
All, There is a double walled circle and a text. Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. The issue can be seen using the below code. Any help or advice on how to get it fixed in IE & firefox is much appreciated. <div class="col-xs-4 col-sm-2"> <div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;"> <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g></g></g> </svg> <span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span> </div> </div>
The styling you have added to the divs pushes the number outside of the SVG. I would just avoid the problem in the first place by using an SVG <text> element that you can position inside the svg. You might have to fiddle with the x and y values a bit. ps: There's also a <circle> element you could use instead of a <path>. <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g> </g> </g> <text x="47%" y="49%" style="font-size: 32px;">400</text> </svg>
I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50% and display: flex:
.circle {
border: 2px solid #888;
border-radius: 50%; /* make the border a circle */
display: flex; /* align the content vertically and horizontally */
align-items: center; /* same */
justify-content: space-around; /* same */
}
<div class="circle" style="width: 100px; height: 100px;">
<div class="circle" style="width: 90px; height: 90px;">
400
</div>
</div>
JS draw an arrow pointing from one div to another
I have the following code:
<div id="parent">
<div class="child" id="air1">Medium 1</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
<style>
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
}
</style>
I want to draw an arrow from #air1 into #glass using an svg. I added the following code into the div to draw an example arrow:
<svg width="300" height="100">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M30,150 L100,50"
style="stroke:red; stroke-width: 1.25px; fill: none;
marker-end: url(#arrow);"
/>
</svg>
I don't want the arrow pointed in a random direction though, I want it to point into #glass like this:
Also, how would I go about drawing a less steep arrow like this as well:
How can I do this?
You can achieve that by using positioning (inserting the svg into the first section and set it to position: absolute;) and adjusting the offset of the path element. To make the arrow pointing down, just use a negative value for the second value of the path description attribute.
For more information see w3schools about path.
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
position: relative;
}
svg {
position: absolute;
left: 0;
}
<div id="parent">
<div class="child" id="air1">Medium 1
<svg width="400" height="200">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M-600,-10 L300,195" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" />
</svg>
</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>