div content on scrolled bottom html javascript - javascript

i want to ask about div content scroll listener (not page).
so I have an html code where the appearance of the web design resembles a native application. what I want to do is how do I detect if the user has scrolled down the content div? not a page because my web page for him is only silent, but the one that moves in the div. my div code is something like this
<div class="product-list-item">
//product card
//product card
</div>
and when i scroll like this
I want to see other products using ajax when it reaches the bottom of the div, for now I
still using the manual button to load other products.
I've used this code but it's not working.
<script>
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
</script>
does anyone have a solution for this? Thank you in advance.

Assuming you have this:
<div class="product-list-item" id="target">
//product card
//product card
</div>
You can use this script to check if you reached your target div:
<script>
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#target').position().top) {
console.log('Target Reached');
}
});
</script>
You can use this approach to only execute the code once , once it has reached the target div
<script>
let isReached = false;
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#ftr').position().top && isReached == false) {
isReached = true;
//ajax call
}
});
</script>

Related

How to activate elements at different points of scroll down page

I am trying to 'activate' or 'click' on different elements as the user scrolls down the page. I.e. as the user scrolls down the page, element 1 should deactivate and element 2 should activate. Then 2 should deactivate and 3 should activate. It is important that these elements get 'clicked' and not just have a CSS change.
It works on the first one (it clicks .no2 and the tab activates) but then as you scroll down, .no3 and .n04 don't click, so I assume once the first if statement is true, it no longer checks the next if statement.
Please see my code here:
<script>
$(function() {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('.no2').triggerHandler('click');
}
if (scroll >= 250) {
$('.no3').triggerHandler('click');
}
if (scroll >= 300) {
$('.no4').triggerHandler('click');
}
});
});
</script>
You can use libraries to help you achieve it easily try AOS
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
Else you can use Intesection Observer
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer

ScrollToTop is working but i want to scroll down to page

I'm working on an angular5 app. In that app, I need to go down to the current page based on data. ScrollToTop is working fine, I want to go down to the current page. Is there any way like scrollTop in angular5.
You can scroll to the bottom of the page with this line:
window.scrollTo(0,document.body.scrollHeight);
If you want to scroll a specific html element, try this one:
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
See also this demo, it can help you.
You can make it using animate and scrollTop from jQuery as following:
HTML :
Contact
<!-- set the H2 deep down in the page -->
<h2 id="contact">Contact</h2>
jQuery :
$('a[href^="#"]').on('click', function(){
var the_id = $(this).attr("href");
if (the_id === '#') {
return;
}
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});

Button link to different ID with scroll

I'm trying to make a single down arrow that jumps to the next ID on the page as you scroll down. I don't really know JavaScript so I'm trying to keep it as simple as possible. I thought, as there are only a few sections, that I could just hide and display different divs with arrows that have different targets. I used two different codes to arrive at this, but doesn't seem to be working. Any ideas?
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() >= 800) {
var elem = document.getElementById("arrow");
elem.setAttribute("style","display:none;");
} else {
elem.setAttribute("style","display:inline;");
}
});
</script>
I'm not sure I understand exactly what you want to do, but your code can be simplified a bit by taking advantage of the shortcuts that jQuery provides.
//When the document is ready...
$(function(){
//Select the arrow just once
var arrow = $("#arrow");
//Attach a scroll event to the window
$(window).scroll(function(){
//See what the scroll position is
var scrollPos = document.body.scrollTop;
//When the document has scrolled to a certain point or more, hide the arrow.
//Otherwise, show it.
if(scrollPos >= 800){
arrow.hide();
} else {
arrow.show();
}
});
});
Here's a brief demo of it in action: http://jsfiddle.net/Bt35Q/

Trigger Back to Top Function from within iFrame

I've been searching a lot for the solution to this and can't figure it out. Tried a lot of methods I've seen but none seen to work.
Here is what I wanna do:
I have a main page with a navigation menu on its side, and all the content is loaded on iFrame. I wan't to know when the iFrame content was scrolled down to enable or disable Back to Top Button and also send the iFrame content back to top when clicking the button.
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
I've found this code but it is made to work on the current page you're on. I've tried a lot with document.parent, parent, trigger(), but nothing seen to work. I could paste this code on all pages that will load on the iFrame but what I want is to place the back to top button on a static button menu that I have on the top of the content so it can be seen from wherever part of the text you are.
Thanks!
Have you tried inserting this script in the iframe head? btw its parent.document not document.parent.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
button = document.getElementById('topButton');
button.style.display = "block";
}
});
function toTop(){
document.getElementById('iframeContainer').scrollTop = 0;
}
and just hide the button. once the bottom is reached it should change the style to block and make it visible. Call the toTop() function with your newly visible button.

Keep clicked link in viewport when calling jQuery's slideUp function

I have the following html structure repeated multiple times on a page:
<div class="item">
<div class="header">
...
Close All Expanded
</div>
<div class="expanded">
...
</div>
</div>
And some jQuery to close all the divs with class expanded when the link is clicked:
$('.closeExpanded').click(function(e){
e.preventDefault();
$('.expanded').slideUp('slow');
});
However I want to ensure that the link you've just clicked remains in view and moves as little as possible. Currently clicking on a link halfway down the page causes the link to move up out of the viewport as divs above it are closed.
Is there a nice graceful way I can keep the link that's been clicked in the viewport?
Update:
I've tried the answers suggested so far but so far none completely work (e.g. clicking link number 30 in each of these leads to link number 30 ending up outside of the viewport)
mrtsherman's solution: http://jsfiddle.net/Qan5p/38/
Mohsen's solution: http://jsfiddle.net/Qan5p/39/
roXon's solution: http://jsfiddle.net/Qan5p/40/
You will need to modify the scrollTop property of the page to keep things in place. Fortunately, as elements are shrunk they will be triggering scroll events you can hook into.
//untested, but should look something like this
var linkPosition = null;
$('.closeExpanded').click(function(e){
e.preventDefault();
linkPosition = $(this).offset().top - $(document).scrollTop();
//in callback to slideUp clear linkPosition so that we know to stop tracking scroll events
$('.expanded').slideUp('slow', function() {
linkPosition = null;
});
});
$(document).scroll( function(){
//check to see if we should be keeping link on screen
if (linkPosition != null) {
//keep the link in position
//I'm not so sure about this bit of the code, but I think you get the idea. All you have to do
//is properly calculate the new offset to keep the link looking like it is in the same position
var newPos = $(document).scrollTop() + linkPosition;
$(document).scrollTop(newPos);
}
});
$('.closeExpanded').click(function(e){
e.preventDefault();
$('.expanded').css({
'position' : 'absolute', // make it position absolute to prevent moving
'left' : $(this).offset().left,
'top' : $(this).offset().top
}).slideUp('slow', function(){
$('.expanded').css('position', 'static');
});
});
Fiddle: http://jsfiddle.net/mohsen/Qan5p/10/
WORKING DEMO
The easiest way:
Wrap contents into dynamically generated divs.
First animate the contents,
Than animate the wrapper elements
$('.expanded').wrapInner('<div class="wrapper" />');
$('.expanded').each(function() {
$(this).height($(this).children('.wrapper').height());
});
$('.closeExpanded').click(function(e) {
e.preventDefault();
$('.wrapper').animate({height: '0px'}, 800, function() {
$('.expanded').slideUp(800);
});
});

Categories