We Keep Coding

How can I dynamically store the height of a changing React component? [duplicate]

Is it possible to detect when an element reference changes it's height?
I tried using the following, but when the height of the element changes for whatever reason, the change is not detected. (Please consider that this must also work in IE11)
useEffect(() => {
// detect change in reference height
}, [elementRef])

I noticed another answer mentioning to use a ResizeObserver, but the answer is incomplete, so I'd like to add my own.
You can create a ResizeObserver inside a useEffect-hook, and then do what you want to do when the element changes it's size. Remember to disconnect from the resizeObserver in the cleanup function.
useEffect(() => {
if (!elementRef.current) return; // wait for the elementRef to be available
const resizeObserver = new ResizeObserver(() => {
// Do what you want to do when the size of the element changes
});
resizeObserver.observe(endpageRef.current);
return () => resizeObserver.disconnect(); // clean up
}, []);

The most efficient way is to use a resize observer.
You can set it up in a useEffect, and clear it when the component unmounts.

I think you can use elementRef.current.clientHeight in useEffect dependencies in order to listen to tag's height.
I test with this case and it worked.
function App() {
const tag = useRef();
const [height, setHeight] = useState(10);
useEffect(() => {
console.log("updated", tag?.current?.clientHeight);
}, [tag?.current?.clientHeight]);
useEffect(() => {
setInterval(() => {
setHeight((height) => height + 10);
console.log(height, tag.current.clientHeight);
}, 2000);
}, []);
return (
<div className="App" ref={tag}>
<div style={{ height: height, backgroundColor: "green" }}></div>
</div>
);
}
Here is the codesandbox https://codesandbox.io/embed/reactjs-playground-forked-b8j5n?fontsize=14&hidenavigation=1&theme=dark

You could just use window.
My example below is optimised with a cleanup removeEventListener function should the component unmount.
const BoxAndHeight = () => {
const ref = React.useRef(null);
const [height, setHeight] = React.useState(0);
const onResize = React.useCallback(() => {
if (ref.current) setHeight(ref.current.clientHeight);
}, []);
React.useEffect(() => {
window.addEventListener("resize", onResize);
onResize();
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
return (
<div ref={ref} style={style}>
<h1>My height: {height}</h1>
<p>
{dummyContent}
</p>
</div>
);
}
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(<BoxAndHeight />);
const style = {
border: "2px solid #ccc",
padding: "10px",
backgroundColor: "#eee"
};
const dummyContent = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, fugiat. Ex in neque velit perspiciatis recusandae, deleniti illum error ea distinctio obcaecati nisi deserunt ab unde corporis quas magnam quo cupiditate dolor dicta? Eos nostrum delectus suscipit! Hic corrupti, assumenda quo modi rem aperiam voluptas explicabo alias fuga error nulla. Eos tenetur voluptas repellat. Tempore, ab harum. Recusandae impedit adipisci soluta officia sunt quis voluptas, quae ea! Eveniet vero incidunt enim quod, voluptate fugiat maxime deserunt et laudantium quidem, ducimus sunt ratione voluptatem libero neque accusamus praesentium fugit doloremque est nisi excepturi. Quo inventore est soluta culpa quos? Minus, laudantium!";
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Possible solution is to use a React Refs. Try this example as reference:
export default function Home() {
const divRef = createRef()
// ...
return (
<div style={{ height: '100vh', width: '100vw' }}>
<div
ref={divRef} // ...
></div>
</div>
)
}
Detailed code here.

JSPDF convert two DIVs to PDF of two pages

I have page where there is DIV and download button, the download button convert the div to pdf by JSPDF and downloads it, now the page contains 2 DIVs with the same size but different content, and I need the download button to create 2 pages PDF file and download it
the JS
$('#print').click(function (e) {
e.preventDefault();
let HTML_Width = $(".report").width();
let HTML_Height = $(".report").height();
let top_left_margin = 1;
let PDF_Width = HTML_Width + (top_left_margin * 2);
let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
let canvas_image_width = HTML_Width;
let canvas_image_height = HTML_Height;
let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".report")[0]).then(function (canvas) {
let imgData = canvas.toDataURL("image/jpeg", 1.0);
let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width,
canvas_image_height, 'FAST');
for (let i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin *
4), canvas_image_width, canvas_image_height);
}
pdf.save("Report.pdf");
$(".html-content").hide();
});
});
the first div selector '.report', and the second div selector '#report-two'
can anyone give me hand please?

