We Keep Coding

How to call function every time div reaches max-height?

I want to call a function only once every time the div #blinds reach their max-height at 430px, how can I do this?
My Codepen: https://codepen.io/cocotx/pen/YzGBpVJ
window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
});

One polling way is adding the code below in your js if there are other behaviours changing the size of the element. Simply change 400 to the value you want.
var blinds = document.getElementById("blinds");
setInterval(() => {
let rect = blinds.getBoundingClientRect();
if (rect.height > 400)
console.log(" reach 400");
}, 100);

window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
// i added here the condition
if(blinds.offsetHeight > 430 /*the value you want*/){
//call your function
}
});
Notice that this doesn't work if you use blinds.style.height instead of blinds.offsetHeight, there's a difference between using these but i im still trying to figure it out.
I would suggest to clean your code:
window.addEventListener('mousemove',handler);
function handler(event){
...
if(blinds.offsetHeight >430){
//call your function
...
//and maybe remove the listener
window.removeEventListener('mousemove',handler);
}
};
EDIT: try this code
function hasReachedMax(){
var styles = getComputedStyle(blinds);
var borderBottom = styles.borderBottom.split("px")[0]; //this is to get the number of pixels
var borderTop = styles.borderTop.split("px")[0];
var maxH = styles.maxHeight.split("px")[0];
var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;
return maxH == currentDivSize;
};
function resetTrigger(){
//the condition to reset your trigger, for example making the div element at least 5 px smaller than maxHeight
var styles = getComputedStyle(blinds);
var borderBottom = styles.borderBottom.split("px")[0];
var borderTop = styles.borderTop.split("px")[0];
var maxH = styles.maxHeight.split("px")[0];
var currentDivSize = blinds.offsetHeight-borderBottom-borderTop;
return maxH-currentDivSize>5;
};
//this should be part of your main code
var trigger = true;
window.addEventListener('mousemove', function(event) {
var blinds = document.getElementById("blinds");
blinds.style.height = event.clientY + 'px';
if(hasReachedMax()&&trigger){
//call your function
console.log("Im called now");
trigger=false;
}
if(resetTrigger()) trigger=true;
});

jQuery function not working just reloading

