Develop Reference

Not Working - Header Slide up on scroll down page, and down again on scroll up - jquery

I have the following jQuery where I am attempting to hide the header on scroll down and appear on scroll up, but I cannot get it to work? All content that will be slideUp etc... is in a header tag
$(document).ready( function () {
$(window).scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > 80){
$('header').slideUp(200);}
else {
$('header').slideDown(200);}
});
});
I can get the header to disappear with the following code but really struggling to make it functional
$(document).ready( function () {
$('body').scroll(function() {
$('header').slideUp(200);
});
});
Where am I going wrong? Thanks in advance

I don't get really what is the effect you want to achieve but what you are probably having wrong is the use of window as a referential for .scroll() instead of the use of document.
So try instead to use $(document).scroll(function(){...}); as I've tried in this jsFiddle.

Implementing Infinite Scroll in existing website

We are trying to implement infinite scroll in our existing website. Currently we have a image 'click for more' and it makes a ajax call to a method GetArticlesFromNextSection(true) which returns data which we append in #sectionArticles. And this works perfect.
Now we are trying to make it automatic as when user reaches at the end it should make a call to GetArticlesFromNextSection(true) method to load next chunk. Here is what we are using:
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#lnkShowMore1').trigger('click'); //click image or
//GetArticlesFromNextSection(true);
}
});
</script>
The problem with above code is, it makes continuous call to method GetArticlesFromNextSection(true) until no data left to load from database. It should make a single call to method GetArticlesFromNextSection(true) and stop and when user tries to scroll again, it should next chunk.
How to make this possible?
EDIT
I used flag but it loads just one time and never again. This is not infinite loop, it should load another chunk again when user reaches end. This is what I used:
<script type="text/javascript">
var is_loading = false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {
if (is_loading) {
return;
}
is_loading = true;
//$('div#more').show();
$('#lnkShowMore1').trigger('click'); //click image or
//GetArticlesFromNextSection(true);
//$('div#more').hide();
}
});
</script>

Take a look at the answers for How to rate-limit ajax requests?
You can either include and use Underscore's _.throttle() in your script, or take a look at how they implement it and adapt into your code instead of including the whole library for a single purpose.
EDIT:
Using Underscore, your code might look like this:
<script type="text/javascript">
$(window).scroll(_.throttle(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#lnkShowMore1').trigger('click');
}
}, 1000));
... which should rate-limit the requests to once every second.

You can set a flag that check if the content is loaded.
<script type="text/javascript">
$(window).scroll(function () {
if (!isLoading && $(window).scrollTop() == $(document).height() - $(window).height()){
isLoading = true;
$('#lnkShowMore1').trigger('click'); //click image or
//GetArticlesFromNextSection(true);
}
});
</script>
And inside Ajax callback sets
isLoading = false;

Execute javascript after page has loaded and scrolled to hashtag anchor

I have a webpage that contains a bunch of parts, all of which can be scrolled to using hashtag links (e.g. www.marie-charlot.be/#weiss).
I know how to execute javascript functions that trigger after the page loads (using $(document).ready, but these generally trigger before the page is scrolled down to the correct part (the #weiss anchor).
how do I execute scripts after the scrolling?

You should use the JQuery plugin Waypoints for this.
Example:
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});

$(document).ready(function() {
var anchorTop = $('#my-anchor').offset().top;
$(document).scroll(function() {
if($(document).scrollTop() >= anchorTop)
yourFunctionHere();
});
});

Infinite scroll javascript not running

I'm trying to add infinite scroll functionality to a page using code given in this question, Check if a user has scrolled to the bottom, but nothing happens when I scroll to the bottom of the page. Here is the code so you don't have to follow the link:
<script type="text/javascript">
alert("popup!");
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("bottom!");
}
});
</script>
I added in the first alert to check if it was simply my browser blocking alerts, but it displays fine. The server also has JQuery 1.7.2 min installed and the page is masonry correctly, so I don't think it is an installation problem.

After your reply to my comment, you said you are getting
In the console tab I'm getting Uncaught ReferenceError: $ is not defined
I'm guessing then, that you havent included jQuery in the header of your page (this needs to be in the <head> of each page)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
This will tell you if JQuery has sucessfully loaded on your page
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
Original comment:
try putting console.log($(window).height()+"<-current sctoll | target->"+($(document).height() - 100)) in that loop, open it in chrome and right click -> element inspector, open the console tab, that will tell you what the values are each loop, should help you diagnose the problem. If you don't get any traces, the event is not firing

Perhaps the scroll event is firing properly with the syntax you have there, try this:
$(window).on('scroll', function () {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 100) {
alert('do stuff');
}
});

How to load the web page content based on user scrolling

How to load the content while user scroll the web page. How to implement this?

Generally speaking, you will need to have some sort of structure like this
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>
Then, you will need to detect when you are getting close to the end of the page, and fetch more data
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
AddMoreContent();
}
});
function AddMoreContent(){
$.post('getMoreContent.php', function(data) {
//Assuming the returned data is pure HTML
$(data).insertBefore($('#placeHolder'));
});
}
You may need to keep a javascript variable called something like lastId which stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call
$.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
//Assuming the returned data is pure HTML
$(data).insertBefore($('#placeHolder'));
});
I did exactly this on my company's search page.

Just to expand on Dutchie432. In my experience the
if ($(window).scrollTop() == $(document).height() - $(window).height())
may not be true consistently( personally i couldnt make it true cause it was jumping numbers ).
Also, if the user scrolls up and down it could fire many requests , while we are waiting for the first ajax call to return.
So what i did to make it work, was to use >= instead of == .
Then, unbinding the scrollTop before making my ajax request.
Then binding it again if the ajax has returned any data (which means there may be more).
Here it is
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll',fetchMore);
});
fetchMore = function (){
if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
$(window).unbind('scroll',fetchMore);
$.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
function(data) {
if(data.length>10){
$(data).insertBefore($('#moreHolder'));
$(window).bind('scroll',fetchMore);
}
});
}
}
</script>
`

You are referring to Dynamic Progressive Loading.
Is a pretty well documented concept and there is even some built-in support for it from different libraries. JQuery actually has a GridView that supports progressive loading pretty easily for example.
You will need to utilize AJAX to implement this feature.

You can use window.addeventlistener to track the scrolling behavior the webpage and load more content to the page when the user is at the foot of the webpage.
document.documentElement.scrollTop, document.documentElement.clientHeight and document.documentElement.scrollHeight will help you achieve this goal.
for example:
window.addEventListener('scroll',()=>{
const {scrollTop,clientHeight,scrollHeight} = document.documentElement;
if ((scrollTop+clientHeight)>=scrollHeight) {
getContent((current_page+1));
}
});

You can use jscroll a jquery plugin
http://jscroll.com/

You can use some library like jQuery to retrieve the content , then append it to the page content, Or you can use some jquery plugin like this: http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/

//Vanilla JS
let isLoaded = false;
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 350 ||
document.documentElement.scrollTop > 350
) {
if (!isLoaded) {
}
} else {
}
}
//jQuery
var isLoaded = false;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 350) {
if(!isLoaded){
}
}
});