You can try with:
page-break-before: always;
Example:
#media print {
.new-page {
page-break-before: always;
}
button {
display:none;
}
}
<div>
<h1>1 Page</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro unde
voluptas pariatur, sapiente voluptatem dignissimos ratione provident
tenetur exercitationem itaque suscipit incidunt excepturi iusto
consectetur odit reiciendis sunt quibusdam. Vitae?
</p>
</div>
<div class="new-page">
<h1>2 Page</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro unde
voluptas pariatur, sapiente voluptatem dignissimos ratione provident
tenetur exercitationem itaque suscipit incidunt excepturi iusto
consectetur odit reiciendis sunt quibusdam. Vitae?
</p>
</div>
<button onClick="window.print()">Print pages</button>
Otherwise if above not help try setting fixed height & width.
With JsPDF you need to have new jsPDF("p", "pt", "a4"); and 600px width and 840px height for A4 portrait orientation.

Can you merge to contents of one div element with another

I have two <div> elements in my web app and I would like to get the contents of both and put them into a single new element. I have tried doing this in multiple ways but I am having trouble doing this without a huge lump of spaghetti code and variables. does anyone have a simple way of achieving this?
Note (from future me):
sorry, I wrote this so badly when I was younger, I tried to rephrase it so maybe others can gain something from the answers.