I have this function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when I change the device to inspect Google Chrome, the function does not work well, only if I do the reload on the page that works, I don't know what I'm doing wrong.
I believe the problem is in the variable h, where it picks up the height, which doesn't pick up the height when modifying or rotating the device, but I'm not sure, I've tried everything
function changeSize() {
let h = $(document).height();
let he = $("header").height();
let m = $("main").height();
let f = $("footer").height();
let l = $("ui-loader").height();
let x = h - he - m - f - l;
$("container").css('height', x + 'px');
}
$(document).ready(function() {
changeSize();
$(window).resize(function() {
changeSize();
});
};

The first issue I see is here:
let he = $("header").height();
let m = $("main").height();
let f = $("footer").height();
let l = $("ui-loader").height();
$("container").css('height', x + 'px');
These do not select any element. Are they Class selectors or ID Selectors? I will assume Class selectors for my Example.
function changeSize() {
let h = $(document).height();
let he = $(".header").height();
let m = $(".main").height();
let f = $(".footer").height();
let l = $(".ui-loader").height();
let x = h - he - m - f - l;
$(".container").css('height', x + 'px');
}
$(function() {
changeSize();
$(window).on("resize deviceorientation", changeSize);
};
Another issue I see here is that this does not capture any Padding or Margins.

ragne slider bubble fails to move with slider movement

I have created a range slider where I am displaying a bubble with slider value within it.
( This example is based on https://css-tricks.com/value-bubbles-for-range-inputs/, I am simply attempted to recreate based on JS)
Here is a function that is suppose to make the bubble move along with the slider:
function displayValue(event) {
var rangeInput = document.getElementById('myRange');
var width = rangeInput.offsetWidth;
var min = rangeInput.getAttribute('min');
var max = rangeInput.getAttribute('max');
var newPoint = (event.target.value - min)/(max - min);
var offset = -1.3;
var newPlace;
if (newPoint < 0) {
newPlace = 0;
} else if (newPoint > 1 ) {
newPlace = width;
} else {
newPlace = width * newPoint + offset;
offset -= newPoint;
}
var outputElement = document.getElementById('myOutput');
outputElement.value = event.target.value;
outputElement.style.left = newPlace;
outputElement.style.marginLeft = offset = "%";
}
This function only partially works (as in the value insider the bubble updates but not the position)
Why is the sldier failing to update it's position ?
http://plnkr.co/edit/lt99U0uvMkPsibY54GAU

I found couple of anomalies in your code which might be typos.
Instead of:
outputElement.style.left = newPlace;
outputElement.style.marginLeft = offset = "%";
Try:
outputElement.style.left = newPlace + 'px';
outputElement.style.marginLeft = offset + "%";

variable used out of scope

I'm doing a responsive background video. I have this code.
<video id="bgvideo" />
function scaleVideo() {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
var videoNativeHeight = $('video#bgvideo')[0].videoHeight;
var heightScaleFactor = windowHeight / videoNativeHeight;
var widthScaleFactor = windowWidth / videoNativeWidth;
if (widthScaleFactor >= heightScaleFactor) {
var scale = widthScaleFactor;
} else {
var scale = heightScaleFactor;
}
var scaledVideoHeight = videoNativeHeight * scale;
var scaledVideoWidth = videoNativeWidth * scale;
$('video#bgvideo').height(scaledVideoHeight);
$('video#bgvideo').width(scaledVideoWidth);
}
I'm using grunt to compile my code and etc.
Jshint of grunt is saying I'm using "scale" out of scope and I cant understand why.
Any suggests ?

You should not write var scale = heightScaleFactor; inside the else statement if you want to use it outside of it.
Initialize scale outside the if
var scale;
if (widthScaleFactor >= heightScaleFactor) {
scale = widthScaleFactor;
} else {
scale = heightScaleFactor;
}

Try this instead:
function scaleVideo() {
var scale; //this is the change
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var videoNativeWidth = $('video#bgvideo')[0].videoWidth;
var videoNativeHeight = $('video#bgvideo')[0].videoHeight;
var heightScaleFactor = windowHeight / videoNativeHeight;
var widthScaleFactor = windowWidth / videoNativeWidth;
if (widthScaleFactor >= heightScaleFactor) {
scale = widthScaleFactor; //simply modify the value here
} else {
scale = heightScaleFactor;
}
var scaledVideoHeight = videoNativeHeight * scale;
var scaledVideoWidth = videoNativeWidth * scale;
$('video#bgvideo').height(scaledVideoHeight);
$('video#bgvideo').width(scaledVideoWidth);
}

Variable not passing into function?

I tried to google this but couldn't find a solution. So the problem is I'm trying to execute something once if user window width is changed to specific width+-, however; the variable is undefined inside the function for some reason.
Here's the code:
jQuery(document).ready(function ($) {
var windowWidth = $(window).width();
var n = 1;
if(windowWidth >= 900) {
var tc = 3;
$(".debug").html(tc); // Making sure if user window width is 900 or more and tc is 3 on page load.
} else if (windowWidth <= 900) {
var tc = 2;
$(".debug").html(tc); // Making sure if user window width is 900 or less and tc is 2 on page load.
}
function liveWidthChange(){
var windowWidth = $(window).width();
$(".debug2").html("<b>current width:</b> " + windowWidth + " - <b>tc:</b> " + tc);
if (tc == 3 && windowWidth <= 900) {
// Shows how many times executed if activly changing browser width and the current value of tc
$(".debug").html("tc Value: " + tc);
var tc = 2;
}
}
// If the browser changes size
var RS = false;
$(window).resize(function() {
if (RS !== false) clearTimeout(RS);
RS = setTimeout(liveWidthChange, 200);
});
});
So if user has window width of 900 or more, it sets tc variable to 3, if user is resizing browser and it goes under 900, execute something.
Thanks in advance.

You need to declare tc in a place where all the functions will have access to it:
var windowWidth = $(window).width();
var n = 1;
var tc; // here, at the top.
Then you just need to remove the var in each location you set the value of tc.

I see several things.
You always redeclare the variable tc, instead you should move it on top
$(document).ready(function ($) {
var originalWidth = $(window).width();
var n = 1;
var tc = 2;
var MAX_WIDTH = 900;
[...]
You will be confused by naming two different variable with the same name:
In the ready block:
var originalWidth = $(window).width();
In the function:
var currentWidth = $(window).width();
You are using the operator '==' in order to compare integers, you should use '===' instead unless you know what you are doing.
x = "5"
>>> x == 5
true
>>> x === 5
false
In your condition you have
if(windowWidth >= 900) {} else if (windowWidth <= 900) {}
What if the windowWidth = 900, it will always go inside the first condition...
I beleive that you may want to use '<' or '>'