I created a simple infinite scrolling for my website which shows more images when scrolling at the bottom. It works great with Chrome but when I test it on Internet Explorer the loader shows results multiple times. I don't know where is the error.
Here is my jQuery code:
$(document).ready(function(e){
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
var pictureCount = $(".Picture-1A").length;
$.get('ajax/home-pagination.php', {off_set:pictureCount}, function(data){
$("#homeContent").append(data);
});
}
});
});
I send the off_set to the php page which will return the data with the new pictures and append it to the end of the page
this should work:
first implement the cdn of debounce to your page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
then
in your scroll function, add the debounce function like this:
$(window).scroll($.debounce(100, function(){ /* function */ }));
Hope this works for you too. :)
Related
Ehy guys. I have a strange kind of problem. I've created a button to scroll the page to the bottom when the user clicks it, and it works only if I use scroll(0,0), while if I use scrollTo(0,0) (which should work in the same way I guess) doesn't work (the page doesn't scroll, nothing happens). Here is a part of code: this is the function which should scroll to the top after click using scrollTo but which doesn't do anything.
<button id="scrollaInAlto" onClick="scrollInAlto();"
style="background-color:Transparent;border:none;display:none;"></button>
<script>
function scrollInAlto() {
window.scrollTo(0,0); <-- this one doesn't work
//window.scroll(0,0); <-- this one works
}
</script>
The only other thing I have is a small script to show and hide the button which scrolls the page: here it is.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $temp = $("#scrollaInAlto").scrollTop();
if (document.body.scrollTop > 50) {
$("#scrollaInAlto").show();
} else {
$("#scrollaInAlto").hide();
}
});
});
</script>
Why doesn't scrollTo work properly?
I'm making a simple little website to apply a different formatting style to Reddit posts, I'm trying to add the infinite-scroll jQuery plugin but it doesn't do anything. I tried following the (very simple) instructions on the infinite-scroll page and when it didn't do anything I thought I must have entered something wrongly, but then I just copy/pasted the code from the Masonry/Infinite-Scroll example and it still didn't work. Masonry is working perfectly (finally) but I just can't figure out what is wrong with infinite-scroll. I understand the basics of jQuery and JavaScript, but obviously not as much as most of you people, so could you please help me out and let me know what is wrong? My site is live at reddit.ymindustries.com.
Thanks heaps, you guys have rarely failed me so far.
YM
EDIT: If there aren't enough images to fill up the page on the homepage, visit reddit.ymindustries.com/r/aww for more images.
EDIT 2: I believe I located the issue, it is described here: https://github.com/paulirish/infinite-scroll/issues/5
Now to figure out a fix...
EDIT 3: Added a little bit of a hack in to make it sort of work, but it just seems to loop the second page endlessly now. Hmm...
I think your problem is actually css. Make your page longer that client area height. add more images to $container
Point is, botom edge of your $container need to pass bottom of window so scroll event fires so infinite scroll can react on this event and calculate weather or not edge is reached
BTW, in same cases, for instance, when I shrink my window, the example you set is working.
=== UPDATE ===
I found some time to play with infinitescroll and here is final working script, just set pathParse method in your script
$(function () {
var $container = $('#itemContainer');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector:'.item'
});
});
$container.infinitescroll({
navSelector:'.navigation', // selector for the paged navigation
nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
itemSelector:'.item', // selector for all items you'll retrieve
bufferPx:40,
debug:true,
columnWidth:function (containerWidth) {
return containerWidth / 5;
},
loading:{
finishedMsg:'No more pages to load.',
img:'http://i.imgur.com/6RMhx.gif'
},
pathParse: function(path,page){
return $(this.nextSelector).attr("href");
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}
);
});
Now, since your next link will not update by it self (http://reddit.ymindustries.com/?after=t3_yh4av), you need to change the callback to pull out last element from ajax response and change next link... could be something like this
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
// ======> if query parameter after=... is caring filename then do this
var lastImageUrl= $newElements[$newElements.length-1].attr("src");
var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
$("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}
You also need to take care of wich version of infinite-scroll your using since if you use the ones that comes with masonry/isotope (version 2.0b2.110713), both need a little hack in order to call the function and not use the predefined array:
//old code, to be changed (line 489)
desturl = path.join(opts.state.currPage);
// new code
desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);
This is already fixed in the newer versions of infinite-scroll
I had the same problem with jQuery's "infinitescroll" and Masonry. You might just solve this by giving your page more initial items so that the plugin's scrolling detection kicks in.
In WordPress this is under the "Reading" settings. By default WordPress only opens 10 items at a time. You could increase that number to 100/page to be more sure the window will be full initially. I had some code here that was just horrible, turns out I just needed longer pages, not more code.
So it's difficult to test these plugins on large displays if you don't have enough images. Maybe the solution is to scale the images larger on large displays so you're more sure about getting your content below the fold.
If you think someone might get to your website with a really huge display, I'm not sure what the answer is other than showing more items/page and maybe adding $('#masonry').infinitescroll('retrieve'); to your footer to load an extra page just in case.
I load my content per $.get and "follow" the new appended data per javascript-auto-scrolling. Now I want to disable autoscrolling if the user "scrolls manually", but the following scroll-to-bottom function also triggers the Jquery .scroll()-function - so it disables itsef.
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
How can I receive a mouse-wheel event or prevent scrollTop to trigger the .scroll()-function? I also tried to set a Timeout to block while scrollTop is working, but this isn't a great solution and has a few drawbacks.
Any suggestions?
EDIT :
My current code:
I use the button #stb (scroll to bottom) and the class .active to to turn it off/on.
$.get("url", function(data){
//do something
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
});
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//$("#stb").parent().removeClass("active");
});
ps: Yes, I know. There are a few quite similar questions. I read them, but they differ in important points.
To stop a scrollTo event on user-interruption mid-scroll try this:
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//jQuery.scrollTo.window().queue([]).stop(); //failing that try this
});
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');
}
});
I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
window.onbeforeunload = function () {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.
I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
$('a.lockscrollbar').click(function() {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.
Any ideas?
This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:
$(window).on('load', function(){
$('html body').scrollTop(0);
});
Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)
var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);
Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.
This is the code I use (tho the site I'm working on is still in build stage, but this works):
$(document).ready(function(){
$(window).scroll(function(){
var posY = $(document).scrollTop();
$('#trigger').click(function(){
if($.browser.webkit){
$('body').stop().animate({scrollTop:0},'slow');
}else{
$('html').stop().animate({scrollTop:0},'slow');
}
});
});
});
Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).