I realise that this is an old question at this point, but since it suddenly appeared on the homepage – and I saw the existing answer – I thought I'd offer another approach, using plain JavaScript:
// I don't enjoy typing all that much, so these are a couple of utilities to avoid
// typing 'document' and 'document.querySelector(...)':
const D = document,
get = (selector, context = D) => context.querySelector(selector),
// a simple named function, written using Arrow function syntax (as there's no
// need to use 'this');
// the function takes three arguments, the first of which is the
// startNode: a reference to a node in the document, and
// n: an Integer which is the number of siblings in the document you wish to
// 'merge' together; this has a default argument of 0 which means the function
// does nothing,
// elementsOnly: Boolean, default of true; if this is true we only worry about
// merging element-nodes (<div>,<p>...) into the startNode; if false then we
// also merge text-nodes, comment-nodes, etc:
merge = (startNode, n = 0, elementsOnly = true) => {
// if there is no startNode (or startNode is falsey), we quit the function:
if (!startNode) {
return false;
}
// otherwise we initialise a counter from the supplied variable of 'n',
// we use parseInt(), with a radix of 10 (for base-10 numbering), on
// the supplied number in case it's somehow a string, or a number in
// another base:
let counter = parseInt(n, 10),
nodeTypes = elementsOnly === true ? 'nextElementSibling' : 'nextSibling';
// while the counter variable is truthy:
while (counter) {
// we assign either the startNode node's next element-sibling (if
// elementsOnly is equal to true) or the next sibling node (if
// elementsOnly is equal to false):
let next = startNode[nodeTypes];
// if there is no next-sibling node we break out of the while loop:
if (!next) {
break;
}
// if the nodeType of the 'next' node is
// equal to 1 (so the node is an element-
// node):
if (next.nodeType === 1) {
// while the element-node has a first-child:
while (next.firstChild) {
// we append that first-child to the startNode:
startNode.append(next.firstChild);
}
// once emptied, we remove the 'next' node:
next.remove();
// otherwise:
} else {
// we append the 'next' node to the startNode:
startNode.append(next);
}
// finally decrementing the counter variable for
// the next iteration:
counter--;
}
};
// calling the function:
merge(
// retrieving the first element in the document that matches the
// supplied CSS selector:
get('main > div'),
// passing in 3 as the value of 'n':
3);
// in the rendered output note that the 'Text node' remains outside of the startNode
// the first <div> element, despite being its immediate sibling in the HTML; if you
// inspect the document with dev tools you'll see the following comment-node also
// remains outside of the first <div>.
*,
::before,
::after {
box-sizing: border-box;
font-family: Roboto, system-ui;
line-height: 1.4;
margin: 0;
padding: 0;
}
main {
counter-reset: para;
border: 1px solid #000;
margin-block: 1em;
margin-inline: auto;
padding: 1em;
width: clamp(15rem, 70vw, 1200px);
}
div {
padding: 0.5em;
}
div:not(:first-child) {
margin-block-start: 1em;
}
div:nth-child(odd) {
background-color: hsl(70 80% 70% / 0.5);
}
div:nth-child(even) {
background-color: hsl(140 80% 70% / 0.5);
}
p::first-line {
font-style: italic;
}
p::before {
counter-increment: para;
content: counter(para, decimal-leading-zero) ': ';
font-weight: 800;
}
<main>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minus placeat, ipsum culpa voluptates sed. Ex sapiente labore beatae, enim repellendus, maxime tempora consectetur est, laborum explicabo ab. Ratione, vitae.</p>
</div>Text node<!-- comment node --><div>
<p>Reprehenderit ratione laudantium fugit fuga, alias praesentium. Repellat minus eaque aliquid quisquam odio provident ab sapiente, doloremque vero fugiat voluptates itaque ratione ex, doloribus, rem cumque assumenda. Ullam, quod, ut.</p>
</div>
<div>
<p>Assumenda quaerat magni, voluptatem est sit quia nesciunt fuga doloribus, beatae temporibus deserunt reiciendis suscipit excepturi animi maiores itaque, iusto consectetur, perspiciatis. Minima eligendi debitis suscipit quibusdam, odit, perspiciatis commodi!</p>
</div>
<div>
<p>Expedita ducimus facilis, quis architecto molestiae tempora provident officia obcaecati, repellat consectetur tempore non debitis quae dolores quaerat est maiores modi ratione similique ad consequuntur impedit asperiores numquam. Debitis, illum!</p>
</div>
<div>
<p>Odit quis expedita, architecto sed eum cum sunt deserunt facilis recusandae quia animi illo est, temporibus, accusantium amet. Numquam accusantium culpa eum blanditiis magnam consectetur soluta praesentium nam earum laboriosam.</p>
</div>
</main>
JS Fiddle demo.
// I don't enjoy typing all that much, so these are a couple of utilities to avoid
// typing 'document' and 'document.querySelector(...)':
const D = document,
get = (selector, context = D) => context.querySelector(selector),
// a simple named function, written using Arrow function syntax (as there's no
// need to use 'this');
// the function takes three arguments, the first of which is the
// startNode: a reference to a node in the document, and
// n: an Integer which is the number of siblings in the document you wish to
// 'merge' together; this has a default argument of 0 which means the function
// does nothing,
// elementsOnly: Boolean, default of true; if this is true we only worry about
// merging element-nodes (<div>,<p>...) into the startNode; if false then we
// also merge text-nodes, comment-nodes, etc:
merge = (startNode, n = 0, elementsOnly = true) => {
// if there is no startNode (or startNode is falsey), we quit the function:
if (!startNode) {
return false;
}
// otherwise we initialise a counter from the supplied variable of 'n',
// we use parseInt(), with a radix of 10 (for base-10 numbering), on
// the supplied number in case it's somehow a string, or a number in
// another base:
let counter = parseInt(n, 10),
nodeTypes = elementsOnly === true ? 'nextElementSibling' : 'nextSibling';
// while the counter variable is truthy:
while (counter) {
// we assign either the startNode node's next element-sibling (if
// elementsOnly is equal to true) or the next sibling node (if
// elementsOnly is equal to false):
let next = startNode[nodeTypes];
// if there is no next-sibling node we break out of the while loop:
if (!next) {
break;
}
// if the nodeType of the 'next' node is
// equal to 1 (so the node is an element-
// node):
if (next.nodeType === 1) {
// while the element-node has a first-child:
while (next.firstChild) {
// we append that first-child to the startNode:
startNode.append(next.firstChild);
}
// once emptied, we remove the 'next' node:
next.remove();
// otherwise:
} else {
// we append the 'next' node to the startNode:
startNode.append(next);
}
// finally decrementing the counter variable for
// the next iteration:
counter--;
}
};
// calling the function:
merge(
// retrieving the first element in the document that matches the
// supplied CSS selector:
get('main > div'),
// passing in 3 as the value of 'n':
3,
// setting (Boolean) false as the argument for elementsOnly,
// so this time we include all nodes not just element-nodes:
false);
// this time the rendered output will move both the text-node and
// the HTML comment inside of the startNode (first <div> element).
*,
::before,
::after {
box-sizing: border-box;
font-family: Roboto, system-ui;
line-height: 1.4;
margin: 0;
padding: 0;
}
main {
counter-reset: para;
border: 1px solid #000;
margin-block: 1em;
margin-inline: auto;
padding: 1em;
width: clamp(15rem, 70vw, 1200px);
}
div {
padding: 0.5em;
}
div:not(:first-child) {
margin-block-start: 1em;
}
div:nth-child(odd) {
background-color: hsl(70 80% 70% / 0.5);
}
div:nth-child(even) {
background-color: hsl(140 80% 70% / 0.5);
}
p::first-line {
font-style: italic;
}
p::before {
counter-increment: para;
content: counter(para, decimal-leading-zero) ': ';
font-weight: 800;
}
<main>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente minus placeat, ipsum culpa voluptates sed. Ex sapiente labore beatae, enim repellendus, maxime tempora consectetur est, laborum explicabo ab. Ratione, vitae.</p>
</div>
<div>
<p>Reprehenderit ratione laudantium fugit fuga, alias praesentium. Repellat minus eaque aliquid quisquam odio provident ab sapiente, doloremque vero fugiat voluptates itaque ratione ex, doloribus, rem cumque assumenda. Ullam, quod, ut.</p>
</div>
<!-- comment node -->
<div>
<p>Assumenda quaerat magni, voluptatem est sit quia nesciunt fuga doloribus, beatae temporibus deserunt reiciendis suscipit excepturi animi maiores itaque, iusto consectetur, perspiciatis. Minima eligendi debitis suscipit quibusdam, odit, perspiciatis
commodi!
</p>
</div>
<div>
<p>Expedita ducimus facilis, quis architecto molestiae tempora provident officia obcaecati, repellat consectetur tempore non debitis quae dolores quaerat est maiores modi ratione similique ad consequuntur impedit asperiores numquam. Debitis, illum!</p>
</div>
<div>
<p>Odit quis expedita, architecto sed eum cum sunt deserunt facilis recusandae quia animi illo est, temporibus, accusantium amet. Numquam accusantium culpa eum blanditiis magnam consectetur soluta praesentium nam earum laboriosam.</p>
</div>
</main>
JS Fiddle demo.
References:
Arrow functions.
document.querySelector().
document.querySelectorAll().
Element.append().
Element.nextElementSibling.
Element.querySelector().
Element.querySelectorAll().
Element.remove().
if...else.
Node.nextSibling.
Node.nodeType.
while () {...}.

