pklauzinski / jscroll Goto Github PK

An infinite scrolling plugin for jQuery.

JavaScript 100.00%

jscroll infinite-scroll infinite-scroll-plugin jquery-scroll autoscrolling auto-scroll scrolling autopager jquery-plugin

jscroll's People

Contributors

Stargazers

Watchers

Forkers

frickreich ejam17 zubairdumca09 charlester ayush88 baryca wiki-g13 garyopen hisapy caishuai eroh92 parkmap bogdanciocoiu chandrasekhar4u ashahab jamesparasole mikhailovg imranghory gangreja adamhut ghazaltaimur makeclan gpayer b3nelof0n mazahaca portfoliorepublic siso51 xgrommx agusprasetyo811 aubrym biks152207 andres-botero arpitremarkable sherwyngoh jonathansantilli maruf3319 iodman uxigene minhsong 18c sivaranjan maximechaillou ralves87 norbert-vamos gudata bravi-a stuartm danogwok kimroen amclarren way1129 maralmosayebi nicopenaredondo shailesh33260 jmeivan calipsod calvin-calvinchow varabei zuchmanski orszaczky vladnov elucidat sirithink gnux123 mitijain123 suzzee ramipa777 ajm339 thehox douglaskh spurdow upendra10 piotrkwiatkowski kirtithakur2012 evatechsoft tekyegah amykw bclarklax bthibault geneculver fflewddur vkweberti ryanmarfone pauloortins cavalryjim joeyemery makemeweb-audrey-cools samarkandiy guardiancomics sutulustus cwirz russelltaff vhagerty nunodotferreira yodathedark tamilps2 sivaplannto rickaahz wcatron nathanoehlman

jscroll's Issues

No NuGet package available

Most .NET programmers nowadays load library dependencies through NuGet. It would be great of jScroll would also become available as a NuGet package.

adding in a delay

just wondering if there was a way of adding in a delay to stop the next load from firing again after one has just been fired.

im having an issue where im loading images in and of course i think because the images also take time to load in and change the height of the element its firing off the call to load again because its basically only increased the height of the dom element by about 40-60px before the images fully load in.

is there anyway to put a delay flag into the options array perhaps?

thanks

Dan

Loads content early

This is the URL to reproduce:

http://test.plumaz.com/library/

I begin to scroll down and more content rows appear below before the getting to the scrolling point , ..

What am I doing wrong ?

Can't get it to work

Am I the only one that can't get it to work?

<html>
<head>
    <style>
    </style>
    <script type="text/javascript" src="jscroll.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
        $('.scroll').jscroll();
    });
    </script>
</head>
<body>
    <div class="scroll">
        <h3>Page 1</h3>
        <p>Content here...</p>
        <a href="example-page2.html">next page</a>
    </div>
</body>
</html>

Nothing really happens.

http://jsfiddle.net/d2Lrm2a5/

Javascript doenot work for other data but first page

I have implemented jquery jscroll on first page load all data is showing perfectly with the perfect respective animation but on 2nd data set animations are not working. What I am doing is i have made a partial page which loads all time the data set comes and set all javascript in main page.

Bower integration

It would be great if you can integrate a bower.json file for bower manager.

More informations here: http://bower.io/

Thanks.

return from history

When a user returns from history. He will begin on top again and needs to scoll again the whole list.

nextSelector/contentSelector problems

Using these two together doesn't seem to work, and the debug info is unclear.

When using them both I see:

nextHref: "undefined #the-content"

This doesn't work, and just gets jittery at the bottom of the page, not loading in any content (#the-content is the correct selector for the content I wish to load in).

When only using the 'nextSelector' I see:

nextHref: undefined

Oddly it pulls in the content from the correct href just fine, even though it's undefined. The issue with the second example is that because I'm not providing a contentSelector it's just grabbing the entire HTML which obviously isn't ideal.

Not really sure what else to try?

How to combine jscroll with isotope ?

is there any way to combine jscroll with isotope? If I get the loaded content then I think that will be possible.

autotrigger

