Develop Reference

Is there any way to get the height of a single page if you would print the page as a pdf?

I'm trying to render a pdf from dynamic content with puppeteer and react. The layouting is done in material ui for react, so page-break-before:always is not an option because i need the grid layout which is flex and wont work with page-break-before. I need to get the height of one page, so the header of the next page doesn't overflow. If i calculate where the header should be with pagewidth * Math.sqrt(2), it gives me the position value of where it actually is. But unfortunally when i go to print it it's overflowing by a few pixels and the error is getting bigger with each page. I have wondered how to fix this problem for the last 2 days. I've even tried resetting the position with a margin.
Here are some code snippets from my program which might maybe help.
let width = 800//document.documentElement.getBoundingClientRect().width
for (let pagewidth = width; pagewidth * Math.sqrt(2) < document.documentElement.getBoundingClientRect().height; pagewidth += width) {
let pageBreakXPosition = Math.ceil(Math.sqrt(2) * pagewidth)
header.style.marginTop = pageBreakXPosition - header.getBoundingClientRect().top + "px"
}
this is just the "important" part of the code because all of the other code targets the elements' width or some other styles. My problem would really be fixed if i just knew the exact point where the page would break, but appareantly my calculation for pageBreakXPosition is wrong in some way.
attached is a picture of the overflow(if you look carefully you can see that the error is getting bigger):
Page 2
Page 4

I think you can set the height as per your requirement and that should work

Use these:
`- document.height()
document.body.scrollheight
screen.height
$(document).height()`

Unwanted delay at animating 'transform: scale()' in Safari with css in Angular

