Develop Reference

Have one text element track the position of another text element

I would like to have the red "Aliquam" text inside of the div with class ".absolute" track on top of the exact position of the (blue) "Aliquam" text inside ".aliquam-span", including on browser resize.
I've tried a few different ways to do this but haven't had much luck - hoping that someone here can help.
Nesting the text as a child of the span is not an option, unfortunately.
Thank you!
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.red-text')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>

It works for me, try it:
function changePosition () {
let aliquam = document.querySelector('.aliquam-span');
let aliquamAbsolute = document.querySelector('.red-text').parentElement;
let aliquamRect = aliquam.getBoundingClientRect();
aliquamAbsolute.style.top = aliquamRect.top + 'px';
aliquamAbsolute.style.right = aliquamRect.right + 'px';
aliquamAbsolute.style.left = aliquamRect.left + 'px';
aliquamAbsolute.style.bottom = aliquamRect.bottom + 'px';
}
window.onresize = changePosition;
window.onload = changePosition;
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>

You should target the div that is being set as the absolutely positioned one. So select .absolute instead of the .red-text.
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.absolute')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset, yOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
inset: 0;
}
.red-text {
color: red;
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>

The folks at GSAP helped me out on this one!
Three different answers here:
https://greensock.com/forums/topic/35705-tracking-position-of-a-text-span-with-javascript/

Is it possible to align child items based on parents border-radius

I am creating a custom scrollbar with absolute positioned divs at the right(for vertical) and bottom(for horizontal).
When there is a border radius on parent, both scrollbars edge gets hidden.
Is there a way we can align the child elements based on border-radius of parent?
Like this:
Below is my html:
<div class=“content-container”>
<div class=“content”>SOME OVERFLOW CONTENT</div>
<div class=“scrollbar-y”>
<div class=“scrollbar-track”>
<div class=“scrollbar-thumb”></div>
</div>
</div>
</div>
Below is my css:
.content-container {
position: relative;
height: 400px;
width: 600px;
}
.content {
height: 100%;
width: 100%;
overflow: auto;
}
.scrollbar-y {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.scrollbar-track {
width: 16px;
height: 100%;
border: 4px;
background: transparent;
position: relative;
}
.scrollbar-thumb {
top: 0; // calculated based on scroll event
width: 8px;
background: grey;
height: 42px; // calculated based on clientHeight and scrollHeight
}

Here. You have to set height of "scrollbar-button".
.container {
overflow-y: auto;
max-height: 170px;
border: 1px solid #b9b9b9;
border-radius: 20px;
padding: 10px;
}
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #7070705e 0% 0% no-repeat padding-box;
border-radius: 100px;
}
.container::-webkit-scrollbar-button {
height: 14px;
}
.container::-webkit-scrollbar-thumb {
background: #707070 0% 0% no-repeat padding-box;
border-radius: 100px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at erat in purus fermentum sodales. Nulla vel nunc vel metus interdum venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tincidunt porttitor massa, in aliquam mauris vehicula id. In non volutpat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc nisi dolor, viverra et efficitur ornare, lobortis vel velit. Integer volutpat, justo eleifend cursus pellentesque, lectus turpis fringilla elit, sit amet ultrices est magna ac leo. Sed dolor ipsum, bibendum ac viverra vel, vehicula ac quam. Sed eu justo vitae turpis vehicula interdum.
Cras ultricies leo eu aliquet ullamcorper. Pellentesque eu placerat velit. Sed sit amet gravida metus, nec auctor lectus. Donec blandit purus id est vehicula gravida. Aenean viverra enim id leo pretium, rhoncus mollis magna fringilla. Ut ullamcorper tempus urna id efficitur. Integer sit amet mattis nibh, ac sagittis diam. Morbi feugiat lacinia tortor nec dapibus. Pellentesque lobortis nec risus ac lacinia. Maecenas iaculis nisl nec lacus vehicula vulputate. Sed nec tortor id dui condimentum pulvinar. Donec nulla nisi, convallis at consectetur gravida, suscipit eu ante. In bibendum congue nisi, eget ullamcorper lectus bibendum in. Integer semper tortor elementum dui vestibulum tincidunt. Suspendisse potenti. Mauris vel velit vel felis fringilla dignissim.
Sed mauris nunc, auctor ac velit at, tempor sagittis diam. Nullam volutpat rutrum faucibus. Mauris ultrices tempor tempor. Mauris varius mauris sed viverra sollicitudin. Praesent nec eros sed enim consequat commodo. Donec id dui at nisi elementum condimentum. Nulla luctus lacus eu aliquam condimentum. Morbi vel dapibus massa. In nibh lectus, commodo vel elit in, sagittis varius elit. Donec in ex lorem. Vivamus id mattis dolor, nec finibus augue. Curabitur ut justo eu velit congue maximus. Maecenas non augue erat. Nam euismod leo ut enim dignissim, vitae semper dolor rhoncus.
</div>

Why is the expanding card preview text increasing after being opened and closed?

I have found this Codepen that I wish to use and it's perfect apart from the fact that once you open and close a card, the preview text reveals more than before it was opened.
https://codepen.io/Beardwig/pen/RZExaj
I think it has something to do with this class however I'm not entirely sure
<div class='expd-truncate'>
This is the link to the Codepen, any help is greatly appreciated.
Thanks

The text is truncated by javascript.
When closing the card, the javascript function that truncates again the text is called too much early:
$('.expd-truncate',thisCard).snipper({height: '60px'});
should be called at the very end of your code

The problem is not the class, nor in fact the CSS at all, but rather that after expanding and contracting the card there is too much content inside of the div.expd-truncate and the p tag within it - prior to the expansion it is a call to the .snipper method when the document is ready which truncates that content and appends an ellipsis to keep the content from being too long. I'm referring to this part of the code on line 74 of the CodePen:
$(document).ready(function(){
$('.expd-truncate').snipper({height: '60px'});
});
The bug is caused by the .snipper method being called prior to the alteration of the classes governing the display of the content being snipped when the button to retract/un-expand the card is clicked. Thus, when the card is retracted, the content gets snipped, then the classes are changed and the layout changes accordingly and the content reflows, and now the content is ultimately a different height than it was when it was snipped.
So the solution is to simply call the .snipper method after the alteration of the classes (ie line 117 ($('.expd-truncate',thisCard).snipper({height: '60px'});) should be below lines 118-121).
See this fork I made of the CodePen above for a working demonstration:
https://codepen.io/anon/pen/GBezWG
Or check out the JS in this working snippet, which is equivalent but with plain HTML and CSS:
(function($){
"use strict"
$.fn.snipper = function(options) {
var opts = $.extend({}, $.fn.snipper.defaults, options),
trimText = function($el, height, ellipsis) {
// Make sure HTML entities only count as one character
var ellipsisNumChars = ellipsis.replace(/&[^;]+?;/g, '.').length;
while ($el.outerHeight() > height) {
if ($el.text().length <= ellipsisNumChars) {
break;
}
$el.html(function(i, text) {
if (/\s/.test(text)) {
return text.replace(/\s*(\S)*$/, ellipsis);
}
// If there is just one really long string without spaces
// start stripping the last character and concatinating the ellipsis
return text.replace(new RegEx('.{' + (ellipsisNumChars + 1) + '}$'), ellipsis);
});
}
};
this.each(function(){
var $el = $(this),
fullText = opts.fullText || $el.data('snipper:fullText'),
height = opts.height,
ellipsis = opts.ellipsis || '';
// If height is a function get its return value
if (typeof(height) === 'function') {
height = height.apply(this);
}
if (!height) {
return;
}
height = parseInt(height, 10);
if (isNaN(height)) {
return;
}
if (fullText) {
if (typeof(fullText) === 'function') {
fullText = fullText.apply(this);
}
$el.html(fullText);
} else {
$el.data('snipper:fullText', $el.html());
}
trimText($el, height, ellipsis);
});
return this;
};
$.fn.snipper.defaults = {
ellipsis: '…'
};
}(jQuery))
//none/grow pulse/grow, bounceIn/grow, BounceInUp/slide, fadeInUp/slide, lightSpeedIn/slide, rotateInUpLeft/fade, rollIn/slide, zoomIn/fade, slideInUp/slide
var speed = 300,
animClassIn = "pulse",
animClassOut = "fadeIn",
expandStyle = "grow";
$(document).ready(function(){
$('.expd-truncate').snipper({height: '60px'});
});
//
//Expand
//
$(document).on("click",".wrap-expd-card .expd-card-toggle" , function() {
var thisCard = $(this).closest(".expd-card"),
cardLeft = thisCard.offset().left,
cardTop = thisCard.offset().top - $(window).scrollTop();
$('.expd-truncate',thisCard).snipper({height: '9999px'});
thisCard.parent(".wrap-expd-card").addClass("expd-hold");
thisCard.prependTo("body");
$("body").addClass("expd-body");
thisCard.addClass("expd-pre-anim").css({left: cardLeft, top: cardTop});
thisCard.removeClass("out-anim "+animClassOut);
thisCard.css('opacity');
if(expandStyle == "grow") {
thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0, transition: "all "+speed+"ms ease", opacity: 1});
thisCard.addClass(animClassIn);
} else if (expandStyle == "slide") {
thisCard.animate({
top: '100%'
}, 100, function () {
thisCard.removeClass("expd-pre-anim").addClass("expd-active");
}).promise().done(function () {
thisCard.addClass(animClassIn);
});
} else if (expandStyle == "fade") {
thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0,opacity: 1, transition: "opacity "+speed+"ms"});
thisCard.addClass(animClassIn);
}
});
//
//Retract
//
$(document).on("click",".expd-body .expd-card-toggle", function() {
var thisCard = $(this).closest(".expd-card"),
cardLeft = $(".expd-hold").offset().left,
cardTop = $(".expd-hold").offset().top - $(window).scrollTop();
thisCard.removeClass("expd-active "+animClassIn).addClass("expd-pre-anim").css({left: cardLeft, top: cardTop, opacity: 0});
thisCard.animate({scrollTop:0},speed);
//setTimeout(function(){
thisCard.removeClass("expd-pre-anim").css({left: 0, top: 0, opacity: 1});
thisCard.appendTo(".wrap-expd-card.expd-hold").addClass(animClassOut);
$(".wrap-expd-card").removeClass("expd-hold");
$("body").removeClass("expd-body");
$('.expd-truncate',thisCard).snipper({height: '60px'});
//}, 0);//
});
body {
background: #333;
}
.expd-card,
.expd-card * {
box-sizing: border-box;
}
.wrap-expd-card {
width: 320px;
height: 320px;
float: left;
margin: 16px;
}
.expd-card.fadeIn {
animation-duration: 300ms;
animation-delay: 0ms;
}
.expd-card {
font-family: Roboto, sans-serif;
color: #7c7c7c;
background: #fff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ccc;
overflow: hidden;
animation-duration: 400ms;
animation-delay: 200ms;
animation-iteration-count: 1;
}
.expd-card .expd-card-body-wrap {
max-width: 960px;
margin: 0 auto;
}
.expd-card .expd-card-body-wrap .expd-card-img {
height: 0px;
padding-bottom: 56.25%;
background: #bbb;
}
.expd-card .expd-card-body-wrap .expd-card-content {
margin: 18px 16px;
position: relative;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-card-toggle {
position: absolute;
cursor: pointer;
height: 40px;
width: 40px;
background: #f00;
right: 16px;
top: -36px;
border-radius: 50%;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading h2 {
color: #383838;
font-size: 20px;
margin: 0;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading strong {
color: #585858;
font-size: 14px;
}
.expd-card .expd-card-body-wrap .expd-card-content p {
font-size: 14px;
margin: 10px 0px;
}
.expd-body {
overflow: hidden;
}
.expd-card.expd-pre-anim {
position: fixed;
z-index: 99;
}
.expd-card.expd-active {
position: fixed;
z-index: 99;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body class="">
<div class="wrap-expd-card">
<div class="expd-card animated fadeIn" style="left: 0px; top: 0px; transition: all 300ms ease 0s; opacity: 1;">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-expd-card">
<div class="expd-card animated">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-expd-card">
<div class="expd-card animated">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Grow Canvas to fit following div

I have a canvas which I want to be 100% screen width and at least 100% screen height, but more if the following div goes beyond the bottom of the screen.
I am filling the canvas using Trianglify.
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
canvas#container1 {
position: absolute;
width: 100vw;
min-height: 100vh;
}
.screen-container {
min-height: 100vh;
position: relative
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
padding-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
...
</div>
</div>
EDIT
The important thing for me is that the div immediately following the canvas needs to have the canvas covering all of it's background and cover at least 1 screen. It there is a different way to achieve this I'm happy to adapt my approach.

Is this result what you want?
-- Long content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper lacinia semper. Pellentesque dignissim tempus nisi sit amet porttitor. Sed laoreet, nisi eu auctor cursus, tellus turpis porta diam, ac fermentum enim odio auctor dolor. Duis in nunc rhoncus, vestibulum est at, fermentum ligula. Suspendisse dui dui, luctus id lacus eu, tempor venenatis sem. Ut pellentesque sodales turpis quis efficitur. Donec vulputate placerat orci, vitae porttitor nunc. Etiam risus nibh, porta porta libero in, tempor auctor dolor. Quisque id augue at dui egestas vulputate.
Praesent tristique eu urna non faucibus. Nunc leo urna, euismod in neque vitae, elementum consequat libero. Integer in dignissim nunc, id scelerisque metus. Etiam ut ipsum iaculis, ullamcorper eros nec, elementum odio. Donec ornare lorem a semper porttitor. Suspendisse tincidunt mauris nec dui rhoncus, in semper augue blandit. Integer laoreet, velit sed molestie malesuada, enim quam mollis sapien, ullamcorper sollicitudin mi mi non urna. Mauris eu dignissim lectus.
Aliquam lacus tortor, dictum quis pulvinar volutpat, tincidunt id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum aliquam neque vitae bibendum. Nulla volutpat luctus urna et faucibus. Fusce convallis nulla tortor, vel ornare ante scelerisque in. Vivamus justo odio, porta nec vulputate ut, volutpat quis ipsum. Praesent id volutpat justo, sit amet euismod dui. In eget erat massa. Aliquam ultrices egestas ipsum, ac tincidunt diam gravida ac. Nullam tortor dui, viverra scelerisque vehicula varius, luctus in ipsum. Nulla dolor est, mattis in pellentesque at, interdum ac nibh.
Ut bibendum tellus varius orci aliquet luctus. Duis tortor nisl, suscipit at ornare ut, scelerisque nec dolor. Ut efficitur facilisis nulla a rutrum. Donec ut sodales odio, sed venenatis leo. Ut scelerisque eros in gravida fringilla. Aliquam fringilla vitae orci sed tincidunt. Aenean efficitur nibh elit, id sollicitudin enim mattis ut.
Praesent hendrerit ex eget quam ultrices, eget iaculis nunc pellentesque. In in orci interdum sapien bibendum sagittis. Mauris at massa quis nisi commodo facilisis at vel ligula. Vestibulum vitae aliquet lorem, vel faucibus lacus. Integer tortor nulla, rutrum dictum elit a, iaculis scelerisque nulla. Suspendisse massa eros, cursus quis enim a, volutpat aliquam quam. Fusce tristique tortor id laoreet blandit. Donec laoreet enim felis, consequat faucibus ante auctor vitae. Duis sollicitudin euismod dolor, in accumsan ipsum. Mauris tempus ligula nec nisl ornare dictum. Quisque luctus dolor magna. Maecenas et neque eu mi pellentesque maximus eu sit amet purus. Fusce eu porta tellus.
</div>
</div>
</div>
-- Same code, this time with a shorter content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
I just wraped them both inside a wrapper div that has `min-height: 100%`. The wrapper div will expand with the content if it get longers, while the canvas always fill the wrapper div.
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Short content
</div>
</div>
</div>

https://jsfiddle.net/hbe5j4m9/4/
Like this?
I Updated the .screen-container to contain the height of the canvas
.screen-container {
min-height: 100%;
position: relative
}

Hide overflow when scrolling

I'm trying to design a webpage where the page content shows within an iPhone screen but I cannot get the overflow to work correctly in that all overflow is being shown.
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
function setScreen() {
var img = document.getElementById('iphone');
//or however you get a handle to the IMG
var myWidth = getWidth();
var width = String(Math.round(getWidth() / 2 - img.clientWidth / 2 + (img.clientWidth / 525) * 94)) + 'px';
var height = String(Math.round(getHeight() / 2 - img.clientHeight / 2 + (img.clientWidth / 915) * 170)) + 'px';
document.getElementById("screen").style.paddingTop = height;
document.getElementById("screen").style.paddingLeft = width;
document.getElementById("screen").style.paddingRight = width;
document.getElementById("screen").style.paddingBottom = height;
console.log("Image Width: " + img.clientWidth);
console.log("Screen Width: " + myWidth);
console.log("Calculated PaddingLeft: " + width);
}
window.onresize = function() {
setScreen();
}
setScreen();
.screen {
padding-top: 15%;
padding-left: calc(50% - 262px);
position: absolute;
overflow: hidden;
display: block;
}
.phone-image {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
</div>
I've put it in a jsfiddle and would appreciate to know what I've got wrong.
Many thanks

Maybe its work for you.
You need a container for your text and image, and play with relative and absolute positions.
Remember to hide the scrollbar, his width different between browsers and you don't want the text container change his width.
::-webkit-scrollbar {
display: none;
}
body {
font-size: 100%;
padding: 0;
margin: 0;
}
p {
font-size: 0.8em;
}
#container {
position: relative;
width: 50%;
margin: 0 auto;
}
.screen {
overflow: scroll;
width: 60%;
height: 61%;
position: absolute;
top: 14%;
left: 20%;
}
.phone-image {
width: 100%;
display: block;
}
<div id="container">
<img src='http://s11.postimg.org/vcchvwjub/iphone.jpg' id='iphone' class="phone-image">
<div id="screen" class="screen">
<p>This is where my text goes and it should now wrap and only show within the phone, I think.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum purus id nisl tristique condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum dui et turpis euismod ullamcorper.
Maecenas id tempus lectus. Duis rutrum lectus ac diam scelerisque posuere. Praesent sit amet auctor tellus, id vestibulum massa. Sed sed leo et nisl lobortis imperdiet eget sed leo.</p>
<p>Nunc augue risus, pharetra in nulla ut, posuere finibus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mollis erat mi, vel commodo lorem gravida in. Nulla euismod commodo leo, a egestas dolor
lacinia a. Suspendisse mattis lacus nisi, at consectetur ex auctor sed. Suspendisse potenti. Nunc hendrerit id nisl scelerisque cursus. Etiam suscipit, ipsum mollis volutpat ultricies, turpis arcu feugiat erat, et vulputate mauris velit vel leo.
Aenean ac dolor tempor, sodales nunc consectetur, gravida diam. Nulla sapien ipsum, tempus at vestibulum a, lobortis ut diam. Nam sit amet risus laoreet, mattis ex sed, semper odio. Nam sollicitudin tellus erat, ut vulputate elit bibendum ut.</p>
<p>Integer ultricies non nisi sed ultrices. Aliquam at odio accumsan, tincidunt ex nec, imperdiet magna. Vestibulum ac placerat justo. Nam facilisis tortor in tristique tincidunt. Phasellus tempor lectus eu libero dignissim, nec ultricies leo auctor.
Etiam dui tortor, faucibus id suscipit vel, aliquam non mi. Nulla non ultricies odio. Aenean at metus erat. Pellentesque eget consectetur velit, blandit pellentesque est. Nulla porta mi ligula, sit amet consequat lorem placerat ut. Ut mattis hendrerit
ex, at dapibus enim tincidunt et. Aenean quis nisl at neque porta sagittis sit amet nec mauris. Nullam libero purus, aliquet eu eleifend eget, fermentum a enim.</p>
</div>
</div>
My Fiddle