I set up a text case using the default settings and it is not autotriggering. The next page link appears.
My code follows:

<html>
<head>
<script src='paging2/jscroll-master/jquery.jscroll.min.js'></script>
</head>
<body>
<div class="scroll">
<h3>Page 1</h3>
    <p>Content here...</p>

<p>
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</p>
<a href="ep2.html">next page</a>
</div>
<script>
('.scroll').jscroll({autoTrigger:true});
<script>
</body>
</html>

PHP & MySQLi - can't get it work

I think my code is right but i can't get it work don't know why. Here's d code.

 <script src="js/jquery.jscroll.js"></script>
 <script src="js/jquery.jscroll.min.js"></script>

<script type="text/javascript">
$( document ).ready(function() {
 $('.jscroll').jscroll({
 autoTrigger: true
 });
 });
</script>

<div clsss='jscroll'>
<div class='col-md-12 col-xs-12' style='padding:3px;'>
          <p class='z-depth-1'>
          <a href='product_details.php?product_details=$row[ID]/$row[item_name]'>
          <img src='$row[url1]' style='height:auto; width:100%;' draggable='false' />
          </a>
          </p>
          <p class='price' style='color:grey;' align='center'>$row[item_price] BHD</p>

          </div>
          </div>

No next href present but it hit load function

When I don't have any content to load still it hit load. In my page there is no next link.
So I change some _setBindings() and added bellow two lines

if (!$next.length)//if there is no next selector then don't need to bind scroll
   return false;

_setBindings = function() {
            var $next = $e.find(_options.nextSelector).first();
            if (!$next.length)
                return false;
            if (_options.autoTrigger && (_options.autoTriggerUntil === false || _options.autoTriggerUntil > 0)) {
                _nextWrap($next);
                if (_$body.height() <= _$window.height()) {
                    _observe();
                }
                _$scroll.unbind('.jscroll').bind('scroll.jscroll', function() {
                    return _observe();
                });
                if (_options.autoTriggerUntil > 0) {
                    _options.autoTriggerUntil--;
                }
            } else {
                _$scroll.unbind('.jscroll');
                $next.bind('click.jscroll', function() {
                    _nextWrap($next);
                    _load();
                    return false;
                });
            }
        },

I want to know is't correct or there is another way to do that or it has that type of functionality I implement it incorrectly that's why it hit load function thought there is no next page

Not Working in iOS5 / iOS6

Is there a way to get jscroll working in IOS5 & iOS6?

Scrolling table rows

Hi,

I'm currently using jscroll as is the best and simplier approach (out-of-the-box) to achieve what I want. Although I'm facing some issues when using it to scroll table rows:

Given the jscroll binding:

$('.infinite-scroll').jscroll({
    debug: false,
    autoTrigger: true,
    nextSelector: 'a#NextScroll'
});

And the following HTML snippet:

<div>
    <table>
        <tbody>
        <tr>
            <th>id</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
        <tr>
            <td colspan="3">
                <span>
                    <a id="NextScroll" href="/visor/logpage"> NEXT </a>
                </span>
            </td>
        </tr>
    </tbody>
    </table>
</div>

I tried attaching the CSS selector class 'infinite-scroll' to both the outer div, the table, and the tbody tags. With all tests I got the same result as expected:

<div>
    <table>
        <tbody>
        <tr>
            <th>id</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
        <tr>
            <td colspan="3">
                <span>
                    <a id="NextScroll" href="/visor/logpage"> NEXT </a>
                </span>
            </td>
        </tr>
        <div class="jscroll-added">
            <tr>...</tr>
        </div>
    </tbody>
    </table>
</div>

The issue is as jscroll load the new content inside a new div 'jscroll-added'), the columns of the table are not aligned along all the page.

Is there any way to avoid o remove those 'jscroll-added' divs and simply add the AJAX loaded content as-is ?

has no method 'destroy'

I'm getting this error in the console with debug on.

