currently I try to find out a way to detect if a container can reach the offset which has been set via waypoints and how I am able to execute the same function (in the same scope) if the offset can't be reached.
One example would be if you have a lot of container in the page and define an offset of 50%. Now you have a container which is rather small and if you scroll to the bottom of the document the offset can't be reached, because the document is not long enough the container to pass the 50% offset.
Waypoints-Example:
$(".elements").waypoints(function(direction){
/*do something*/
}, offset:"50%");
Is there any way to say something like this?
Pseudo-Code:
$(".elements").waypoints(function(direction){
/*do something*/
}, offset:"50% XOR document-end");
So if the break point is reached it triggers at 50% or the document is scrolled to the end and then the same function is executed, but only by the last element.
kind regards and thanks in advance!
I found a way to solve the problem by defining a custom function:
Waypoint.offsetAliases["myfunction"] = function() {...}
See
https://github.com/imakewebthings/waypoints/blob/master/lib/jquery.waypoints.js#l157
Related
I need to know if the end of a div element is currently visible in the users' browser.
I tried something I saw on the web, but scrollTop() always gave me zero in my Browser. I read something about an issue in Chrome, but I didn't understand quite well.
jQuery(
function($) {
$('#flux').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
}
);
My idea is the following:
1- User loads page and sees a Bar (sticky div at bottom visible page) with some information.
2- After scrolling a bit, and reaching the end of a div element, this bar will position there, after the div. This is the bar's original position
I wasn't really able to know when I was at the end of the div element. Eventually I found this code:
if ($(window).scrollTop() >= $('#block-homepagegrid').offset().top + $('#block-homepagegrid').outerHeight() - window.innerHeight) {
$('.hero-special-message').removeClass('hero-special-messege-scrolling');
} else {
$('.hero-special-message').addClass('hero-special-messege-scrolling');
}
});
I see that it's working, but I'm having a bit of trouble understanding what it does.
I know the following:
1. $(window).scrollTop();
this gives me the amount of pixels the user has scrolled, pretty self explanatory.
2. $('#block-homepagegrid').offset().top;
I THINK this is the distance between the start of the page and the start of the div. I know it's the current coordinates, but what is top exactly here?
3. $('#block-homepagegrid').outerHeight();
this gives the height of the element, I know there are 3, like
height(), innerHeight() and outerHeight(), if you want to take into
account border, margin, padding, which is the better to use?
4. window.innerHeight;
I understand this is what the user sees, but I'm having troubles understanding why does it matter for my situation.
Thanks!
You may be interested in the native JavaScript IntersectionObserver API. It automatically figures out what percentage of a given element is visible in the window and triggers callbacks based on that. So then you can do this:
function visibleHandler(entries) {
if (entries[0].intersectionRatio >= 1.0) {
// The whole element is visible!
} else {
// Part of it is scrolled offscreen!
}
}
const observer = new IntersectionObserver(visibleHandler, {threshold: 1.0});
observer.observe(document.getElementById('flux'));
Now, whenever the element with ID flux is 100% in view, it will trigger the visibleHandler. It will also trigger again if it's scrolled back out of view; that's why the function checks the ratio of visibility to see if it just hit 100% or just got reduced from 100%. You could be more fancy and use the observer entry's insersectionRect, which gives you the rectangle containing the visible portion of the element, and use that to determine top/bottom visibility.
I'm trying to make a page set it's horizontal scrolling position in the middle on load.
I've tried calling window.scrollBy (and the others like scrollTo etc) in the componentDidMount function (which I confirmed is being called).
I can't get it to work for horizontal nor vertical scrolling.
The npm package 'react-scroll' did work but only for vertical scrolling.
EDIT:
tech_amity is right that these functions take two arguments: the x and y coordinate.
In my case however the problem was solved by accessing the window.scrollTo() function from the onLoad event on a new parent container div. I'm still not really sure why.
so:
function moveLeft()
{
window.scrollTo(300, 0);
}
//and then in the JSX/html:
<div onLoad={moveLeft}>
//... stuff i want to scroll
</div>
You should give proper co-ordinates in scroll function.
window.scrollTo(x-coord, y-coord);
window.scrollTo(scroll-to-middle, 0);
give x-co-ordinates according to you.
I'm using this code http://jsbin.com/uninug/3/edit?html,css,js,output to do a thumbs slider.
I want to reset the inner thumbs div position to its original position when mouse "leave" (not hover) the container thumbs div, but I don't know much JavaScript (i'm a beginner). I'm trying this code but it just do nothing:
$bl.mouseleave (function() {
$th.css({marginLeft: 0 });
});
Any clue, tutorial or help are welcome.
Thanks!
The function in the script you are referring to has a timeout function that continuously asks for current position (given in local variables) and calculates the correct offset and margins based on that. Therefor your current javascript doesn't work - cause it will just be overruled by the timeout function that looks at the local variables for current position. Therefor you have to reset the position to 0.
By adding a function like this:
$bl.mouseleave(function(e) {
mX = 0;
mX2 = 0;
});
http://jsbin.com/mecofesito/1/edit?html,css,js,output
This is my code:
$( document ).ready(function() {
var target = $(".passthis").offset().top-$(window).height();
$(document).scroll(function() {
if ($(window).scrollTop() >= target) {
$(".something").fadeIn(2000);
}
});
});
HTML:
<div class="passthis" style="text-align:center;font-size:20px;margin-top:815px;">
Scroll Below here
</div>
Right now this code will show div.something only when the user passes div.passthis. The .passthis div is exactly at the bottom of the screen. Howver, I want to move .passthis the middle of the screen but being new to JS i am unsure how i can modify my script to do that. Can I use a number for x,y or something?
Question:
What can I do to move the .passthis to the middle of the screen and still make .something show after the user passes .passthis.
Here is a jsFiddle demo that you are welcome to play with. As I explained, if the window never scrolls, nothing is going to happen (.something will never appear). Additionally, you can see the numbers for the different values in this demo. It should give you an idea of what you're shooting for as far as the MATH of it all is concerned. As recommended above, you should read up on jQuery's .scrollTop() and other window dimensional methods and values.
Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!
You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');
I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.
See the scroll event and the scrollTop method.
you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});