How can I create a Collapsible menu on "Cheat Status" and another on the "RainbowSixSiege Cheats".
I'm good at structuring sites with html and css but I'm denied with javascript
The complete code did not enter, I copied the main part, I hope there is everything you need
If you need anything I can send you the complete file, however I only need the javascript code to make these two "Menus" work
button {
display: inline-block;
border: none;
background: none;
cursor: pointer;
}
.product-status-box {
background-color: #fff;
box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
padding: 3.2rem 6.4rem;
border-radius: 22px;
margin-top: 3.2rem;
}
.product-status {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.product-status-title {
font-size: 1.8rem;
font-weight: 700;
}
.product-status-icon {
width: 2.4rem;
}
.margin-top {
margin-top: 1.6rem;
}
.hidden-box {
}
.hidden-box-btn {
display: flex;
align-items: center;
gap: 1.2rem;
}
.hidden-box-btn h3 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.product-icon {
width: 2rem;
}
.hidden-2nd-box {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
font-weight: 500;
}
<div class="product-status-box">
<button type="button" class="product-status">
<h2 class="product-status-title">Cheats Status</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-status-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-box">
<button type="button" class="hidden-box-btn margin-top">
<h3>RainbowSixSiege Cheats</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
class="product-icon"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div class="hidden-2nd-box">
<p>Klar.gg</p>
<p class="green-text">Operational</p>
</div>
</div>
</div>
This is going to be tricky one I will suggest you to add jQuery UI and
put these tags in your HTML head element
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
NOW add this jQuery code in your JavaScript and link it to your html just like you link external CSS in index.html
like this
<script src=" *your file path of JavaScript* "></script>
now add these line in your JavaScript file
$(document).ready(function () {
$('').click(function () { //add your class or id in the click function
$('').slideToggle(); //here you add class or id which you want to show when user click on button
});
});
quotes in the above brackets are compulsory don't remove them place your class or id inside them
repeat this one with second button with different class or id.
Hope this will solve your problem.
Related
Im using https://github.com/jgraph/drawio (mxgraph) for a project. I use AngularJS for frontend and NodeJS/Express for backend. The idea is to do a diagram design and then be able to export it/print it among other things.
Im able to interact with the backend and do the diagram but having trouble with the printing/rendering.
The problem is that the generated svg contains foreinObject for a QR and Barcode. While the diagram is rendered/displayed on the frontend, i need to generate a png/tiff in order to send it to a printer, but nodejs is not capable to render the foreinObject elements. I
tested canvg, sharp on node but foreignObject are not supported (according to some issues on github).
This is an example svg:
<svg width='600' height='500'>
<g xmlns="http://www.w3.org/2000/svg" fill="#464445" font-family="Lucida Console" pointer-events="none" text-anchor="middle" font-size="72px">
<text x="350" y="135">ABCDEF12345</text>
</g>
<g xmlns="http://www.w3.org/2000/svg">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 130px; margin-left: 300px;">
<div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: #774400; ">
<div style="display: inline-block; font-size: 11px; font-family: Arial, Helvetica; color: rgb(119, 68, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
<img src="data:image/png;base64,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" />
</div>
</div>
</div>
</foreignObject>
<text x="300" y="133" fill="#774400" font-family="Arial,Helvetica" font-size="11px" text-anchor="middle">[Object]</text>
</switch>
</g>
<g xmlns="http://www.w3.org/2000/svg">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 340px; margin-left: 450px;">
<div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: #774400; ">
<div style="display: inline-block; font-size: 11px; font-family: Arial, Helvetica; color: rgb(119, 68, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
<div title="Diagram Title">
<canvas style="display: none;" width="200" height="200"></canvas>
<img style="display: block;" src="data:image/png;base64,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" />
</div>
</div>
</div>
</div>
</foreignObject>
<text x="450" y="343" fill="#774400" font-family="Arial,Helvetica" font-size="11px" text-anchor="middle">[Object]</text>
</switch>
</g>
</svg>
And should look like this: Test svg. With sharp/canvg the QR and barcode are not displayed and instead [Object] is displayed on the final png/tiff. Even tryied C# SVG NuGet and htm2canvas for rendering on backend with same issue.
I've seen some posts on how to render canvas.toDataURL to png with but i dont have a object on the document DOM since mxgraph works differently and only have the final available as string. Any ideas on how can i remove the foreignObjects or how to modify the svg manually?
Is possible to "create" a canvas element and render the svg inside and then export it?
So, after #ccprog answer, i realized what i needed to do. I was trying badly to create a new canvas, copy the child element attributes, render again, use libraries to do that with no success.
With that answer the idea was simple: Grab the img src, create new child, remove foreignObject.
I had some issues with the x,y coordinates since the image was not centered (mxgraph uses padding-top and margin-left) and the code end up being this
var newXml = xmlCanvas.root;
for(var i = 0; i < newXml.children.length; i++){
var child = newXml.children[i];
if(child.tagName == 'g' && child.children[0].tagName == "switch"){
var imgChild = child.getElementsByTagName("img")[0];
var foreignObjectChild = child.getElementsByTagName("foreignObject")[0];
var textChild = child.getElementsByTagName("text")[0];
var image = document.createElement("image");
image.setAttribute("href", imgChild.src);
let marginLeft = Number(foreignObjectChild.firstChild.style.marginLeft.replace("px", ""));
image.setAttribute("x", marginLeft - imgChild.naturalWidth/2);
let paddingTop = Number(foreignObjectChild.firstChild.style.paddingTop.replace("px", ""));
image.setAttribute("y", paddingTop - imgChild.naturalHeight/2);
image.setAttribute("xmlns", "http://www.w3.org/2000/svg");
newXml.children[i].firstChild.appendChild(image);
newXml.children[i].firstChild.removeChild(foreignObjectChild);
newXml.children[i].firstChild.removeChild(textChild);
}
}
Its kinda hardcoded for this example but it works. Not expert on javascript but this probably can be optimized/rewrited in a better way.
One issue i encountered is that the final svg has the tags "<a0:image" and "<a1:image" etc... but then i use regex and remove de a0/a1/aN. Dont know why, probably some bug on how i create/append the child elements.
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 1 year ago.
I am using Material-UI so the conventional methods do not work.
I have two buttons next to each other in my form. One is a "Choose File" input to allow users to upload a file, and the second is a submit button. I want to style both buttons the same, but is it possible to do so since the "Choose File" is an input? Can I use CSS to edit the Choose File Button?
<Grid item xs={12}>
<FormControl>
<Input
name='uploadFile'
type='file'
required={true}
onChange={(e) => setUploadFile(e.target.files)}
/>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button
variant="contained"
color="primary"
type="submit"
disabled={submitting}
>
Submit
</Button>
</Grid>
I have tried this, but it only edits the color of the text:
input[type="file"] {
top: 10px;
left: 8px;
font-size: 17px;
color: #b3e5fc;
}
You can have a look here
How to enable file upload on React's Material UI simple input?
There is also a package that's very handy and customizable for upload in react named dropzone
You can find good examples here https://react-dropzone.js.org/
yes you can.this is an example for customize input type file.
<div class="file-input">
<input
type="file"
name="file-input"
id="file-input"
class="file-input__input"
/>
<label class="file-input__label" for="file-input">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="upload"
class="svg-inline--fa fa-upload fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
></path>
</svg>
<span>Upload file</span></label
>
</div>
body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.file-input__input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.file-input__label {
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
color: #fff;
font-size: 14px;
padding: 10px 12px;
background-color: #4245a8;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
.file-input__label svg {
height: 16px;
margin-right: 4px;
}
I'm not sure how i gonna ask this, but here it goes, i'm training css and i'm literally copying some random layout, and i find this website where he's using a padding outside the div (pic1, pic2), this way his content keeps centralized, what i want to know is how can i do this, my way (pic3, pic4) as you can see the padding keeps inside the div (which holds my section producs) making the section not centralized.
pic1
pic2
pic3
pic4
tsx
<div className={styles.sectionHeader}>
<h1>Top Picks</h1>
Ver todos
</div>
<div className={styles.sectionWithTopPicks}>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
<div className={styles.eachItemSection}>
<Image src={img1} width={800} height={800} layout="responsive" />
<p>texto do produto</p>
<h5>R$ 50,00</h5>
</div>
</div>
</div>
scss
.productBox {
display: block;
position: relative;
box-sizing: border-box;
height: 700px;
width: 100%;
background: saddlebrown;
padding: 0 40px 0 40px;
h1 {
font-size: 4rem;
}
}
.sectionHeader {
display:flex;
justify-content: space-between;
a {
font-size: 32px;
font-weight: 400;
font: sans-serif;
}
}
.eachItemSection{
width:25%;
height: 500px;
padding: 0 0 0 22px;
img{
align-self: center;
width:
}
}
.sectionWithTopPicks{
padding-top: 50px;
flex-wrap: wrap;
background: black;
display: flex;
justify-content: space-around;
p {
color: white
}
h5 {
color: white
}
}
I understand your objective, but you have to adjust the code.
With the flexbox approach, you can:
Use a flex-div to hold your items with: .sectionWithTopPick { display: flex; }
Inside it, use a div to hold the content, and tell the div how to fit the parent flex-box with flex-grow: 0; flex-shrink: 1; flex-basis: 25% (this tells to the inside div to never grow beyond 25%, but to shrink if necessary). This div also has the padding.
Select the first item with :fisrt-child and remove left-padding
Select the last item with :last-child and remove right-padding
Use another div to contain the item's contents, and make it's image fill 100% of the space.
Here a codepen with working solution
How you can see here the CSS box-model explain that padding and border are part of the html element.
You can also play here. So you can use margin if you want a space outside the div.
For align i can advise to use margin-left: auto; margin-right:auto;
I agree with Ale Macedo's answer but I'd make the following changes.
.eachItemSection {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 25%;
display: flex;
flex-direction: column;
padding: 2vh .5vw;
&:first-child {
padding-left: 1vw;
} &:last-child {
padding-right: 1vw;
}
I've been working on a site and I decided to add a dark mode feature to it, I used the darkmode.js library to implement it , the library works on the principle of mix-blend-mode: difference. However, when I add a scroll animation to it using IntersectionObserver, and have the dark mode enabled, the div which is supposed to appear turns white and then immediately turns black. Yeah, it may seem very complicated, So
Here's my code
const targets = document.querySelectorAll('.animate');
const options = {
threshold: 0.7
}
const lazyLoad = target => {
const io = new IntersectionObserver((entries, observer) => {
console.log(entries)
entries.forEach(entry => {
console.log('😍');
if (entry.isIntersecting) {
const img = entry.target;
img.classList.add('fade');
observer.disconnect();
}
}, options)
}, options);
io.observe(target)
};
targets.forEach(lazyLoad);
.quotes-layout {
margin-top: 50px;
display: flex;
justify-content: center;
margin-left: 10%;
margin-right: 10%;
}
.quote {
flex: 1;
margin-right: 20px;
text-align: left;
background: #eee;
padding: 20px 20px;
}
.quote svg {
fill: rgba(0,0,0,0.5);
}
.quote .content::first-letter {
font-size: 23px;
}
.quote .content::first-line {
line-height: 16px;
}
<div class="quotes-layout">
<div class="quote">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
<div class="content">
<p>An eye for an eye ends up making the whole world blind.</p>
</div>
</div>
<div class="quote">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
<div class="content">
<p>The future depends on what you do today.</p>
</div>
</div>
<div class="quote">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
<div class="content">
<p>There is more to life than increasing its speed.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js#1.5.3/lib/darkmode-js.min.js"></script>
I have an SVG “map”, and I want to implement a simple tooltip when the mouse is hovered over a rectangle.
For the tooltip I want to use this plugin.
Here is how I link SVG to HTML:
<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>
The First Try was like this:
var svgobject = document.getElementById('map');
if ('contentDocument' in svgobject) {
var svgdom = $(svgobject.contentDocument);
$("#rect4578").tooltip.pop(this, '#ToltipContent');
}
And the tooltip container is as follows:
<div style="display:none;">
<div id="ToltipContent">
<h2>Header</h2>
<img src="img/img.jpg" style="float:right;" />
Some text
</div>
</div>
I also added the toolpip class to the rect4578 as it is explained on the plugin site. However it didn't work.
Then I tried to add the plugin invocation inside onmouseover attribute of the SVG rectangle.
onmouseover="tooltip.pop('#rect4578', '#ToltipContent')"
And also I got nothing.
However, if I change the opacity of the rectangle by using either of above described methods it works.
And the question is what is the right way to use this plugin to implement tooltip for the SVG?
Thank you.
Since I didn't have access to your object, I used an svg from w3schools and it seemed to work fine. Here's what I did to get it to work:
.hide {display:none;}
#object {width: 100px; overflow: hidden; margin: 0 auto;}
#object svg {padding: 20px;}
div#mcTooltip h2 {
margin-top: 10px;
line-height: 1;
}
#mcTooltip ul, #mcTooltip ol {
padding-left: 20px;
}
div#mcTooltip {
line-height: 16px;
border-width: 1px;
color: #333;
border-color: #bbb;
padding: 20px;
font-size: 12px;
font-family: Verdana, Arial;
border-radius: 6px;
box-shadow: 0 1px 4px #aaa;
}
div#mcTooltip, div.mcTooltipInner {
background-color: #eee;
}
div#mcTooltip a {
color: #069;
}
div#mcTooltip a:hover {
color: #333;
}
div#mcTooltipWrapper {
position: absolute;
visibility: hidden;
overflow: visible;
z-index: 9999999999;
top: 0;
}
div#mcTooltip {
float: left;
border-style: solid;
position: relative;
overflow: hidden;
}
div.mcTooltipInner {
float: left;
position: relative;
width: auto;
height: auto;
}
div#mcTooltip, div#mcTooltip div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
div#mcttCo {
position: absolute;
text-align: left;
}
div#mcttCo em, div#mcttCo b {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script>
<div class="hide">
<div id="toolTipContent">Tooltip text goes here</div>
</div>
<br/>
<br/>
<br/>
<object id="object" type="image/svg+xml" data="http://www.schepers.cc/svg/blendups/smiley.svg"><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg></object>
It looks like the problem with your original approach is that the object tag does not support 'onmouseover' https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am using the an img tag instead. This is a very minor change from the first answer.
var svg = document.getElementById('kiwi');
svg.onmouseover = function() {tooltip.pop(this, '#tooltip');}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script>
<div class="">
<img id="kiwi" height="200" width="200" src="http://s.cdpn.io/3/kiwi.svg">
</div>
<div class="hide">
<span id="tooltip" >
This is a tooltip.
</span>
</div>