jScroll: nextSelector not found - destroying jscroll.jquery.min.js:15 Uncaught TypeError: Object function (c){return this.each(function(){var f=b(this),e=f.data("jscroll");if(e&&e.initialized){return}var d=new a(f,c)})} has no method 'destroy'

Will this work with Zepto js (now or in future)?

Just curious! :)

Using with MySQL Data

Is it possible to use jScroll with data from a database?

Change state of autoTrigger during runtime

Hi,

is there a simple way to change the status of the autoTrigger during the runtime?

I have an "infinite" list of content and on site number one it shows up the first 6 results. In my initial call I would like the User to activiley press "show more" and from there on I want to change the autoTrigger to "true" so that the user can load more sites with also 6 results on every call just by scrollin down the page.

An option like "autoTriggerUntil" would be nice, where we can set an value from where we turn ON the autoTrigger - like "autoTriggerFrom" :)

Kind regards, Marco

Codeigniter & jScroll

Firstly thanks for this awesome little plugin it has been super easy to get in and running, however I have hit a little bump which I hope you will be able to help with.

On the first load of the view CI places a next link in this case (http://localhost/index.php/board/morePosts/30) and the first scroll works unfortunately jScroll then destroy's the link and it stops.

What I need is a way of loading in a new link for scroll to grab a hold of, should I be using page numbers? I am struggling to work this out as the pagination links are being loaded using PHP and driven to the browser only on first load.

Thanks

Justin

Can anyone provide a full demo of an ajax jscroll? I was searching for it all over the internet and didn't find a single one than snippets

Monitor the scroll of the window and not the container

You plugin is great and almost working for me. My issue is that the scrolls are not calculated correctly because my container does not have a height. All of the elements inside of my container are floated and therefore the container has a height of zero.

Any work arounds for this? Most of the other infinite scrolling plugins allow you to configure an element to bind the scrolling to with the default being $(window).

Documented versions differ

The readme says: @Version 2.3.2
The code says: @Version 2.3.4

Trigger _load()

How can I trigger the _load function from external?

like $('.element').jscroll('load');

Thanks,
Oscar

_destroy does not remove data from target element

Destroy function removes data jscroll from the window and not from the targeted element. I just put there this line:

$e.removeData('jscroll');

to fix my issues. I could not rebind the functionality after destroying it, because data was already set.

Problem with dynamic content

I have an instance of jscroll binded to my element div#results. Using filters, my user may narrow the search which launches an ajax request that updates div#results. It seems jscroll does not work after the content has changed (even if I have an element with the selector).

I tried destroying jscroll and rebinding again once the content has changed but I had no success so far. Help?

Thanks!

custom append position?

is it possible to have an option that defines the position in the dom where to add the response and remove the additional divs?

I have a list and want to add more li to it upon scrolling. all elements need to be in that list to work with my sorting logic.

thanks.

Multiple jscroll in same page.

How can I implement multiple jscroll in same page ?

I tired to implement 2 jscroll, but only one works, If i comment one the other one works.How can i make both of them work ?

regards,
Prasanth

other plugin and event bindings on loaded page content is not working

I have some plugin on returned page content, but its not working when page load from ajax. I have tried using callback and then it works but performance get slow.

Is there any option to get the ajax response, so I can attach my plugin on the response itself, not on hole page on every page load. Something like below will be helpful.

     callback : function(res, status){
              //callback should have the response and xhr object 
              get the response and do the plugin binding 
              $(res).bind(event)....
     }

Please let me know if you have any better way to deal with this.

Feature Request: Allow for autoTrigger:false after users clicks Next Page

Is there a way to allow all remaining content to load after a user clicks the Next Page button when using the autoTriggerUntil option? For example: A page has 50 results, but I choose to show the first 18 on page load using the autoTriggerUntil option, then I click the Next Page button and the remaining 32 results load (with no additional clicks on any Next Page buttons). The Next Page button would only ever appear once on a page.

Needs a user option to handle error from .load()

It should have a callback for when .load() (inside _load()) returns an error. Otherwise the loading image just sits there....forever.

At the moment I'm doing this (I should probably do a pull request or something but I'm still learning my way around GitHub):

