I'm trying to get infinite scroll to work, and so far I have this:
$(window).scroll(function () {
var load = 0;
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
load++;
$('#posts').append(load);
$.post("includes/ajax.php", {
load: load
}, function (data) {
$('#posts').append(data);
});
}
});
And here is the contents of ajax.php
$load = htmlentities(strip_tags($_POST['load'])) * 2;
echo $load;
I have two problems that I don't really understand. 1. When I append load to #posts directly as a test, it works fine, but it keeps saying 1, 1, 1, instead of adding to itself. 2. When I try to do it using the post ajax to my php file, nothing happens. I followed a video tutorial exactly, but it's not working for me.
put the var= 0 outside of the function
Related
Im a really huge noob on jquery, I need to figure out how to change this code:
$('.social li').appear();
$(document.body).on('appear', '.social li', function(e, $affected) {
var fadeDelayAttr;
var fadeDelay;
$(this).each(function(){
if ($(this).data("delay")) {
fadeDelayAttr = $(this).data("delay")
fadeDelay = fadeDelayAttr;
} else {
fadeDelay = 0;
}
$(this).delay(fadeDelay).queue(function(){
$(this).addClass('animated').clearQueue();
});
})
});
to work in the way that it would start animation as soon as someone enters the landing page, right now it works good on everything besides IE10 and IE11, was told to change it to load by default not on "appear" but I tried document ready/load and I can't get it to work...
You could try fading all list items into view, each with a progessing 250ms delay:
$(window).load(function() {
$('.social li').hide().each(function(i) {
$(this).delay((i + 1) * 250).fadeIn(2000);
});
});
EDIT:
Using the same logic as your previous code to refactor, use the window.load method since the load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames etc have finished loading. So use this event to do the fading in animation of the list items into view, where their initial state will be hidden.
You have two variables declared fadeDelayAttr and fadeDelay but I noticed that only fadeDelay is being used, so fadeDelayAttr can be discarded. Also, this part of the code:
if ($(this).data("delay")) {
fadeDelayAttr = $(this).data("delay")
fadeDelay = fadeDelayAttr;
} else {
fadeDelay = 0;
}
can be simplified as the null-coalescing operator using a logical OR (||):
var fadeDelay = $(this).data("delay") || 0;
Since the fadeDelay variable gets its value from the data-delay attribute, this can then be passed in as an argument for the delay method and finally the refactored code will look like this:
$(window).load(function() {
$('.social li').hide().each(function() {
var fadeDelay = $(this).data("delay") || 0;
$(this).delay(fadeDelay).fadeIn(2000);
});
});
Working Demo
I am using the below functions to load more results when scrolling to the bottom.
Everything is working well; the only problem is that when some content is loaded, the window scrolls back to the top instead, as if to keep the same position that it had before rather than loading new results. Actually, it does not go back completely to the top, instead it goes back to the height of the first loaded result. Therefore, to see the content that was just loaded, you must scroll back to the bottom. This is where this 'cycle' will start over again...
$(window).scroll(function () {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
document.getElementById("loader_bar").style.display = 'block';
load_result();
}
});
function load_result() {
counter = check_counter();
type = $("#search_type").html();
key = $("#search_key").html();
$("#load_result").html("<p id='loader_bar' style='width:100%; height:32px'></p>");
var par = "key=" + key + "&type=" + type + "&counter=" + counter;
$.ajax({
url: "ajax/search-columns-result.php",
success: show_result,
data: par,
type: "POST"
});
function show_result(rs) {
if (rs != '') {
$("#load_result").html(rs);
$('#loader_bar').css('display',"none");
}
}
}
function check_counter() {
if( typeof check_counter.counter == 'undefined' ) {
check_counter.counter = 3;
}
return check_counter.counter++;
}
It looks to me like each time you call show_results, you are overwriting any previous results from the auto load:
$("#load_result").html(rs);
This would cause your the elements to be removed and then the window would scroll up (because the height of the entire document is now shorter).
I think you instead want to call
$("#load_result").append(rs);
You would also need to change how you are creating/showing your loader. Instead of:
$("#load_result").html("<p id='loader_bar' style='width:100%; height:32px'></p>");
You would have a the #loader_bar in the DOM after the #load_result element, and simply toggle display: block/display: none
Demo of your code (slightly modified to get it to render, not sure what your DOM structure is like).
Demo of fix
after ajax success you can set different properties scroll bar.you can set scrollbar position after ajax call success/loading new content e.g
window.scrollTop(0); //for auto scroll to top
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.
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.
I'm trying to hook function callback when iScroll container reaches end of page, at the bottom end (Y-axis). So that I can load more content on demand - instead of all 300+ contents.
Has anybody worked on it? Any hints?
Here is the library I was referring to: http://cubiq.org/iscroll-4
As drmatt metioned, you should look into Pull to refresh demo
http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
You need to build you own logic which won't require user to pull to add more items.
Something like following (pseudo code - not tested code):
var isAlreadyLoading = 0;
var iscroller = new iScroll(
'your-element-id',
{
hScroll: false,
bounce: false, // do not bounce
onScrollMove: function () {
// CHECK if we've 350px gap before reaching end of the page
if ( (this.y < (this.maxScrollY + 350)) && (isAlreadyLoading == 0) ){
// start loading next page content here
// update this flag inside load more and set to 0 when complete
isAlreadyLoading = 1;
}
},
onScrollEnd: function () {
// check if we went down, and then load content
if ( isAlreadyLoading == 0 ) {
// Load more content
// update this flag inside load more and set to 0 when complete
isAlreadyLoading = 1;
} else {
// DO NOTHING
}
}
} // end of Scoller config object
); // end iScroll instance