get value of offset() and divide it by factor of windowheight - javascript

ive the following problem:
on window resize im fireing some events and one of them is this:
var height = $(window).height()
var getfactor = $('.second').offset().left/height
var getleft = getfactor*height
with this im doing:
$('.second').css('left', getleft);
but on window resize its always on the same position, and no left is been manipulated.

If I'm reading your code correctly you are essentially doing the following:
var getleft = ($('.second').offset().left / $(window).height()) * $(window).height();
Dividing by a number and then multiplying by that same number is going to cancel out any modification to the original left offset. You are essentially resetting the offset to its initial value every time the window is resized.

Related

How can I control a minimum and maximum numeric value to be displayed based on scroll starting from a specific point on the page?

I am trying to display a number that begins to increase when the user gets to an element on the page and then will increase the further down the page they scroll to a maximum number, but the the number will also decrease back to the original number if they scroll up the page.
So far I am only able to make the function start from 0 and increase or decrease on scroll using 'window.scrollY'. Is there a way to set a minimum and maximum? Or is there a more elegant solution?
Using the example from this thread: Increase/Decrease variable on scroll
$("document").ready(function(){
$(window).scroll(function(){
let scrollValue = window.scrollY;
let num = $("#num");
num.html(scrollValue);
});
});
<span id="num"></span>
I don't exactly know if this is what you are looking for, but you could maybe map that variable to a different scale? I found this function:
const scale = (inputY, yRange, xRange) => {
const [xMin, xMax] = xRange;
const [yMin, yMax] = yRange;
const percent = (inputY - yMin) / (yMax - yMin);
const outputX = percent * (xMax - xMin) + xMin;
return outputX;
};
So if your scroll variable ranges from 0 - window.innerHeight and you want it to range between 0 and 10, you could use scale(window.scrollY, [0, window.innerheight], [0, 10]). This should work.
Let me give you some hints:
Element.scrollHeight returns the scroll height of any element. To get the height of the whole page, use this method on the root <html> or <body> element.
window.innerHeight returns the height of the viewport (window).
When the user has scrolled to the bottom of the page, the scrollY value would be html.scrollHeight - innerHeight because scrollY is the top of the viewport and scrollHeight is the bottom of the viewport.
I'll leave the rest up to you.
Good luck!
I don't know exactly what are you trying to do. However, I think you may want to try out: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Load page when user reaches the end of page minus x amount of pixels

I have a function that I'm using to detect the end of a page. when it reaches the end it fires off a function that loads more content. This seems to work fine for me but for other users (that don't have as large of screen as I do) it's not working. I'm thinking it has something to do with a large table that is throwing everything off.
In any event, what I'm trying to do now is instead of loading at end of page, load at end of page -100 pixels or whatever amount of pixels i need. Here's my code:
win.scroll(function() {
// End of the document reached?
var docHeight = $(document).height();
var winHeight = win.height();
var scTop = win.scrollTop();
if (docHeight - winHeight == scTop) {
if(!allRecords){
populateAssignments();
}
}
});
Now I tried different combinations of subtracting 100 from the docHeight or the winHeight or the scrollTop but nothing seems to work. Any idea?
You cannot really trust the users with scroll functions and window.scroll to fire at a certain time. You should use logical operators here. Try comparing if it's greater value:
if (docHeight - winHeight > scTop) {
That should work. Your first and different combinations might all be right. Only the logic here is flawed. Use the greater than operator.

How to get the amount of pixels scrolled down the page with jQuery?

Now I know I can use scrollTop(), but that gets me the amount of pixels from the top of the screen. Would it be possible to get the amount of px from the bottom part of the screen to top?
Just assign a variable to a function with the properties similar to scrollTop (but opposite) like this:
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
Then just call it as follows:
$(window).scrollBottom(); //how many pixels below current view
$("#elem").scrollBottom(); //how many pixels below element
Via- Opposite of "scrollTop" in jQuery

On window resize get new width and last one

I`m trying build function who on document width changes get current webpage windows size and save last of past width with function, so i need past value.
So in pseido code it will be:
on resize(function){
var CURENT_W = 100
**var PAST_W = 90**
var MODIFIER = CURENT_W - PAST_W
jQuert('#element').css('atribute': MODIFIER)
});
So i need function who tell me how much window is resized.
How to get old document width? It`s possile?
Maybe there is some better method?
I've made a little snippet for you, you can use it as you want, just try to understand the script.
I'm 100% it can be done in some easier way, but this is the first that came to my mind
$(document).ready(function() {
// store a variable with body's width
var initial = $("body").width();
// render the body's width value on the selector
$("#initialwidth, #actualwidth").text(initial);
//now let's resize
$(window).resize(function() {
// Before doing some maths, let's get the width from #actualwidth span instead of directly from the variable
// the span has the value "static" because it was defined outside the ".resize()" event
var staticWidth = $("#initialwidth").text();
var newWidth = $("body").width();
//new width - initial width = difference
var finalWidth = newWidth - staticWidth + "px";
$("#actualwidth").text(newWidth);
$("#diff").text(finalWidth);
});
});
Here's a jsfiddle:
http://jsfiddle.net/2dcsonjg/

issue with $(document).scrollLeft() as a variable

I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.
You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());
Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).

Categories

Resources