pepperstreet VIP
Total posts: 3,837
11 Нояб 2012 20:21

(topic moved into Cobalt 8 category)

Hello, is it possible to have a pagination with AJAX ? Something like the lazy itemload on "Pinterest". You can find something similar in Joomla content display modules and some wordpress sites.

It doesn´t have to be automatic on pagescroll, an appearing button "load more..." would be nice, too.

Edit - Example:

Templaza uses a jQuery Script called InfiniteScroll in their com_content/k2 clone com_portfolio. Often used in their template demos. Maybe a good resource? The script seems to have two modes "button" or "auto". com_portfolio is free to download.

Maybe there is also a Mootools-based equivalent for this effect?

Последние изменения: 25 Фев 2016

Метки Cobalt 9


Sergey
Total posts: 13,748
11 Нояб 2012 22:36

This is by the way will dramatically speed up Cobalt. Because we do not need to get total. ANd total is calculated only for the reason to build pagination.

I would love to do something like this. :D

I have to thinks when and how.


Sackgesicht VIP
Total posts: 1,636
11 Нояб 2012 23:13

I have to thinks when and how.

After Cobalt 8 is out in the field and considered "stable" ... :D


pepperstreet VIP
Total posts: 3,837
12 Нояб 2012 10:52

I have to thinks when and how.

I want it NOW! ;-) :-)


Гость
13 Нояб 2012 09:14

Hahahaha, Then Cobalt will then be --- One CCK to Rule Them All ---


Xtream VIP
Total posts: 129
16 Нояб 2012 15:31

I can share my example, which I use with Resources. I am using infinite-ajax-scroll. Here is manual https://github.com/webcreate/infinite-ajax-scroll

For cobalt I have done experiment with simple-list template and in archive is a result.

1) File jquery.ias.min.js you need to put in media/mint/js/

2) File default_list_simple_list.php you need to put in components/com_cobalt/views/records/tmpl/

3) Refresh you section/category page and scroll down....

P.s. here is only one problem, and this problem is discussed here about pagination memory. So if you want to test this script, don't forget to add to your url ?limitstart=0


Xtream VIP
Total posts: 129
17 Нояб 2012 07:34

Maik

For Resources everything is the same.

Firstly, you need to put file jquery.ias.min.js in media/mightyextensions/js/ .

Secondly, at the end of your records template add next code and change selectors in settings, which you use in your template


<script type="text/javascript" src="/media/mightyextensions/js/jquery.ias.min.js"></script> <script type="text/javascript"> jQuery.ias({ container : '.records-sumple-list', item: '.list', pagination: '.pagination', next: '.pagination .pagination-next a', loader: '<img src="/media/mint/js/mightyextensions/highslide/graphics/loader.white.gif"/>', history: false, tresholdMargin: -1000 }); </script>

About setting options are written here


Гость
17 Нояб 2012 08:01

Waow gonna try this


Sergey
Total posts: 13,748
17 Нояб 2012 08:48

The only problem with this method I think is that it loads all the page. Or not? I mean how you get only next records? What I mean it have lo lad everything withm modules, filters, ... ANd then just take .records-sumple-list element and append it.

I'll try to make it native so only record list is asked without filter list, category list and other queries. Just one query.


pepperstreet VIP
Total posts: 3,837
17 Нояб 2012 11:07

The only problem with this method I think is that it loads all the page. ...

I'll try to make it native so only record list is asked without filter list, category list and other queries. Just one query.

Have to admit, that I did not try it, yet ...

Does it make a difference? Because the page is already there, and the script seem to influence the list markup only.

Not sure, because i lack the knowledge... it would be very interesting to combine this with the original pagination and pagenumber. As far as i read in the following articles, there are different solutions and limits on this issue... also mentioned: URL page parameters!

[**10 aggressively used jQuery Infinite Scroll Plugins for endless paging

**]( http://www.webdeveloperjuice.com/2012/05/26/10-aggressively-used-jquery-infinite-scroll-plugins-for-endless-paging/ )

[**5 jQuery Infinite Scrolling Demos

**]( http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/ )


Sergey
Total posts: 13,748
17 Нояб 2012 22:09

The one given by Чекуфь is good one. Go with it.


pepperstreet VIP
Total posts: 3,837
09 Дек 2012 18:31

For cobalt I have done experiment with simple-list template and in archive is a result.

1) File jquery.ias.min.js you need to put in media/mint/js/

2) File default_list_simple_list.php you need to put in components/com_cobalt/views/records/tmpl/

3) Refresh you section/category page and scroll down....

Can´t see any effect ?!


Гость
21 Фев 2013 02:39

it u r using joomla k2 just go to wall.js

and comment the this line //$(window).unbind('.infscr');

and then add code in the bottom out of all field

$(window).scroll(function()

{

if($(window).scrollTop() + $(window).height() == $(document).height()) {

      $('h3:first', this).hide();

        $container.infinitescroll('retrieve');

     }

});

pepperstreet VIP
Total posts: 3,837
11 Нояб 2013 12:11

The one given by Чекуфь is good one. Go with it.

The one given by Чекуфь is good one. Go with it.

try to add ?limitstart=0 at the end of your url. As I wrote above in Cobalt is problem with pagination memory when changing between categories or starting a new query and it is not solved yet.

Somehow i forgot about this important topic.

Is this still an issue and requirement in latest C7 version. (and what about C8 ?!)

Really would like to see this as a build-in template option!

Работает на Cobalt