webcreate/infinite-ajax-scroll

Turn your existing pagination into infinite scrolling pages with ease

infinite-ajax-scroll's Issues

Pages loading too early and tresholdMargin has no effect.

Hi,
Using your plugin her http://williamstaffordjewelers.bridgecatalog.com/results.cfm/Varga?pattern=-1
Next page is getting loaded the moment I touch the mouse wheel. By the time I scroll to the bottom of page 1, 10+ pages have been loaded.
I tried using tresholdMargin with as much as -500 with no effect.
This is both in Chrome and FF.

IE 7 & 8 Creates this error in console "Object doesn't support this property or method"

IE 7 & 8 Creates this error in console "Object doesn't support this property or method"

This line goes to jQuery.ias({

It works on all other browsers except IE, what do you think is the problem?

posts loaded with ias facebook like and tweet button not displaying

From what I understand reading a similar question you must refire the js in the callback onRenderComplete . This doesn't seem to work for me. What am I doing wrong?

jQuery.ias({
container:".posts_container",
item:".row.home.post",
pagination:".pagination",
next:"a[rel*=next]",
loader:"images/loader.gif",
onRenderComplete: function() {

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

}
})

Add Event Handler if no additional pages could be found.

I would like to inform my visitor about the status while scrolling - but only in case of there are no further pages anymore. I hope you unuderstand what i mean.

My goal is to display something like "That's it! No more to see...", or such.

Option to avoid to many page loads in order to reach the footer.

Great work guys!

I am using your plugin in a magento store with many products. The visitors are happy in the frontend, but they have problems using the footer stuff anymore.

Would it be possible to include an option to set a max. amount of page loads in order to reach the footer somehow?
I am thinking about some kinda solution like the one Goolge's using at google.com => Images.

Any idea how i could implement this by myself via build-in stuff of your plugin?

Thanks!

Submit button won't work after loading new content

Hello,

I have an issue with the script. I'm using it to load a list of posts with a comment form.

When the IAS is triggered, the comment forms work perfectly for the new loaded posts but not the previous ones.
When I try to add onRenderComplete :

$(".comment_F").livequery('submit', function() { ....

the new comments trigger the submit twice, but the old ones still don't work.

Can you please help me ?

This is the function :

jQuery.ias({
        container : '.postsList',
        item: '.infinitePost',
        pagination: '.pagination',
        next: 'a#next:last',
        history: false,
        onRenderComplete: function(pageNum, pageUrl, scrollOffset) {

             bindStyle();
            $(".comment_F").livequery('submit', function() {

        console.log('submit');

        return false; // cancel conventional submit
    });

}
    });

with jquery 1.7.2 i get the error "syntax error, unrecognized expression: [history=/page/1]"

As the title says with jquery 1.7.2 i get the error "syntax error, unrecognized expression: [history=/page/1]"

Loader doesn't show

I got everything working well so far with WordPress and masonry but the loading image won't show up no matter what I do. I checked that the path is correct but the loading container is not even being added to the DOM (not visible in devtools), it just won't work for whatever reason. noneleft won't show up either. This is the code, any help is appreciated.

// Infinite Ajax Scroll
$.ias({
  container: '#content',
  item: '.box',
  pagination: '#pagination',
  next: 'a.nextpostslink',
  triggerPageThreshold: 10,
  loader: '<img src="'+ Site.templateUrl +'/img/loading.gif"/>',
  noneleft: 'No more posts.',
  onLoadItems: function(items) {
    var $els = $(items);
    $els.imagesLoaded(function() {
      $content.masonry('appended', $els, true);
    });
  }
});

overflow div

hi

i'm opening a iframe using colorbox and i'm traing to duplicate facebook comments on a picture page (image on the left comments on the right inside a div with overflow auto)

all is nice and ok but ias is not loading items (works on every other page)

is there a way to tell it to use a container div to monitor the scrolling and not the bottom of the page ?

flash content does not load when IAS active

I work on a Tumblr theme and use IAS for infinite scroll capability. It was easy and flawlessly to integrate and works quite well –except for diverse flash content (particularly the audio player, in my case).

All flash on the initial page is loaded correctly. But when the plugin loads the next pages, it somehow seems to ignore the flash content and display the default error message "[Flash 9 is required to listen to audio.]" instead.

This seems to be a general problem with infinite scroll plugins:
http://stackoverflow.com/questions/10149882/infinite-scroll-breaks-flash
http://stackoverflow.com/questions/4218377/tumblr-audio-player-not-loading-with-infinite-scroll
http://stackoverflow.com/questions/10165501/tumblr-audio-video-players-masonry-with-infinite-scroll

Whereas several workarounds for other plugins exist (see links above), I couldn't find anything that would help me get IAS working properly.

Could anybody please advise!?

Logically unbind or turn off scrolling

Is there an accepted way to unbind or turn off scrolling when certain criteria is met? I find there are cases when you have a limited amount of data and when you reach that limit, it would be nice to turn of the scrolling or at least permanently hide the loading/nav container so the UI is less jumpy?

jQuery has some possibilities, but typically you rely on the plugin to clean itself up if destroyed. Any insight would be appreciated!

Thanks.

blank items on IOS

Hi,

And thanks for your this great script !

I have a problem on IOS (same on iPhone & iPad) :

When you scroll down, the content is loading great ... BUT : If you scroll down again when items are loading, ive got a "blank" items loaded, the page height is bigger, but the items are hidden

I have try with your demo page ( http://www.fieg.nl/ias-demo ), and you have the same problem

Any issue please ? :'(

Thanks

Manual trigger

Hi, thanks very much for this work!

Is there any way to make the plugin work in manual loading style, meaning with a link or button to trigger the load?

Don't know, maybe something like a "manualTrigger' option set to true and 'manualTriggerElement' set to an HTML element Id like anchors or buttons.

Thanks very much

Regards

don't unbind scroll when pager doesn't have 'next' href

i am filtering my list via ajax, and if i add a filter that would limit the results to only 1 page (or zero pages, if no results found), my pager will not have a 'next'. but if i remove some filters to get a wider result set again, the plugin no longer paginates.

i commented out line 180 in function paginate (where it calls stop_scroll) and everything works fine. is there a need/reason for the unbind?

thanks

Changing url hash after scrolling is breaking the back-button

When scrolling IAS adds a page indicator to the url (#/page/2 etc.). The changed hashes are added to the browsers' history, causing the back-button to navigate back to a previous IAS-hash (e.g, #/page/1), instead of the previous page.

Bug with JQuery 1.8

Hi,

I have been using the latest jquery : http://code.jquery.com/jquery-latest.js

It made the scroll not work correctly like already described in issue #12.

Reverting to 1.7 made it work: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

thanks for the good work.

Jquery/javascripts not working with contents loaded with IAS

Hi, I'm using your Infinite Ajax Scroll in my site. I'm really liking for its easy usage.

It is working fine except for one problem. Any contents that is loaded thou the IAS are not functioning with Jquery or Javascripts. I'm not good with javascripts or jquery that much, so need help on it.

Just giving one sample of the code I need to get working. This code interacts with delete button of each items when clicked. The items loaded with IAS are not interacting with this script.

<script type="text/javascript"> $('.deleteRiver').click(function(){ var riverid = $(this).attr('riveritem'); if (confirm('Are you sure you want to delete this River?')){ window.location.href = "/actions/riveritemdelete.php?riverid="+riverid; } else { return false; } }); </script>

And below is your IAS code i'm using.

<script type="text/javascript"> jQuery.ias({ container : '#river_container', item: '.river_item', pagination: '.river_pagination', next: 'a.back', loader: '

', scrollContainer: $('.river_item_list') }); </script>

There are other scripts too need to work but If you help me on this one I can do the rest myself. I just need a solution to this problem.

'noneleft' option not working

Seems the 'noneleft' option is not working. I have a 'noneleft' text defined but its not displayed when there is no new page to load...Please fix it

Allow for callback functions to override default behavior

Callback functions might include:

• onLoad, called when the we are starting the ajax request
• onSuccess, called when a new page is successfully loaded
• onFailure, called when a error occurs when trying to load the next page
• onInsert, called when a new item should be inserted
• onLastPage, called when the last page is loaded

IAS not picking correct new results

I'm having a problem with the "new results" when scrolling down. The first moreitems1.php is being loaded correctly. But if i scroll down even more it still keeps loading moreitems1.php over and over again.

The code of moreitems1.php to go to the next page:

Online example: http://song-lyrics.mobi/

Any idea what i'm doing wrong?

Content placement onLoad ?

Figured out my apology

Possibility to send additional post/get data, and on beforeCall event.

• Implement possibility to add post or get data, - usable for instale with a filter page for products or what ever.. where you want to add pages based on these filters.
• Aditionali a onbeforCall function where you could dynamicly override initalized default values.

Cant scroll

heres the site im working on

http://kilroymetal.com/testimonials.html

it wont scroll just goes to the next page. Please help

Add onclick function

Hi! Have you any idias to add "onclick" function? If it is possible give me an example please...
I want to click button and my posts will uploads without scrolling the page.

Sorry for my english, i am from Russia. Thank you.

Demo doesn't work

I've been trying to implement this on a site for a whole day now without any luck, so I uploaded the demo, changed the script src paths in page1.html and when I run it, nothing happens.

Can someone confirm if the demo even works?

Option 'triggerPageThreshold' not working

In README.textile option named as 'triggerPageThreshold', but in JS code it's a 'triggerPageTreshold'. There is different by 1 char.

Force load

There's a case where "show more" link should be displayed, but when user clicks on it the script should load next page by AJAX. This can be implemented two ways -

1. Adding some class name to the link which says "don't hide me" and processing the click as it usually process scrolling.
2. Implementing "force next page load" function available from the page's JavaScript, then developer can call it from his own code.

Is there support of any way (or may be any other way) to make force load currently?

not working

Hi I've followed all the steps but can't get it to work? Please help. It seems to be stuck when hiding the pagination.
Also says "uncaught typeerror: object #container has no method 'scroll'.

http://tickatrip.com/joomla/tests/pag/pagination2.php

http://paste2.org/p/2405178

Trigger text / link not displaying once threshold met.

I might have this wrong so excuse me if i have. I have the threshold set to around 6 pages I have 15, to my understanding once this threshold is met a link should be displayed, however I am not seeing one? does this need som configuration to work? or some HTML to cling to?

Tried a few different settings including changing the text trigger: "text", but alas nothing!

IAS doesn't work in iPhone Safari IOS 6.1.2

Thank you for your nice plugin! It works fine on iPad, but doesn't work for me on iPhone.

Preload pages

I had a quick question. I've like 10 or 20 pages and I was wondering if there's a way to just show a loading.gif when going back in the history until all posts till page X have loaded and then scroll to that point and show them, instead of going step by step. Any ideas?

Great plugin btw, everything worked out of the box.

Minified version does not include beforePageChange event handler

Hello,

Thank you for this great library !

I am using the minified version but it seems that it does not include your new event handler "beforePageChange".
It works with the "classic" version

Not working in IE8-9

Your demo page is working fine in Firefox, Chrome and Safari, but in Explorer 8-9 it just keeps loading without retrieving content. Any thoughts?

Missing the scrollContainer parameter from $.ias.paging function (fix)

Line 17-22

$.ias = function (options)
{
// setup
var opts = $.extend({}, $.ias.defaults, options);
var util = new $.ias.util(); // utilities module

var paging = new $.ias.paging(opts.scrollContainer); // paging module

Wrong:
Line 500-502
// paging module
$.ias.paging = function ()
{

Good:
// paging module
$.ias.paging = function (scrollContainer)
{

And should change:

• scrollContainer.scroll(scroll_handler); //516
  //$(window).scroll(scroll_handler);
• curScrOffset = util.getCurrentScrollOffset(scrollContainer); //537
  //curScrOffset = util.getCurrentScrollOffset($(window));
• scrollOffset = scrollOffset || util.getCurrentScrollOffset(scrollContainer); //575

Bug with IE

Hi,

I fixed the bug when run on IE with error "Object doesn't support this property or method"

Just declare "container" variable before using it at "loadItems" function.

Thanks for read.

Issue in image loading in loader

i am trying to load the image in the loader attribute but it is not loading.

loader: ''

Please help me.

Load variable results

I'm not sure if I'm correct here, but my understanding is that a new page is added each time. I wish to load X results each time rather than a full page.

I'm using media queries to identify the screen width, and therefore the number of columns in a grid layout. If a large screen, then the grid is 10 items wide, whereas a mobile in portrait would only show 2 items wide. Loading 80 records is fine for a desktop, but I only want 16 for a mobile...

Any pointers would be appreciated!

Thanks

Ensure only one IAS instance is active on an element ?

Hello,

I'm using your plugin for ajax-retrieved content. I have a paginated list of items, retrieved when I click a button (for instance). When the Ajax request is complete, I re-initialize IAS so that the pagination takes place...

If multiple clicks are made on the button, IAS behaves badly : when I scroll down, my browser detects multiple requests for the next page, and the next page is displayed multiple times.

I think the plugin should take care about this. Of course I can reduce the risk by limiting multiple clicks, but the plugin should be more robust. What do you think?

How about performance?

Html5 in Chrome

Is there any problems in Chrome with html5 now?
Maybe we can remove this line?

src/jquery-ias.js:635

function init()
{
  isHtml5 = !!(window.history && history.pushState && history.replaceState);
  isHtml5 = false; // html5 functions disabled due to problems in chrome
}

problem calling pagination link with javascript

Hello,
My navigatoin links are of the form

paginate

however this doesn't seem to work.

Alp

Lightbox (prettyphoto) JS not working in loaded items.

Hi, I have an issue with lightbox script. In items I have links that open lightboxed content. And it dont work when I click it in loaded items (meaning 2nd, 3rd... page). Looks like it dont read the implementation code which is:

<script src="./js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script>

Can I get some help with that?

Changing url hash after scrolling is breaking the back-button

When scrolling IAS adds a page indicator to the url (#/page/2 etc.). The changed hashes are added to the browsers' history, causing the back-button to navigate back to a previous IAS-hash (e.g, #/page/1), instead of the previous page.

Scroll back to previous results...

I have set up ias with ease at this address: http://jb.utad.pt/familia2/fabaceae (List of Flower species that belong to the family Fabacear)

The PHP with the htaccess also allow the URL also to be in this form: http://jb.utad.pt/familia2/fabacea/paginaX (pagina meaning page in portuguese).

What happens is that if a user goes directly to (let's say) page 10 .... he won't be allowed to scroll back ... and thus won't see a lot of results this page gives... this is a major issue as Google has indexed plenty of our result pages for this file ...

Can it be fixed?

Cheers.

pagination disappear after the first page load

i have a fully working php pagination without ias.
when i activate ias with jQuery 1.8.3, the first next Page loads perfect like it should,
but always the second not!
when i analyse the HTML with Firebug, i see after the first ias-load the whole pagination disappears?

i also checkt my whole CSS & HTML Setup for the container, item and the listing.
all is like it should.

what could make the pagination disappear?
thanks for the script and help

Firefox problem

Your infinite scrolling works perfectly on chrome..but not on firefox..is this a known issue?

Google Analytics tracking

Allow to track pageviews for next pages with Google Analytics.

Product Hover Issue

I am working on a site that contains a list of product images. When a visitor hovers over a product, the behavior is similar to the google images hover behavior. I have incorporated the infinite-ajax-scroll plugin and the scroll works fine, however once I scroll down and the new products are loaded, the hover for the new loaded images no longer works. The hover is completely controlled by js. Any ideas on how to get this to work?

problem with Read More link

Hi,
i have a question, i just installed infinite scroll, everything is ok and working well.
But i need to make "Read More" or "More Links" in end of page. i don't want scroll and loadin page automatic!
i need to click on link and then loading next page! click on button and my posts will uploads without scrolling the page.
how i can do that?

thank u

Is there a trigger to activate page-loading from outside?

Hi,

thx for this great solution :) It's really a great idea and very very useful!

In my case, I have a list of items with links that open new content in a lightbox. The lightbox delivers prev-next links, but when walking through the list, I end at the last loaded item although there were more items when I scroll at the end...

So what I need would be a function that triggers the next page loading when I load the let's say lust but one item in the lightbox. I walked through the code but could not detect a possibilty.

Is there a trigger? Or any hint to create one? :)

Thx again and kind regards!

Not Scrolling

My page isn't scrolling and I was hoping you would be able to help pin-point where it is:
http://paste2.org/p/1778006

I have followed all the steps that you have listed in your support tried to match up my classes and IDs... unfortuantely none of your examples are just simple pages, so it's hard to pinpoint what is doing waht.