Develop Reference

Making an element disappear when at the bottom of the page

I am making a website but I don't know much about javascript or jquery. I have a down arrow on my homepage showing that there is more information but I want it to go away when the user scrolls to the bottom of the page because it is then not needed because they can't scroll down anymore. I know I will need javascript or jquery to do this but I don't even know where to start with it. Help!

Try something like this :
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('arrow').style.display='none';
}
}
Where 'arrow' is the id of the image.

Using jquery:
$(window).scroll(function(){
var numPix = 200; // number of pixels before bottom of page that you want to start fading
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / numPix;
if( op <= 0 ){
$("#thing-to-hide").hide();
} else {
$("#thing-to-hide").show();
}
$("#thing-to-hide").css("opacity", op );
});

window scroll bar hit bottom query more data

if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
//query data & append
}
I have a page detect scroll bar - query data & append.
My problem is when I check 'network' from browser
it send query 3 or 4 times per scroll.(because mouse wheel scroll down very fast)
Is any way to solve this so I don't need to query unnecessary data

//set a variable for apply event
var start=1; // now below event work
if(($(window).scrollTop() + $(window).height() > $(document).height() - 300) && start){
start=0;// now it set 0 it s not work until your work done
//query data & append
start=1 //now your work done and it comes it this action again
}

Try to check if an ajax call(query) was made already, like this:
if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
if(!ajaxCall)
{
ajaxCall = true;
//query data & append
if (success)
ajaxCall = false;
}
}
Don't forget to declare your ajaxCall somewhere in your code so it will not end in the global scope.
What this does is:
initialize a variable to check if a request has been made already
if no request was made, set the variable to true and make a request
when the request comes back with a success, set it to false

A smarter way to achieve this is to detect the end of scroll event on each scroll and write the code in it:
var delay = 1000;
var timeout = null;
$(window).bind('scroll',function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
alert('scrolling stopped');
if($(window).scrollTop() + $(window).height() > $(document).height() - 300){
//query data & append
}},delay);
});​​​​​​​​​​

Appending data for every occurance for the same event

I am appending some php files using ajax every time the user scrolls to the bottom of the window.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
$(window).unbind('scroll');
// Function to append php files using ajax
}
})
I want to recognize the next time user scrolls to bottom of the page and append some other php files, but how do I find out the next(1 or many) events that scroll to bottom of the page?
Example: First scroll to bottom: Append 1.php 2.php
second scroll to bottom: append 3.php 4.php
third scroll to bottom: append 5.php 6.php
4th scroll to bottom: show footer
I dont need infinite scroll plugin. Because there is no concept of footer there.

You need to maintain a counter variable which counts how many requests you've made. You can then pass that to the server which will then return the required information. Something like this:
var requestCount = 0;
$(window).scroll(function(){
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
// Function to append php files using ajax
requestCount++;
if (requestCount < 4) {
$.ajax({
url: 'foo.php',
data: { page: requestCount },
success: function() {
// append your items
}
}
}
else {
// show footer
}
}
})
In your PHP you would need to take the page variable and return the relevant items.

var count = 1;
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
$(window).unbind('scroll');
if(count<4)
// Function to append php files using ajax
call_your_ajax_with_url(count+'.php');
call_your_ajax_with_url(count+1 +'.php');
count+=1;
else showFooter();
}
});
would do the work.

How to reset CSS if user scrolls up?

I have the following script:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
}
});
The script above changes the position of .master_footer if the user scrolls below #reas. But when i go up the position for .master_footer remains at relative. What can I do to reset it to position:absolute when the user scrolls back up?

by changing only the js code:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
}else{
$(".master_footer").css("position", "absolute");
}
});
But i would rather use something like:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").addClass('relative');
}else{
$(".master_footer").removeClass('relative');
}
});
and then you can just custom your css
.relative{ position:relative; }

Assuming you've set the css for the .master_footer element previous to setting it with the javascript: in your javascript, when you want to reset the element back to its default style, just remove the style attribute from the element:
$(".master_footer").removeAttr("style");
for example:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$("#reas").fadeIn(2000);
$(".footer").fadeIn(2000);
$(".master_footer").css("position", "relative");
} else if ($(window).scrollTop() < 500){ // <-- set your reset point here
$(".master_footer").removeAttr("style");
}
});
where you would set the else if statement to whatever point you wanted to reset your element at.

First of all, I would recommend a polling solution rather than attaching an event handler to the scroll event, particularly if you intend to support older versions of IE, some of which seem to trigger the event for each pixel scrolled! E.g., you can check the scroll position as you are once per second.
Secondly, since you are using 2000ms fades, you should hold in a variable the state of the elements being faded so you don't fire a fadeOut event while the element is still being faded in (or at the very least you can stop() the existing animation).
And as far as your original question is concerned, it looks like maybe you should be able to set $('.master_footer').css('position', 'absolute') when (t < y) if you are setting position to relative when t == y. (You also might want to check t >= y in case the browser being used supports overscroll).

