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.
Related
I am trying to load more items on-scroll. The code works and the user reaches the bottom of the page. Every time the user scrolls to the bottom of the page, 9 items are loaded.
The issue appears when I try to load 9 items before the user reaches the bottom of the page. Then wait for those items to be loaded and then check again the condition (currentScroll >= goal).
At this point as soon as the condition is TRUE (currentScroll >= goal) all items are loaded at once.
I am guessing that this is happening because the currentScroll variable keeps counting while scrolling and the first group of items has not been yet loaded. As a result the $(document).height() is still the same, which affect the goal variable: var goal = $(document).height() - $(window).height();
I tried to use a while loop (see the commented section at my code) but the code crashes.
Is there any way to make the program wait for the group of items (9 items) to be loaded when the condition is TRUE and then check again?
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
var goal = $(document).height() - $(window).height(); // Bottom of the page
goal = goal*0.5; // Load more items before reach bottom of the page
// The following parts check if all the items are loaded. That works!!
var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML
total_results_to_show = group_of_villas_showed*results_to_show;
if(result_count/total_results_to_show<=1){
goal = currentScroll*2;
console.log("Finish");
}
// Check if the current scroll is greater than the setted goal
if (currentScroll >= goal){
console.log("start loading villas");
ajaxGet(guests_value,destinations_value,sort_by,current_page);
current_page++;
group_of_villas_showed+=1;
console.log("loading villas");
}
// With the use of this Loop program crashes
/*
while(currentScroll >= goal){
goal = $(document).height() - $(window).height();
var currentScroll = $(window).scrollTop();
goal = goal*0.5;
}
*/
});
ajaxGet = (guests_value,destinations_value,sort_by,page, replace = false) => {
$.ajax({
type: 'GET',
url: ajax_url,
data: {
guests: guests_value,
destination: destinations_value,
sort_by: sort_by,
page:page,
},
dataType: 'json',
beforeSend: function(){
$('#loading-image').removeClass('hide');
$('.yachts-search-page').addClass('loading-more');
},
success: function (data) {
//console.log('ajax success');
$('.yachts-search-page').removeClass('loading-more');
$('#loading-image').addClass('hide');
if(replace){
$('body .load-more-wrapper').show();
$('body .yachts-inner').html(data.content);
current_page = 1;
}
else
$('body .yachts-inner').append(data.content);
$('body .yacht-count').text(data.yacht_count);
newQueryString(guests_value,destinations_value,sort_by,page);
},
error: function(data){
//console.log('error wtf');
}
});
}
I found a solution thanks to Jay Kariesch's comment on this site. I used _.throttle which checks if the condition is TRUE every 300ms which is enough for the next group of villas to be loaded.
Thank you so much for your replies guys. You were extremely helpful!!
This is my working code now:
$(document).ready(function(){
// Check every 300ms the scroll position
$(document).on('scroll', _.throttle(function(){
check_if_needs_more_content();
}, 300));
function check_if_needs_more_content() {
pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
// Check if all the items are loaded.
var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML
total_results_to_show = group_of_villas_showed*results_to_show;
//console.log("results_to_show",results_to_show);
console.log("total_results_to_show",total_results_to_show);
console.log("result_count",result_count);
if(result_count/total_results_to_show<=1){
finish_check=1;
console.log("Finish");
}
else
finish_check=0;
//Items load condition
if ((pixelsFromWindowBottomToBottom < 500)&&(finish_check==0)){
//console.log("start loading villas");
ajaxGet(guests_value,destinations_value,sort_by,current_page);
current_page++;
group_of_villas_showed+=1;
}
}
});
How to load div and it's child elements when scroll event occurred with jquery?
For example, i just want to load this div and content inside this div only when user scroll
<div id="loadonscroll">
//some images and scripts inside this div need to be load on scroll
</div>
this works for me. When you scroll data will append on DIV TAG. and it should be displayed after Scrolling.
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call and append data on DIV
$("#loadonscroll").html(ajaxData);
}
});
//Scroll to buttom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var data = html code
$("#loadonscroll").html(data);
}
});
// near bottom!
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
var data = html code
$("#loadonscroll").html(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);
});
I am appending the data not in same div. But when I append data, my focus or scroll position goes in between the append content. Actually I am appending the data when user scroll to bottom.
But when I save google images, it loads some images then when user goes to last lines it loads more images without changing the scroll position.
Can we do in my example
http://jsfiddle.net/cQ75J/10/
var pages = [page_1, page_2, page_3, page_4, page_5];
var backupPages=new Array();
var totalPage = "page_" + pages.length;
$("#current").html(pages.pop());
$("#fullContainer").scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight && pages.length) {
// alert("--")
$("#next").html('')
$("#pre").html('')
$("#pre").html($("#current").html());
$("#current").html('');
$(this).scrollTop(
$("#current").html(pages.pop())
.appendTo($("#fullContainer"))
.height()
);
}
});
I have one example in which my need is same scrolling position after appending. But it create new div in current div. I need new data come in current(id) div and current data goes to previous(id) div
http://jsfiddle.net/hBvrA/
check updated fiddle: http://jsfiddle.net/hBvrA/1/
I have created function to update html structure
function updateContents() {
$("#pre").html($("#pre").html() + $("#current").html());
$("#current").html("<div>" + pages.pop() + "</div>");
$("#fullContainer").scrollTop($("#pre").height());
}
and called in scroll event with wait timer mechanism:
var timerWait = 1000;
var timerFlag = false;
$("#fullContainer").scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight && pages.length) {
// Clear timer
clearTimeout(timerFlag);
timerFlag = setTimeout(function() {
updateContents();
}, timerWait);
}
});
I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset in urls.py). Now I would like to load four more posts once user reaches the bottom of the page and keep on continuing that until last post is reached. How to achieve this?
If you want to load your content on reaching extreme bottom of document use following code:
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
// load your content
}
});
If you want to load content before reaching 100 pixel of bottom use
var loading= false;
$(window).scroll(function() {
if (!loading && ($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
loading= true;
// your content loading call goes here.
loading = false; // reset value of loading once content loaded
}
});
You can try something like this..
var processScroll = true;
$(window).scroll(function() {
if (processScroll && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
processScroll = false;
// your functionality here
processScroll = true;
}
});
You can make Ajax call to fetch more posts on 'onscroll' event of element (possibly on body in your case).
You can make the same call using jquery's '.scroll()' documented here: http://api.jquery.com/scroll/
You can probably maintain a previous-top statement to determine direction of current scroll.