$inner.find('div.jscroll-added').last().load(data.nextHref, function(r, status, xhr) {
if (status === 'error') {
// Let the user know there was an error loading the next set of content.
$('.jscroll-loading').empty();
$('.jscroll-loading').html("There was an error retrieving the next set of data");
// Remove the loading image.
return _destroy();

Unable to reinitialize after ajax

Having an issue where jscroll doesn't bind after ajax load. I've read "Problem with dynamic content #11" which sounds like my issues, but cannot find a resolution. jscroll doesn't seem to want to find after being destroyed.

$('#search').on('input propertychange', function() {
    $.ajax({
        url: 'list.php?query=' + $('#search').val(),
        success: function(data){
            $('#file-container').jscroll.destroy();
            $('#file-container').html(data);
            $('#file-container').jscroll({
                debug: true,
                nextSelector: '.more',
                autoTrigger: false,
                loadingHtml: '<div id="processing"></div>'
            });
        }
    });
});

Automatically Add data infinitely without scrolling

I have code it in MVC .net but problem is that It automatically goes to infinite loop without scrolling it starts loading recklessly without moving to the bottom of the page. The following is all the code I implemented. Its on stackoverflow please check for further details

http://stackoverflow.com/questions/31787566/jquery-jscroll-not-working-properly

Do not self destroys when there is only one page

Simple test to reproduce the results
jquery :1.9.1
jscroll:  v2.2.4

<html>
<body>

<div class="scroll">
    <h3>Page 1</h3>
    <p>Content here...</p>
  <a >next</a>
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.jscroll.min.js"></script>
<script type="text/javascript">
$('.scroll').jscroll({
  loadingHtml: '<a>loading...</a>',
});

 </script>
</body>
 </html>


It will show loading... , if  "loadingHtml" is a gif animation it plays indefinitely.

Thanks for creating a great jquery plugin

Automatic added class problem

I wanted to add only content those loaded. Here automatically added '.jscroll-inner' & '.jscroll-added'. I wanted to remove this two class '.jscroll-inner' & '.jscroll-added'. How I do this?

Not working on IE8

Hi!

IE8 returns 'medium' instead of a number for css('borderTopWidth') when no border is set... that makes _observe fail working.

So I changed _observe to this:

function _observe() {
var $inner = $e.find('div.jscroll-inner').first(),
borderTopWidth = parseInt($e.css('borderTopWidth')),
borderTopWidthInt = isNaN(borderTopWidth) ? 0 : borderTopWidth
data = $e.data('jscroll'),
iContainerTop = parseInt($e.css('paddingTop')) + borderTopWidthInt,
iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top,
innerTop = $inner.length ? $inner.offset().top : 0,
iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop),
nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);

        if (_checkNextHref(data) && !data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
            _debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...');
            return _load();
        }
    }

more than one scroll on a page

I'm trying to have two jscroll on a single page.

One is on the regular posts page
The other is in sidebar (UIKit off-canvas)

After opening the sidebar and binding jscroll to its div, closing the sidebar, the scrolling in the main page is with the sidebar.

Is there any way to push/pop the jscroll functionality?

Thanks

Yair

Reinitializing jScroll after AJAX call? Still loading old values after AJAX load.

I'm paginating search results returned from an AJAX call:

$('#search').keyup(function() {
    var search = $(this).val();
    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();
    });
});

After getting the new set of search results, when I scroll to the bottom, jScroll appends content of the next page of the previous (old) query.

So if my last _nextHref was "/search?query=A&page=3" and I enter B in the search field, instead of loading "/search?query=B&page=2" from the new href, it will load "/search?query=A&page=3" from the old href.

Can you please give me an example how to reinitialize jScroll so it loads the new href?

Bug in Safari iOS 6.1.3

Try to use w/ Safari from iPhone, what happens: setting autoTrigger to true, nothing changes.
When autoTrigger = false, the "next page" link appears and in the first click, it works fine (content is loaded). But in the second click, nothing happens. I guess that the $next.bind('click.jscroll') is not being called.
Using jQuery 1.9