I build an angular app in that i am trying to animate zooming and parallel moving of a graphic. I am using css transform for the zooming (scale) and moving (translate) part and css transition for the animation.
That works well in desktop browsers (Firefox and Chrome on Windows) but I have an unwanted delay in Safari on IOS (iPad Air). That is always round about 2 seconds and does not vary. The animation starts right after that delay and seems to work perfectly fine.
I noticed that the delay is gone if I don't use the scale-option but I cannot go without scaling the whole div because it needs to match the screen size.
I have tried to use other animation possibilities like ng-animate (https://github.com/jiayihu/ng-animate) but probably the zoom function of that library uses scale too because I got the same problem with that.
Some simplified code:
I first initialize the component with scaling parameter:
scaleUI() {
var previewArea: HTMLElement = document.querySelector(".previewArea");
previewArea.style.transform = "scale(0.3, 0.3)";
previewArea.style.webkitTransform = "scale(0.3, 0.3)";
}
On click I set the new scaling parameter and translate values:
var previewArea: HTMLElement = document.querySelector(".previewArea");
previewArea.style.transitionProperty = "transform";
previewArea.style.webkitTransitionProperty = "transform";
previewArea.style.transitionDuration = "1s";
previewArea.style.webkitTransitionDuration = "1s";
previewArea.style.webkitTransitionDelay = "0.1s";
previewArea.style.transitionDelay = "0.1s";
previewArea.style.transitionTimingFunction = "ease";
previewArea.style.webkitTransitionTimingFunction = "ease";
previewArea.style.webkitTransform = "scale(0.5, 0.5)translate(-" + value1 + "px, -" + value2 + "px)";
Even if I remove the scale after click the delay is present. Only if I remove the scale completely of that component the delay is gone.
Can anybody recommend another way to do the scaling that is maybe not affected by this error? Or is there a way to fix this?
The used iPad is an iPad Air 3 on iOS 12.3.1. Same problem on iPad Air 2 on iOS 12.3.
Delay is NOT present on iPhone 7 on iOS 11.4.

I fixed this bug later. Not by using another method to scale but by changing the background image. I used a background image with a huge file size. That seemed to produce the delay on mobile devices. As I changed the background image to a smaller one, the delay was gone.

How can I: Make one div "follow" another, clean-up motion, and keep things within a window

I've currently got a bunch of animals (".animalorb" divs) roaming around the screen, but I have a few problems:
1) I need all the divs (".animalorbs") to stay on the screen.
2) I want the random motion to be more elegant and less jerky.
3) The amount of processing required with my current solution makes the page hard to run.
Here's a codepen for what I've got:
http://codepen.io/Bassitenor/pen/KWeLLE (A snippet of the animating code is below)
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random([3,4,5], [6,7,8]) * (h/2));
var nw = Math.floor(Math.random([3,4,5], [6,7,8]) * (w/2));
return [nh,nw];
}
function animateDiv(c){
var moveit = makeNewPosition();
$(c).animate({ top: moveit[0], left: moveit[1] }, 10000, "linear", function(){
animateDiv(c);
});
Here's a codepen with more elegant randomness and less "crashy" behavior by the page:
http://codepen.io/Bassitenor/pen/aJLmKV
The SECOND pen (the one with the manta rays) isn't using all the individual divs, though--it's just generating a single div over and over.
Can anyone help me either generate better code for the first page or help me merge the code on the first and second pages?
Thanks so much!
- Jake

You could greatly improve performance by scaling the images down in an image processing software. At the moment they are all Full HD, which is a lot of work to scale down and animate in real time for every image.
As the width and height of the animal orbs are 100px, an image size of 100x100px would be sufficient.
Here is a jsFiddle of your code from codepen 1 but with the image exchanged by placeholder images of a smaller size (with background: url("http://placehold.it/100x100");):
https://jsfiddle.net/t18rhz61/

Relatively Positioning drop down menu

I'm building a website for a company and having a hard time with positioning. I want the drop-down menus to position either left or right based on where they are on the screen. Here's a screenshot of what happens currently: link
Also, If you want to take a look at the live site, here's a link to the demo.
Any help would be appreciated.
Thanks!
Edit: Not to throw another confusing element in, but this particular site is responsive. When I go down to an Ipad size screen the problem get's worse.

Your container is 960px. The dropdown menu has an auto width so you'll need to estimate the width of each menu (let's say 200px).
Now, you can use document.body.offsetWidth to determine the width of the browser window. This is what I would suggest:
function on_hover() {
...
dropdown_width = 200;
container_width = 960;
if (document.body.offsetWidth < container_width + dropdown_width) {
dropdown_from_left();
} else {
dropdown_from_right();
}
...
}
Hopefully this is enough for you to get started. Enjoy and good luck!

Use Javascript to create a space at the bottom of page for toolbar widget

I am creating a toolbar widget that is loaded via an external javascript file. The toolbar floats at the bottom of the screen, which works fine, but the content at the bottom of the screen gets covered up (as seen in Figure A). Figure B is my goal.
The toolbar should always be visible, fixed to the bottom of the screen. If scrolling is needed on the page, the content will flow under it until it is all visible when scrolled all the way to the bottom, so that nothing gets covered up on any length page.
My first thought was to set a bottom margin of 30px (toolbar height), but since most of the websites this is designed for are setup to use the full screen (with body height set to 100%), this won't always work. Decreasing the body scrollHeight by 30px fixes this issue, but only if scrolling isn't required on the page (which sometimes is).
JSFiddle example: http://jsfiddle.net/ZbMDr/1/

Does this example work for you? http://limpid.nl/lab/css/fixed/footer

So here's a somewhat hacky solution I've come up with, that seems to work so far (I haven't done extensive testing yet). If anyone has a cleaner way of accomplishing this it would be interesting.
var bodyCH = document.body.clientHeight,
bodySH = document.body.scrollHeight;
/* insert the toolbar here */
if (bodyCH === bodySH) {
document.body.style.height = parseInt(bodySH, 10) - 30 + 'px';
} else {
var spacer = document.createElement('div');
spacer.style.height = '30px';
document.body.appendChild(spacer);
}