pklauzinski / jscroll Goto Github PK
View Code? Open in Web Editor NEWAn infinite scrolling plugin for jQuery.
Home Page: http://jscroll.com/
An infinite scrolling plugin for jQuery.
Home Page: http://jscroll.com/
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
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.
Documentation for 'nextSelector' could do to specify that the selector must be relative to the selector jscroll() is called on.
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>
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
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
is there any way to combine jscroll with isotope? If I get the loaded content then I think that will be possible.
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
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
Just curious! :)
Hi
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
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
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
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?
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.
When a user returns from history. He will begin on top again and needs to scoll again the whole list.
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?
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();
I've been trying to make this userscript in order to use jScroll it in thepiratebay
(in the tables for Browse and Search results)
$('#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?
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>
$('#content').jscroll();....
not loading the second page in chrome...
Thanks
Sanjay
Most .NET programmers nowadays load library dependencies through NuGet. It would be great of jScroll would also become available as a NuGet package.
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(),
});
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
when load the next page error by some reason (eg:wifi is not available),how to callback or retry the xmlhttprequest?
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 ?
It would be great if you can integrate a bower.json file for bower manager.
More informations here: http://bower.io/
Thanks.
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:
Is my userscript wrong or it'is 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!
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?
Love the product, but I seem to be having a problem with it loading only once. Everything else works fine!!
Please help. Thank you!!
Is it possible to use jScroll with data from a database?
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>'
});
}
});
});
Hi
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
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.
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.
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!
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.
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'
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 ?
how do we use destroy method? can you give an example? thanx!
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).
Hi this is the result page : http://projects.vivek.be/ebaysearch/indexc.php?search=mobile I am using jscroll to load more content. But for the first time content is overlapped over old content! How to solve this?
thansk.
Is there a way to get jscroll working in IOS5 & iOS6?
How can I trigger the _load function from external?
like $('.element').jscroll('load');
Thanks,
Oscar
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: '
Where the post container class is "bb-single-post"
Thanks
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();
}
}
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.