We Keep Coding

Chain Multiple Elements In HTML2PDF?

I have a page that looks like this: https://www.pdffiller.com/jsfiller-desk16/?isShareViaLink=1&requestHash=0b686d3412abda4ce3280790c21ed048547fe38efb37cfe5eedfc9ab11dc5674&lang=en&projectId=1109967956&loader=tips&MEDIUM_PDFJS=true#9d3d7d408e8045169526ca212483a79f
[Sorry for the long link]
Sadly, I cannot save the PDF so I am trying to print every page. Each page has a div element with a [data-page-id="0"] wjere id=0 is the page number, starting from 0.
I have a sample script here
async function testShot() {
var element = document.querySelector(`div[data-page-id="0"]`);
await html2pdf(element, {
margin: 0,
width: "1442px",
html2canvas: {
scale: 1,
height: element.offsetHeight,
width: element.offsetWidth,
},
height: "1866.12px",
filename: "test.pdf",
image: { type: "png", quality: 0.98 },
});
}
And it works but how can I chain this for multiple elements into 1 pdf?

How can i make a child animation happen every time the parent animation is beginning using framer motion & react

I'm trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.
instead only the first time the animations run it works but after that only the movement animation repeats itself, if I try to repeat the squeeze animation it just gets out of order
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div variants={MoveVariants} initial={"hidden"} animate={"visible"}>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;

You just needed to add to your shapeVariants transition to get them to sync up.
import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
const Bubble = () => {
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2, /* new */
repeat: Infinity, /* new */
},
},
};
const MoveVariants = {
hidden: {
y: 1300,
},
visible: {
y: -280,
transition: {
duration: 2,
ease: "easeIn",
repeat: Infinity,
},
},
};
return (
<motion.div
variants={MoveVariants}
initial={"hidden"}
animate={"visible"}
>
<RoundDiv
onAnimationComplete={(definition) => console.log(definition)}
variants={shapeVariants}
/>
</motion.div>
);
};
const RoundDiv = styled(motion.div)`
height: 250px;
width: 250px;
background-color: #05386b;
border-radius: 50%;
`;
export default Bubble;
I would also recommend using originX and originY to manipulate the spring transition on the bubble otherwise it will animate the bounce based on the top left corner. I would use percentage values such as originX: "50%" but it depends on the effect you are looking for.

