Develop Reference

Dynamic bottom value based on element position in browser

I am attempting to adapt this JS solution to keep a floating element above the footer of my site.
The adaption I am attempting is instead of changing the element position to absolute, I would have a dynamic bottom px value based on the position of the top of the footer, relevant to the client window.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(onlineFloat) + document.body.scrollTop) + onlineFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 20)
var newBottom = ((getRectTop(footer) + document.body.scrollTop) - 40).toString().concat('px');
onlineFloat.style.bottom = newBottom;
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
onlineFloat.style.bottom = '20px';// restore when you scroll up
}
document.addEventListener("scroll", function(){
checkOffset();
});
The output of newBottom is currently a px value which changes on scroll, however, I am having issues setting this position to the element.
Where am I going wrong? Thanks.

With your approach (changing the bottom property), you can just calculate where the "float" should be if the footer's top position is in view (as in window.innerHeight) on scroll.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
var newBottom = 10 + (getRectTop(footer) < window.innerHeight ? window.innerHeight - getRectTop(footer) : 0) + 'px';
onlineFloat.style.bottom = newBottom;
}
document.addEventListener("scroll", function () {
checkOffset();
});

Moving absolute positioned resize icons with the rectangle

I've a rectangle and when I'm dragging, I want the resizer icons move together. I set each of 4 resizer icons absolute position and using mousemove event and setting top, left positions on each movement.
screenshot of rectangle with resizers
But it seems to laggy, what are other options to do this?
// I used useRef for referencing resizer icons.
resize1.current.style.top = top - 10 + "px";
resize1.current.style.left = left - 10 + "px";
resize1.current.hidden = false;
resize3.current.style.top = top - 10 + "px";
resize3.current.style.left = left + offsetWidth + "px";
resize3.current.hidden = false;
resize5.current.style.top = top + offsetHeight + "px";
resize5.current.style.left = left + offsetWidth + "px";
resize5.current.hidden = false;
resize7.current.style.top = top + offsetHeight + "px";
resize7.current.style.left = left - 10 + "px";
resize7.current.hidden = false;

tool-tip positioning inside the canvas

I am trying to position tool-tip inside the canvas
.this is the code i have got for postion and displaying.
`var position = this._chart.canvas.getBoundingClientRect();
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = (position.left + window.pageXOffset + tooltipModel.caretX) + 'px';
tooltipEl.style.top = (position.top + window.pageYOffset + tooltipModel.caretY) + 'px';`

How can I use a variable to change the type of css style using javascript

I created this Vanilla Javascript function for a parallax effect on my website's landing page and it is pretty efficient but could be one step better.
function parallaxTop(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.top = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
function parallaxLeft(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.left = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
window.onscroll = function() {
parallaxTop('element1', 0, 0.5);
parallaxLeft('element2', 200, -0.25);
}
I want to know if there is any way I could use a variable to select which type of css attribute is being changed. This would be my best guess but I can't find a solution.
function parallax(direction, id, startingNumber, scrollVariable){
var scrolled = window.pageYOffset;
var element = document.getElementById(id);
element.style.direction = (startingNumber + (scrolled * scrollVariable)) + 'px';
}
window.onscroll = function() {
parallax('top','element1', 0, 0.5);
}

You should change this
element.style.direction = (startingNumber + (scrolled * scrollVariable)) + 'px';
to
element.style[direction] = (startingNumber + (scrolled * scrollVariable)) + 'px';

How to stop moving Divs leaving the length of the document? Vanilla JS

I have couple of divs that have an event listener when the document is scrolling and it takes the current Y position of the scroll and times is by a little to move the divs. Like so:
ypos = window.pageYOffset;
contactLinks.style.top = ypos * 3.5 + 'px';
This means that the div will continue going if I keep scrolling.
How can I try to stop the div from going out of the innerHeight?
I tried to initially compare the div contactLinks.style.top to the innerHeight but it kept going to the else block.
This is the code:
let clientHeight = window.innerHeight;
document.addEventListener('scroll', parallex);
function parallex() {
if (contactLinks.style.top >= clientHeight) {
contactLinks.style.top = clientHeight + 'px';
} else {
ypos = window.pageYOffset;
contactLinks.style.top = ypos * 3.5 + 'px';
}
}
I also tried this:
function parallex() {
if (ypos >= clientHeight) {
contactLinks.style.top = clientHeight + 'px';
} else {
ypos = window.pageYOffset;
contactLinks.style.top = ypos * 3.5 + 'px';
}
}
I tried to search it but possibly I did not word it well and didn't have much luck!

contactLinks.style.top is a string (e.g. "700px"), while window.innerHeight is a number (e.g. 700). Comparing them will give unexpected result.
You can use offsetTop:
if (contactLinks.offsetTop >= clientHeight) {
contactLinks.style.top = clientHeight + 'px';