[enhancement] Add missing bower.json.

Hey, maintainer(s) of pklauzinski/jscroll!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library pklauzinski/jscroll is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "pklauzinski/jscroll",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

destroy method?

how do we use destroy method? can you give an example? thanx!

how to handler the error

when load the next page error by some reason (eg:wifi is not available),how to callback or retry the xmlhttprequest?

(in a userscript for reddit.com) It only appends page 2 when having login

I've made this userscript in order to use jScroll it in reddit.com and any subreddit

// ==UserScript==
// @name        Reddit jScroll
// @namespace   
// @include     http://www.reddit.com/*
// @version     1
// @grant       none
// @require     https://raw.githubusercontent.com/pklauzinski/jscroll/master/jquery.jscroll.min.js
// ==/UserScript==

$('span.nextprev').jscroll({
  contentSelector: 'div.content'   
});

where span.nextprev is the selector for the Next button
and div.content is the selector for the links content of every next page.

If open eg. reddit.com without login, then it works ok (it appends every next page).
The problem is when I try my userscript having login:
it only appends page 2, not the next pages
(it just shows Loading... at the end of the appended page 2 )
for example in:

http://www.reddit.com (I've only subscribed to 2 subreddits)
eg. http://www.reddit.com/r/firefox/

Is my userscript wrong or it'is jScroll?

WordPress Integration

Hi,

Thanks for the great plugin. I was trying to use it to load WordPress posts by creating a category template. Can you help me out how can I use so the posts on the layout loads as I scroll the page?

I am trying to use:

$('.scroll').jscroll({
loadingHtml: '

Loading...',
padding: 20,
nextSelector: 'div.bb-single-post',
contentSelector: 'div'
});

Where the post container class is "bb-single-post"

Thanks

Not working in Chrome

$('#content').jscroll();....
not loading the second page in chrome...

Thanks
Sanjay

not working with contentSelector

im using

    <script type="text/javascript">            
        $('.infinite-scroll').jscroll({
            debug: true,
            loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
            padding: 20,
            contentSelector: '.content',
            nextSelector: 'a.jscroll-next:last'                
        });                        
    </script>

but in the log says:

nextHref "page2.html .content .content"
instead of "page2.html .content"

if I remove the contentSelector will work ok but with the unwanted html

Callback only loaded the first time

Hi,

Made this script works for my need but just have a bugg

callback function is only loaded at 1st page loading, when jscroll get page 2 content etc, callback is never called again

for my test just simply used :

 function CallTest()
         {
             alert("Call function called");
         }

    $('#ListePhotos').jscroll({
        debug : true,
        loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
        padding: 20,
        pagingSelector : "#Pagination",
        nextSelector: 'a#NextLink:last',
        contentSelector : "#ListePhotos",
        callback : CallTest(),

    });

$('#searchResult').jscroll({    
    nextSelector: $('a').has('img[src="https://piratebay.org/img/next.gif"]'),
    contentSelector: 'tr',
    callback: function() {$('tr.header').remove();}
});

Test link: https://thepiratebay.gd/browse/401
Note:the nextSelector is the link that appears with the ">" arrow icon.

Unfortunately I got these problems:

jScroll only appends (the cells of) page 2 and not the others too.
Below is the HTML of the a tag of the "Next" link
(FWIW, the href value is a relative link)
```
<a href="/browse/401/1/3">
  <img src="https://piratebay.org/img/next.gif" alt="Next" border="0"></img>
</a>
```
And, as you can see, the "Next" <a> anchor tag has no id or class
so I had to use a jQuery selector in nextSelector in order to select it.
The rows from page 2 aren't properly aligned to the table from page 1. (screenshot)
Isn't the contentSelector right?

pklauzinski / jscroll Goto Github PK

jscroll's People

Contributors

Stargazers

Watchers

Forkers

jscroll's Issues

Hey, maintainer(s) of pklauzinski/jscroll!

Recommend Projects

Recommend Topics

Recommend Org