infinite-scroll jquery plugin

I am trying to set up infinite-scroll on a site I am developing with Coldfusion, I am new to javascript and jquery so I am having some issues wrapping my head around all of this. Do I need to have pagination on my site in order to use the infinite-scroll plugin, or is there a way to do it with out it?

You do not need infinite scroll plug-in for this. To detect when scroll reaches end of page, with jQuery you can do
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
Demo on JsFiddle

I'm using Hussein's answer with AJAX requests. I modified the code to trigger at 300px instead of 10px, but it started causing my appends to multiply before the AJAX request was finished since the scroll call triggers much more frequently in a 300px range than a 10px range.
To fix this, I added a trigger that would be flipped on successful AJAX load. My code looks more like this:
var scrollLoad = true;
$(window).scroll(function () {
if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
scrollLoad = false;
//Add something at the end of the page
}
});
then in my AJAX response, I set scrollLoad to true.

I built on top of Hussein's little example here to make a jQuery widget. It supports localStorage to temporarily save appended results and it has pause functionality to stop the appending every so often, requiring a click to continue.
Give it a try:
http://www.hawkee.com/snippet/9445/

$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});
Some one asked for explanation so here is the explanation
here $(document).height()-->is the height of the entire document.In most cases, this is equal to the element of the current document.
$(window).height()-->is the height of the window (browser) means height of whatever you are seeing on browser.
$(window).scrollTop()-->The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.
$(document).height()<=$(window).scrollTop()+$(window).height()+100
add $(window).scrollTop() with $(window).height() now check whether the result is equal to your documnet height or not. if it is equal means you reached at the end.we are adding 100 too because i want to check before the 100 pixels from the bottom of document(note <= in condition)
please correct me if i am wrong

I had same problem but didn't find suitable plugin for my need. so I wrote following code. this code appends template to element by getting data with ajax and pagination.
for detecting when user scrolls to bottom of div I used this condition:
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
//now you are at bottom of #infiniteContent element
}
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
appendTemplate(jsonre,1);
});
});
function appendTemplate(jsonre, pageNumber){
//instead of this code you can use a templating plugin like "Mustache"
for(var i =0; i<jsonre.length; i++){
$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
}
if (jsonre.length) {
$("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
$(window).on("scroll", initScroll);
//scroll event will not trigger if window size is greater than or equal to document size
var dh = $(document).height() , wh = $(window).height();
if(wh>=dh){
initScroll();
}
}
else {
$("#infiniteContent").attr("data-page", "");
}
}
function initScroll() {
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
$(window).off('scroll');
var p = $("#infiniteContent").attr("data-page");
if (p) {
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
appendTemplate(jsonre, p);
});
}
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>

If you have a scrollable element, like a div with scroll overflow, but no scrollable document/page, you can take this way.
$(function () {
var s = $(".your-scrollable-element");
var list = $("#your-table-list");
/* On element scroll */
s.scroll(function () {
/* The scroll top plus element height equals to table height */
if ((s.scrollTop() + s.height()) == list.height()) {
/* you code */
}
});
});

I wrote this function using Hussein and Nick's ideas, but I wanted it to use promises for the callback. I also wanted the infinite scrolling area to be on a fixed div and not just the window if the div is sent into the options object. There is an example of that in my second link below. I suggest using a promise library like Q if you want to support older browsers. The cb method may or may not be a promise and it will work regardless.
It is used like so:
html
<div id="feed"></div>
js
var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});
If you want the feed to temporarily stop you can return false in the cb method. Useful if you have hit the end of the feed. It can be be started again by calling the infiniteScroll's returned object method 'setShouldLoad' and passing in true and example to go along with the above code.
infScroll.setShouldLoad(true);
The function for infinite scrolling is this
function infiniteScroll (options) {
// these options can be overwritten by the sent in options
var defaultOptions = {
binder: $(window), // parent scrollable element
loadSpot: 300, //
feedContainer: $("#feed"), // container
cb: function () { },
}
options = $.extend(defaultOptions, options);
options.shouldLoad = true;
var returnedOptions = {
setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
};
function scrollHandler () {
var scrollTop = options.binder.scrollTop();
var height = options.binder[0].innerHeight || options.binder.height();
if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
options.shouldLoad = false;
if(typeof options.cb === "function") {
new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
if(typeof isNotFinished === "boolean") {
options.shouldLoad = isNotFinished;
}
});
}
}
}
options.binder.scroll(scrollHandler);
scrollHandler();
return returnedOptions;
}
1 feed example with window as scroller
2 feed example with feed as scroller