I'm pretty new to coding (januari,2021) and with a lot of online searching I'm able to get pretty far but at this point I'm pretty stuck.
setTimeout(function(){
var supbtn = document.createElement("BUTTON");
supbtn.innerHTML = "Support";
supbtn.className = "Support-logout-class";
supbtn.onclick = function(){window.open("LinkToSite","_blank")};
document.body.appendChild(supbtn);
}, 2000);
There is a default wordpress plugin that the company that I work for uses, and as we are in the proces of building a custom site for this use case we want to try and upgrade the current.
(With a lot of succes so far)
Basically there is a default code and I want to add the above stated "button" element at a specific place, currently it's adding inside the "body" and that works perfect!
The code where I want to place it:
<div class="wpws-webinar-summary-content sc-iBEsjs sJWcq">
<div class="sc-fZwumE cyVGPD"></div>
<div class="wpws-webinar-summary-logout sc-gmeYpB fOXvtE">
<svg class="wpws-33" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" title="Verlaat het webinar"><path fill="none" d="M0 0h24v24H0z"></path>
<path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
</div>
</div>
I want the generated button to appear before: class="wpws-webinar-summary-logout"
(why before?, because if I'm right the code "" isn't set, as in it can change between pages. And I know for sure "wpws-webinar-summary-logout" isn't going to change)
But I just can't seem to find the right search term for this,
and when I think I'm close I don't quite seem to understand it yet.
Any, tips, tricks, examples, someone can give to me?
Many thanks in advance!
Gr. Ian
You can use insertBefore() to inject an element before another element, like this for example:
setTimeout(function(){
// Create button element
var supbtn = document.createElement("BUTTON");
supbtn.innerHTML = "Support";
supbtn.className = "Support-logout-class";
supbtn.onclick = function(){window.open("LinkToSite","_blank")};
// Find the element that we'll use as reference to inject our button
var webinar_summary_logout = document.querySelector('.wpws-webinar-summary-logout');
// Get the parent element
var parentDiv = webinar_summary_logout.parentNode;
// Inject the button before our referenced element
parentDiv.insertBefore(supbtn, webinar_summary_logout);
}, 2000);
<div class="wpws-webinar-summary-content sc-iBEsjs sJWcq">
<div class="sc-fZwumE cyVGPD"></div>
<div class="wpws-webinar-summary-logout sc-gmeYpB fOXvtE">
<svg class="wpws-33" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" title="Verlaat het webinar"><path fill="none" d="M0 0h24v24H0z"></path>
<path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
</div>
</div>
I usually use insertAdjacentElement to have fine control on where to insert elements (there are some shortcuts but I try to always use that one for consistency)
var supbtn = document.createElement("BUTTON");
document.querySelector('.wpws-webinar-summary-logout').insertAdjacentElement('beforebegin', supbtn)
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
Select that element and then i assume you have selected it and gave a name like const node = document.queryselector(“something”) node.before(paste element here) Or node.after(element here)
So not sure I'm following 100%. You want to add a programmatically-generated button in div.wpws-webinar-summary-content and before div.wpws-webinar-summary-logout (as the second child of the parent element)?
Several ways to do this:
https://developer.mozilla.org/en-US/docs/Web/API/Element <- check out the Web API - getting familiar with Element (and DOM) traversal within JS is super helpful. Lots of specific ways to implement this by modifying children, innerHTML (not recommended), etc. (Edit: several others answered while I was typing this - some of the other suggestions are also documented there including: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement!)
Another approach involves adding a placeholder element where you want along with a unique identifier (ID attribute). You can alternately hide (display: none) or otherwise append the desired button into this placeholder element. Assuming your CSS is correct, the placeholder element shouldn't cause too many problems with your surrounding elements (don't give it the same classes, etc.).
Cheers!
Related
I am parsing an xml string and display it as a tree in d3.js. I can build the whole tree in the 'enter' step, but now I want to make it interactive and pull out the configuration into an update step. I'm following https://stackoverflow.com/a/24912466 to implement the general update pattern but I can't seem to set the attribute to the g element outside the enter step:
const svg = d3.select("#canvas");
const xmlAsText = `
<root attrib1="foo" att2="foO">
<child1 attrib1="ba">zwei</child1>
<child2>eins</child2>
</root>`;
treeDataXml = (new DOMParser()).parseFromString(xmlAsText, "text/xml");
let hierarchy = d3.hierarchy(treeDataXml.children[0], d => d.children);
nodesData = d3.tree()(hierarchy);
var myGroups = svg.selectAll("g").data(nodesData.descendants());
myGroupsEnter = myGroups.enter().append("g")
// 1) works
//myGroupsEnter .attr("class", "x");
// 2) doesn't work
myGroups.select("g").attr("class", "x");
console.log(document.getElementById("canvas").childNodes[0].attributes[0])
alert(document.getElementById("canvas")
.childNodes[0].attributes.length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg id="canvas"></svg>
with 1) I get
<body>
<svg id="canvas">
<g class="x"></g>
<g class="x"></g>
<g class="x"></g>
</svg>
</body>
but with 2) it's just:
<body>
<svg id="canvas">
<g></g>
<g></g>
<g></g>
</svg>
</body>
I would expect that with myGroups.select("g").attr("class", "x") the previously entered <g>s will all be selected and have their attribute class set to "x". Why doesn't this work? How can I fix this?
Selections are immutable, myGroups is an empty selection: it doesn't contain any DOM elements yet. As this selection is the update selection, this makes sense, there is nothing to update.
The selection myGroupsEnter contains the newly created elements. Entering elements does not modify myGroups, this remains an empty selection. This explains why myGroupsEnter.attr("class", "x"); works and myGroups.select("g").attr("class", "x"); does not.
D3 v3 and earlier added newly entered elements in the update selection, which is why some examples might be misleading, but as this behavior was not explicit it was removed
Often you want to combine the entered and updated elements into one selection, you can use:
let combined = myGroups.merge(myGroupsEnter);
This way regardless of whether you are entering all elements, updating all elements, or entering some and updating others you can modify all elements that exist (that are not exited).
If I have a case sensitive attribute like nativeAttr I can then use querySelector to find the element by its attribute name.
But if I programmatically add a case sensitive attribute like setAttr, then querySelector no longer finds the html element.
How can I set the case sensitive attribute and also make it work with querySelector?
const node = document.getElementById('node')
node.setAttributeNS(null, 'setAttr', 'set')
console.log('nativeAttr', document.querySelector('[nativeattr]')?.id)
console.log('nativeAttr', document.querySelector('[nativeAttr]')?.id)
console.log('setAttr', document.querySelector('[setattr]')?.id)
console.log('setAttr', document.querySelector('[setAttr]')?.id)
// the attribute is set in camelCase correctly
console.log(node.getAttributeNS(null, 'setAttr'))
// here are the names of the attributes; seems that nativeAttr is lowercase
console.log('nativeAttr', node.attributes[1].name, node.attributes[1].localName)
console.log('setAttr', node.attributes[2].name, node.attributes[2].localName)
<div id="node" nativeAttr="native"></div>
Case sensitive attributes are used by svg elements, so it's a valid use case. For example:
// only one viewBox element
console.log(document.querySelectorAll('[viewBox]').length)
// add the viewBox attribute to the second svg
const svg2 = document.getElementById('svg2')
svg2.setAttributeNS(null, 'viewBox', '0 0 50 50')
// now both svg elements show up
console.log(document.querySelectorAll('[viewBox]').length)
<svg id="svg1" width="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
<svg id="svg2" width="30" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
So, as you can see it works for svg, but not for regular html elements.
According to the spec, uppercase letter are allowed in the attribute names.
In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of ASCII lower and ASCII upper alphas.
Attributes are always processed in lower case, so if you provide the attribute nativeAttr, this will be transformed to nativeattr.
As it is described in the HTML standard:
All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically
It is recommended to use kebab-case with attribute names. Check out this minimal example below:
const el = document.getElementById('node');
console.log('before', el.getAttributeNS(null, 'native-attr' ))
el.setAttributeNS(null, 'native-attr', 'changed');
console.log('after', el.getAttributeNS(null, 'native-attr' ))
<div id="node" native-attr="native"></div>
Also read here: are html5 data attributes case insensitive?
The appropriate character for selecting namespaced attributes is the pipe character (|). If there is no namespace prefix, you just use nothing before the pipe, so [*|setAttr] is supposed to select your element. However, in my testing, it does not do so, via CSS nor querySelector:
const node = document.getElementById('node');
node.setAttributeNS(null, 'setAttr', 'set');
node.setAttributeNS('https://example.com/namespace', 'ns:someAttr', 'set');
console.log('html', node.outerHTML);
console.log('nativeAttr', document.querySelector('[|nativeAttr]')?.id);
console.log('setAttr', document.querySelector('[*|setAttr]')?.id);
console.log('someAttr', document.querySelector('[*|someAttr]')?.id);
#namespace ns url("https://example.com/namespace");
div[|nativeAttr] { color: blue; }
div[*|setAttr] { color: red; }
div[ns|someAttr] { color: green; }
<div id="node" nativeAttr="native">Ran</div>
The syntax does not work even when a prefix and namespace is provided, so that seems to be a red herring as well.
This answer is less an answer as it is documentation of findings, along with code demonstrating what should work. The tests were run in Microsoft Edge Version 97.0.1072.62 (Official build) (64-bit) on Window 10 Version 10.0.19043.1466.
svg elements can have descriptions as described here
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc
Assuming I got the handle of the circle via getElementById, how can I access the content of the <desc> tag?
Adding an id to the tag cannot be a solution given the SVG comes from an editor that allows me to add id's in the elements, but not to their descriptions.
PS. It's not relevant, but the idea is to add javascript code in the descriptor to be executed (via Eval) to update the owner element.
Thanks!
You can retrieve the content of tag <desc> with textContent.
I made an example for you with the ability to change the content of the <desc> tag through <textarea>, by pressing a button
The first console.log() displays the default content of the <desc> tag.
All subsequent console.log() show modified content.
let desc = document.querySelector('desc');
let textarea = document.querySelector('textarea');
let button = document.querySelector('button');
console.log(desc.textContent.trim());
button.onclick = function() {
desc.textContent = textarea.value;
console.log(desc.textContent.trim());
}
<textarea></textarea>
<button>change desc</button>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="4">
<desc>
I'm a circle and that description is here to
demonstrate how I can be described, but is it
really necessary to describe a simple circle
like me?
</desc>
</circle>
</svg>
assuming you've the circle then calling
let desc = circle.getElementsByTagName("desc");
will get you all the desc elements that are descentants of the circle element.
You can loop over those and do what you want with them. Note that you'll get a collection of desc elements so if there's only one element it will be the first and only element in that collection.
I have an <svg> element (with viewBox set) and I append a programmatically constructed <image> element to it, like this:
const img=document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('width','100');
img.setAttribute('height','100');
img.setAttribute('xlink:href','data:image/png;base64,iVBORw0KGgoAAA'+
'ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4'+
'//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU'+
'5ErkJggg==');
document.querySelector('svg').appendChild(img);
It is present in the SVG but nothing is displayed. However when I call img.outerHTML = img.outerHTML; to sort of recreate it from its text representation, it starts displaying properly.
Anyone could help me understand what's going on? How should I create the element in JS to make it display properly?
JSFiddle
For SVG-2 ready browsers you can simply do setAttribute("href", url).
However, in SVG-1.x you must use setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);
Actually with setAttributeNS, you can also use 'xlink:href' for the second parameter or 'foo:href', since setAttributeNS takes care of mapping to the correct NameSpace and kind of discards what comes before :, but setAttribute doesn't and thus creates a kind of null:xlink:href attribute, which doesn't map to anything known by the browser and thus fails.
const url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('width','100');
img.setAttribute('height','100');
img.setAttribute('href', url); // SVG-2
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url); // SVG-1.x
document.querySelector('svg').appendChild(img);
<svg viewBox="0 0 100 100"></svg>
I was trying to work through this tutorial as a practice for a bigger project I'm working on.
My actual SVG is really big, so I would rather not just copy paste the whole giant code directly into HTML.
But here's the practice one I made (i'm also not sure how to clean SVGs made in Inkscape, but I deleted some of the stuff that didn't seem necessary.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg1"
version="1.1"
viewBox="49.595489 30.040314 84.135223 84.305336"
height="84.305336mm"
width="84.135223mm">
<path class="path5076"
id="path5076"
d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
In the tutorial it says:
Let's target the path with CSS (assuming we're using inline SVG here,
or via an 'object')
which is great because just uploading svg without copy-pasting is exactly what I wanted. But I'm not sure how to proceed now. From what I could find, the only way to access the inside parts of SVG is through javascript, which I've never done before as I don't know javascript.
So I have this
<object id="svg1" data="path.svg" type="image/svg+xml"></object>
Now I'm trying to figure out how to access the path inside the SVG.
I tried putting in this code that I found, but it didn't do anything.
<script>
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
svgItem.setAttribute("fill", "lime");
};
</script>
I then found someone saying that I had to let the SVG load first, so I added
<script>
var mySVG = document.getElementById("svg1");
var svgDoc;
mySVG.addEventListener("load",function() {
svgDoc = mySVG.contentDocument;
alert("SVG contentDocument Loaded!");
}, false);
</script>
but that also didn't seem to work.
This is my first stab at JS, so any help is appreciated.
But if you know how this can be done with CSS PLEASE let me know, I'm much more comfortable with it (as comfortable as I can be after two weeks of learning it, as opposed to 0 weeks with JS)
Edited as per suggestion, but I think I'm still doing it wrong.
Also, I only left "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019" in style and removed everything else. Does that mean I can still assign attributes like stroke-dasharray or do they have to be predefined inside style first?
still hoping someone has some other input
The style precedence, from lowest to highest, is
attributes
CSS style sheets
inline styles
Your SVG uses inline styles (style="fill:none;fill-opacity:1;...).
So your code is correct but no matter what you do with the "fill" attribute, it is overridden by the inline style, so svgItem.setAttribute("fill", "lime"); is useless.
You need to alter the inline style somehow.
The easiest solution is to change the inline style by calling:
svgItem.setAttribute("style", svgItem.getAttribute("style").replace("fill:none;","fill:lime;"))
but you can also remove the inline style completely and work with the attributes/external CSS instead.
another option is to convert inline style to attributes:
<script type="text/javascript">
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
// replace inline style with attributes
var styleText = svgItem.getAttribute("style");
svgItem.removeAttribute("style");
for (let pair of styleText.split(';')) {
let [key, value] = pair.split(':');
svgItem.setAttribute(key,value);
}
// now you are ready to work with the attributes
svgItem.setAttribute("fill", "lime");
};
</script>