The cascading animation in framer-motion is powered by the variant being propagated through the children.
You are running into this setback because you are only animating to the `visible variant once. Thus the variant propagation only happens once.
Potential Solutions
Dumb solution: include a duration into the shapeVariant and make it also repeat then manually time your animation to where you need it. This isn't optimal because you probably want your bubble animation to be type spring?
const shapeVariants = {
hidden: {
height: 450,
width: 50,
},
visible: {
height: 250,
width: 250,
transition: {
type: "spring",
bounce: 1,
stiffness: 700,
ease: "easeIn",
duration: 2,
repeat: Infinity
},
},
};
Alternatively you could control your animation with an effect that would use setTimeout or something to change the variant of the parent over and over to get the cascading effect

How to make a Cytoscape.js canvas respect its parent's position

I have a React component that renders a Cytoscape dagre graph once some data has been fetched from the server. It seems to render a canvas that takes up the right half of the parent <div id="cy" />. Calling cy.center() and cy.fit() centers and fits the graph itself to the parent div, but only half the visualisation is shown because the containing canvas is half off the screen.
Setting the following CSS:
position: absolute;
left: 0;
right: 0;
on the container, as in all the online examples, will center the canvas, but breaks the flow of the document. It also doesn't resolve the half size issue.
The JSX:
if (moduleStructure) {
return (
<div
id="cy-module-structure"
style={{
position: "absolute",
left: 0,
top: 0,
height: "500px",
width: "1500px",
display: "block",
}}
/>
);
}
The graph generation code. This is called by a React hook after the data has been fetched.
function generateGraph(nodes, edges) {
cytoscape.use(dagre);
const cy = cytoscape({
container: document.getElementById("cy-module-structure"),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: "dagre",
nodeDimensionsIncludeLabels: true,
},
zoom: 1,
pan: { x: 0, y: 0 },
style: [
{
selector: "node",
style: {
content: "data(label)",
"text-valign": "center",
"text-halign": "center",
"background-color": "#11479e",
},
},
{
selector: "edge",
style: {
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea",
"curve-style": "bezier",
},
},
],
elements: {
nodes,
edges,
},
});
cy.ready(() => {
cy.center();
cy.fit();
cy.resize();
});
}
And finally the parent JSX:
<div className="top-flex"> // flex-direction: row:
<Diagram /> // Cytoscape component
<div className="basic-info">
<H3>TEXT</H3>
<small>INFO</small>
</div>
</div>
Ideally the graph should take up the full width of the parent div. In the screenshot, you can see the effect described above.

The problem is that a higher level style was applied text-align: center. Removing that should align things correctly.

(1) Your ordering of resize and fit is reversed. It doesn't make sense to fit if you're going to resize afterwards. Fitting happens on the available bounds.
(2) Make sure you mount Cytoscape only after componentDidMount().
(3) The container must be something like position:relative or position:absolute (definitely not position:static) such that the children of container can be positioned relative to container. Cytoscape.js will set position:relative by default, so it's sensibly set unless you override it.

Split oversized images when exporting to PDF

I am using pdfmake after html2canvas. I am turning a big chunk of html to image (canvas) and then this into pdf (because of very complicated styling in this html).
In case the canvas is longer than 1 page, I wish to show as much as I can on the 1st page, then on the 2nd to continue from where I stopped and etc. etc.
I was thinking of something like this:
var dd = {
content: [
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, 0, 0, 0]
},
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, -820, 0, 0]
}
]
}
Expecting:
1st page: Part of the image (as much as it fits in 1 page)
2nd page: Different part of image (starting from where page 1 finished)
Result:
1st correct, 2nd page identical to 1st!
Surprisingly when I tried:
var dd = {
content: [
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, -820, 0, 0]
},
{
image: 'sampleImage.jpg',
height: 1500,
width: 500,
margin: [0, 0, 0, 0]
}
]
}
Expecting:
2nd page: Part of the image (as much as it fits in 1 page)
1st page: Different part of image (starting from where page 1 finished)
Result:
Both pages correct but... wrong order!

Different background slides for mobile/screen

I want to have a different set of image display when your are on a mobile device. I am using Vegas Jquery Slider http://vegas.jaysalvat.com/
My questions is a bit vague, and I could find what I am needing. Would I just use the window size jquery? or an if.. else... statement?
Here is my code.
<script type="text/javascript">
$.vegas('slideshow', {
backgrounds:[
{ src:'img/familyoutsidehome5-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome3-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome4-dark.jpg', fade:1000 },
{ src:'img/familyoutsidehome-dark.jpg', fade:1000 }
]
});
</script>
<script type="text/javascript">
$.vegas.defaults = {
background: {
src: null, // defined by Css
align: 'center',
valign: 'center',
fade: 0,
loading true,
load: function(){},
complete: function(){}
},
slideshow: {
step: 0,
delay: 5000,
backgrounds: [],
preload: false,
walk: function(){}
},
overlay: {
src: null, // defined by Css
opacity: null // defined by Css
}
}
</script>

If I am correct, what you want is the website being responsive based on the screen size. You don't even need to use javascript. css mediacan do it:
#media (max-width: 500px) and (max-height: 500px) {
div.element1 {
background-image: url('background1.png');
}
div.element2 {
background-image: url('background2.png');
}
}
And you can just change the classes in javascript to change background image.
If you want to add transition effects you can also do it in CSS3 by adding a transition:
div.element {
transition: background-image 1s ease-in-out;
}