How to Select All Checkboxes on YouTube? - google-chrome
I'm trying to select all the videos for Khan Academy's YouTube fundraiser page:
YouTube Fundraiser
Unfortunately, we have thousands of videos and there's no Select All button to choose everything in our library.
As such, I'm looking for some way to select all the checkboxes on the page without having to click them one-by-one.
I've tried the other Stack Overflow recommendations for using the Chrome DevTools Console to Select All but they've all failed. I believe it's because YouTube isn't using standard checkboxes but instead this kind of code:
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope tp-yt-iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%; user-select: auto;">
<g style="user-select: auto;" class="style-scope tp-yt-iron-icon">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" style="user-select: auto;" class="style-scope tp-yt-iron-icon">
</path>
</g>
</svg>
That said, any other recommendations for how to quickly Select All?
Thanks so much! 🙏
Related
CSS parent selector not working as expected
Given the following HTML
<div id="field-filter-TIPO" class="css-1hqm095 container">
<svg
aria-hidden="true"
role="img"
class="octicon octicon-x-circle-fill css-djuh4e"
viewBox="0 0 12 12"
width="12"
height="12"
fill="currentColor"
style="
display: inline-block;
user-select: none;
vertical-align: text-bottom;
overflow: visible;
"
>
<path
fill-rule="evenodd"
d="M1.757 10.243a6 6 0 118.486-8.486 6 6 0 01-8.486 8.486zM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763l-2 2z"
></path>
</svg>
<div style="font-size: 16px; width: auto" class="css-1bmhiq9">
<svg viewBox="25 25 50 50" width="1em" height="1em" class="css-1bez47e">
<circle
cx="50"
cy="50"
r="22"
fill="none"
stroke="currentColor"
stroke-width="6"
stroke-miterlimit="10"
class="css-frwtbx"
></circle>
</svg>
</div>
<div
title="ColumnFilter"
kind="ColumnFilter"
id="columnfilter--fetching"
name="Fetching"
class="css-utvy5"
>
<button class="css-m8wrzs">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
font-size="16"
class="css-1cx02qk"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 3H5a1 1 0 0 0-1 1v2.59c0 .523.213 1.037.583 1.407L10 13.414V21a1.001 1.001 0 0 0 1.447.895l4-2c.339-.17.553-.516.553-.895v-5.586l5.417-5.417c.37-.37.583-.884.583-1.407V4a1 1 0 0 0-1-1zm-6.707 9.293A.996.996 0 0 0 14 13v5.382l-2 1V13a.996.996 0 0 0-.293-.707L6 6.59V5h14.001l.002 1.583-5.71 5.71z"
></path>
</svg>
</button>
</div>
</div>
why this selector
.container div > svg {
margin-right: -8px;
}
is not affecting the first svg (the X icon)?
Should't the selector pick all the svg whose parent is a div inside the elements with the .container class? My goal is to create a selector to apply to the X icon (svg) and the second svg (the circle icon).
jsfiddle
Should't the selector pick all the svg whose parent is a div inside the elements with the .container class? My goal is to create a selector to apply to the X icon (svg) and the second svg (the circle icon). Well the first svg is not inside div... it's in a container... try adding it ina div and check
For now, there is no parent selector in CSS (only child selector). However, you can use the JS property .parentNode
Multiple SVG elements with the same size display different sizes on DOM
I have 2 SVG elements: (Material Design Icons) <svg xmlns="http://www.w3.org/2000/svg" height='24' viewBox="0 0 24 24" width='24'><path d="M0 0h24v24H0z" fill="none" /><path fill='#fff' d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z" /></svg> <svg xmlns="http://www.w3.org/2000/svg" height='24' viewBox="0 0 24 24" width='24'><g><rect fill="none" height="24" width="24" /><path fill='#fff' d="M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z" /></g></svg> I put them in a container like so: <div style="display: flex; justify-content: center; align-items: center;"> <svg>#1 element</svg> <svg>#2 element</svg> </div> As, you can see, both width and height of the elements are set to 24 and yet the output on the DOM shows different dimentions: I'm no expert when it comes to SVG and the rules about sizes relative to it's container etc.. Is there a way I can set the same size for both SVG elements and get the proper result ?
SVG image not loading in any browser
I know this question has been asked a lot of times. I tried every possible solution but nothing seems to work. It is working on my friend's computers. I am uploading screenshots of icons.svg file and index.html file. index.html <div class="likes__field"> <svg class="likes__icon" width="100" height="100"> <use href="img/icons.svg#icon-heart"> </use> </svg> </div> icons.svg <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> icon-heart inside icons.svg <symbol id="icon-heart" viewBox="0 0 20 20"> <title>heart</title> <path d="M17.19 4.155c-1.672-1.534-4.383-1.534-6.055 0l-1.135 1.042-1.136-1.042c-1.672-1.534-4.382-1.534-6.054 0-1.881 1.727-1.881 4.52 0 6.246l7.19 6.599 7.19-6.599c1.88-1.726 1.88-4.52 0-6.246z"></path> </symbol> I just checked in network tab. It blocked icons.svg due to some reason.
Using an svg image as a button/link
I've done some searching but have been unable to figure things out. I was hoping I would be able to place and <a> tag in between two svg tags to make a button but it has thus far not worked. What I was thinking was doing: <svg class="triangle-animation" width="85" height="85"> <polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/> <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/> <polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/> </svg> but no luck. I also tried putting some text inside of the a tag but it didn't even appear. The guides I have looked for have not thus far been very helpful. I'm brand new to web design and I'm just trying to get my personal webpage going. The svg draws three triangles on top of one another pointing down. The behaviour I'm looking for is that they draw the eye down and when clicked the page jumps down to main content. Thanks for the help!
try wrapping your tags around the svg instead. <a href="about.html"> <svg class="triangle-animation" width="85" height="85"> <polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/> <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/> <polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/> </svg> </a>
Use the to wrap the svg and style it
.SvgButton{
padding: 5px;
border: 1px solid red;
display: flex;
width: 50px;
}
<a class="SvgButton" href="#"><svg class="triangle-animation" width="85" height="85">
<polygon points="0,25 25,50, 50,25" fill="rgba(255,0,0,.3)"/>
<polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(0,255,255,.5)"/>
<polygon points="0,0 25,25, 50,0" fill="rgba(255,0,255,.8)"/>
<path d="M27 64c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
</svg></a>
A better solution would be to use svg symbol definition -> look
You can manage icons more easily.
.icon {
width: 50px;
height: 50px;
}
.animation {
display: flex;
}
.mail {
background-color: #dc4e41;
fill: #fff;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="triangle-animation" viewBox="0 0 50 50">
<path fill="rgba(255,0,0,.3)" d="M0 25l25 25 25-25z" />
<path fill="rgba(0,255,255,.5)" d="M0 12.5l25 25 25-25z" />
<path fill="rgba(255,0,255,.8)" d="M0 0l25 25L50 0z" />
</symbol>
<symbol id="share-icon-mail" viewBox="-7 -6 42 42">
<path
d="M26 23.5v-12a8.408 8.408 0 0 1-1.078 1.031c-2.234 1.719-4.484 3.469-6.656 5.281-1.172.984-2.625 2.188-4.25 2.188h-.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281A8.411 8.411 0 0 1 2.001 11.5v12c0 .266.234.5.5.5h23c.266 0 .5-.234.5-.5zm0-16.422C26 6.687 26.094 6 25.5 6h-23c-.266 0-.5.234-.5.5 0 1.781.891 3.328 2.297 4.438a980.43 980.43 0 0 1 6.266 4.953c.828.672 2.328 2.109 3.422 2.109h.031c1.094 0 2.594-1.437 3.422-2.109a946.207 946.207 0 0 1 6.266-4.953c1.016-.797 2.297-2.531 2.297-3.859zm2-.578v17c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 0 1 0 23.5v-17C0 5.125 1.125 4 2.5 4h23C26.875 4 28 5.125 28 6.5z">
</path>
</symbol>
</svg>
<a href="about.html">
<svg class="icon animation">
<use xlink:href="#triangle-animation"></use>
</svg>
</a>
<svg class="icon mail">
<use xlink:href="#share-icon-mail"></use>
</svg>
How to make .svg transparent area NOT clickable
I'm trying to set an .svg image as a button. Only problem is that i'm able to click not only in the painted are, but the transparency aswell. This i need to disable so i can only click on the painted are.
Below i provide the html code i've got so far (basically what i copied from the actual file. To clarify, i exported this image from Adobe Illustrator on a windows machine.
I haven't made any modifications through .css yet.
<div id="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></div>
You can move the <a href="index.html"> into your SVG code, so that only the <path> elements are linked instead of the whole image:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
The ability to just use <a href> as-is inside an SVG image was a relatively recent introduction. If you need to support older browsers, you may need to include the xlink namespace:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a xlink:href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
Edit I just tested this, it seems the most recent version of Safari on both iOS and OS X does not support the basic href version, they only support the xlink:href variant. With just href Safari on iOS will make the whole image clickable (which is what you're trying to avoid), on OS X the image will not be clickable at all.
Since your image is a circle you can apply border-radius: 50% and overflow: hidden to the a element in this specific scenario.
a {
border-radius: 50%;
display: block;
overflow: hidden;
}
a svg {
display: block;
}
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs>
<style>.cls-1 {fill: #FF7800;}</style>
</defs>
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</svg>
</a>