There are several issues with your code:
JavaScript variables cannot start with a number (0-9).
There isn't a div with an id of 1.
$().html is a function and must be called as $().html() with parentheses.
By fixing those issues and adding another line of JavaScript, you'll get a complete webpage that merges the HTML content of both divs into the first one, then removes the second div:
<!DOCTYPE html>
<div id='one'>One</div>
<div id='two'>Two</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var one = $('#one').html();
var two = $('#two').html();
$('#one').html(one + two);
$('#two').remove();
</script>

Sort elements img alphabetically by alt in jQuery

I have few elements on side:
https://jsfiddle.net/vvbpvt0c/
<figure class="img-space">
<img src="http://placehold.it/150/30ac17" alt="qwqwqwaccusamus beatae ad facilis cum similique qui sunt">
<figcaption class="text-img">accusamus beatae ad facilis cum similique qui sunt</figcaption></figure>
and I want to sort them by img[alt] and show on side, sort() don't work.

So here's a possible way. The sort is done, and they're sorting by figcaption. If you want to do it by the alt text, then you might want to make sure they all have an alt and simply use $(a).find("img").attr("alt") instead of the selector I used. Credit where credit is due, I used http://james.padolsey.com/snippets/sorting-elements-with-jquery/ as a jumping-off point.
jQuery.fn.sortElements = (function() {
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function() {
return this;
};
var placements = this.map(function() {
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i) {
placements[i].call(getSortable.call(this));
});
};
})();
$("button").on("click", function() {
$("figure").sortElements(function(a, b) {
var aStr = $(a).find("figcaption").text().toUpperCase(),
bStr = $(b).find("figcaption").text().toUpperCase();
return aStr.localeCompare(bStr);
})
})
img {
float: left;
}
figcaption {
float: left;
margin-left: 5px;
width: 100px;
}
figure {
clear: both;
height: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">
Sort them!
</button>
<figure class="img-space">
<img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt">
<figcaption class="text-img">accusamus beatae ad facilis cum similique qui sunt</figcaption>
</figure>
<figure class="img-space">
<img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt">
<figcaption class="text-img">aaassaccudsasamus beatae ad facilis cum similique qui sunt</figcaption>
</figure>
<figure class="img-space">
<img src="http://placehold.it/150/30ac17" alt="accusamus beatae ad facilis cum similique qui sunt">
<figcaption class="text-img">fdsffsfsaccusamus beatae ad facilis cum similique qui sunt</figcaption>
</figure>

Move div on mouse move

I am trying to adopt a script I have found in this question, but changing the image to some content seems to be harder than I thought.
The script is quite simple and should make the #content div move inside the holder on mousemove:
// written by Roko C. Buljan
var $mmGal = $('#holder'),
$mmImg = $('#content'),
damp = 10, // higher number = smoother response
X = 0, Y = 0,
mX = 0, mY = 0,
wDiff, hDiff,
zeno;
function motion(){
zeno = setInterval(function(){ // Zeno's paradox "catching delay"
X += (mX-X) / damp;
Y += (mY-Y) / damp;
$mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
}, 26);
}
// Get image size after it's loaded and run our fn
$mmImg.one('load', function() {
wDiff = ( this.width/$mmGal.width() )-1,
hDiff = (this.height/$mmGal.height())-1;
}).each(function() {
if(this.complete) $(this).load();
});
$mmGal.mousemove(function(e) {
mX = e.pageX-this.offsetLeft;
mY = e.pageY-this.offsetTop;
}).hover(function( e ){
return e.type=='mouseenter'? motion() : setTimeout(function(){
clearInterval(zeno);
},1200); // clear if not used
});
Why doesn't the div #content move (text and image)?
Example JSBIN

I have updated the demo and added content on moving background image.
Check the demo:
$(function(){
var $mmGal = $('#mmGal'),
$mmImg = $('#mmImg'),
damp = 10, // higher number = smoother response
X = 0, Y = 0,
mX = 0, mY = 0,
wDiff, hDiff,
zeno;
function motion(){
zeno = setInterval(function(){ // Zeno's paradox "catching delay"
X += (mX-X) / damp;
Y += (mY-Y) / damp;
$mmGal.scrollLeft(X*wDiff).scrollTop(Y*hDiff);
}, 26);
}
// Get image size after it's loaded and run our fn
$mmImg.one('load', function() {
wDiff = ( this.width/$mmGal.width() )-1,
hDiff = (this.height/$mmGal.height())-1;
}).each(function() {
if(this.complete) $(this).load();
});
$mmGal.mousemove(function(e) {
mX = e.pageX-this.offsetLeft;
mY = e.pageY-this.offsetTop;
}).hover(function( e ){
return e.type=='mouseenter'? motion() : setTimeout(function(){
clearInterval(zeno);
},1200); // clear if not used
});
});
*{margin:0;padding:0;}
.main-wrapper {
position: relative;
width:150px;
height:150px;
}
#mmGal{
position:relative;
margin: 20px auto;
width:412px;
height:220px;
overflow:hidden;
background:#eee;
z-index: 0;
}
.content {
position: absolute;
left: 0;
right: 0;
top:0;
color: #ffffff;
padding: 10px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. quae molestias ad dolores qui blanditiis, Quas eaque soluta quia ipsa? aliquam?</p>
</div>
<div id="mmGal">
<img id="mmImg" src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg">
</div>
</div>

My original script uses a .load() for the underlay image to load. Since you don't have a background image to move - you don't need necessarily that code part.
Calculate w/hDiff inside the mousemove event.
Also, use jQuery's .outerWidth() and .innerWidth() for the calculation:
jQuery(function($) {
const $mm = $('#holder'),
$mmCont = $('#content'),
damp = 10; // 1 = immediate, higher number = smoother response
let X = 0, Y = 0,
mX = 0, mY = 0,
wDiff = 0, hDiff = 0,
zeno, tOut;
$mm.on({
mousemove(ev) {
wDiff = ($mmCont.innerWidth() / $mm.outerWidth()) -1,
hDiff = ($mmCont.innerHeight() / $mm.outerHeight()) -1;
mX = ev.pageX - this.offsetLeft;
mY = ev.pageY - this.offsetTop;
},
mouseenter() {
clearTimeout(tOut);
clearInterval(zeno);
zeno = setInterval(function() { // Zeno's paradox "catching delay"
X += (mX - X) / damp;
Y += (mY - Y) / damp;
// Use CSS transition:
// $mmCont.css({ transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)` });
// Use Scroll:
$mm[0].scrollTo(X * wDiff, Y * hDiff);
}, 26);
},
mouseleave() {
// Allow the image to move for some time even after mouseleave
tOut = setTimeout(function() {
clearInterval(zeno);
}, 1200);
}
});
});
#holder {
background: gray;
width: 100%;
position: relative;
overflow: hidden;
height: 180px;
}
#content {
width: 150%;
height: 600px;
background: lightgray;
padding: 40px;
}
<div id="holder">
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolore impedit dignissimos porro repellendus numquam aut quibusdam, consequuntur modi facere? Totam ut libero corporis sit sequi explicabo ab magni quaerat unde animi aliquid facere
necessitatibus, quae molestias ad dolores qui blanditiis, quisquam minima beatae autem iure. Neque animi tempore iste accusamus ut cum ipsam possimus, perspiciatis quia illo obcaecati sed molestiae amet architecto, nostrum cumque quaerat minima
minus, consequatur rem error nihil. Ipsa eveniet, praesentium suscipit optio blanditiis at, vel illum harum omnis quam. Quas eaque soluta quia ipsa? Illum inventore veritatis facilis eveniet voluptatibus atque laborum necessitatibus adipisci aliquam?</div>
<img src="https://i.stack.imgur.com/BfcTY.jpg">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>