Loved infinite scroll function

3 months 3 weeks ago - 3 months 2 weeks ago #69035 by charlynancy
To implement infinite scroll function in your category view you could use Infinite AJAX Scroll plugin.

Here are the links where you can find it and download jquery-ias.min.js :
Main Site of the developper

on Git

You could try it your self this way :
  1. Upload jquery-ias.min.js on your server
  2. Paste this code in your template before </body>(just change "YOUR_PATHWAY_TO_THE_FILE")
<script type="text/javascript" src="/YOUR_PATHWAY_TO_THE_FILE/jquery-ias.min.js"></script>
    <script type="text/javascript"> jQuery.ias ({
      container:  ".flexicontent",
      item:       ".catalogitem",
      pagination: ".pagination",
      next:       ".pagination-next a",
      delay:      200
    });
jQuery.ias().extension(new IASSpinnerExtension());
jQuery.ias().extension(new IASTriggerExtension({ offset: 100 }));
jQuery.ias().extension(new IASPagingExtension());
jQuery.ias().extension(new IASHistoryExtension({ prev: '.pagination-prev a' }));</script>
    
Last Edit: 3 months 2 weeks ago by charlynancy. Reason: improve JS code

Please Log in or Create an account to join the conversation.

More
3 months 3 weeks ago #69036 by ggppdk
Thanks will certainly review it
also i see there is a 29 euro for using in our application, which is more than reasonable

Please note that regardless of the which JS library we use
-- we need to patch JS for fields that depend on javascript

but i see that for many common cases of category views , using such fields is not needed
and your suggested JS library should work

we would also like to avoid re-runing main SQL query in very large web-sites
thus in the end i am in favour of using our own JS code for endless-scroll

but until this is done, your suggested solution for our users looks quite good

thanks


-- FLEXIcontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star review. Thanks!

Please Log in or Create an account to join the conversation.

More
3 months 2 weeks ago - 3 months 2 weeks ago #69089 by charlynancy
Georgios,
Thank you very much for your interest for this temporary solution.
i answer you tardily, because i needed to correct the precedent code above.
I made a big mistake : implement twice jquery, (so i had finally a lot of errors that i not saw the first time)
Now the code is corrected, it could be largely improved with the numerous options of this great script. (11 lines to paste before </body> and that's it, the job is done)

Please note that regardless of the which JS library we use
-- we need to patch JS for fields that depend on javascript

Concerning this javascript problem, i found this part of documentation :

My javascript events don't work anymore after a new page is loaded
Javascript event listeners have to be reinitialized for newly loaded items. You can use the rendered event for this just like how you would use the $(document).ready() event.

And concerning the renderde event i found this example with a tooltip javascript :

rendered¶
argument type description
items array items to be rendered
Triggered after new items have rendered.

This can be useful when you have a javascript function that normally performs some actions on the items in the $(document).ready event. When loading items from a new page using IAS, the document ready handler isn't called. Use this event instead.

In the following example all we iterate through the newly rendered items and setup a tooltip plugin.

ias.on('rendered', function(items) {
    var $items = $(items);

    $items.each(function() {
        $('.tooltip', this).tooltip();
    });
})

i tried to implement this documentation to solve the flexicontent voting javascript.
But i didn't find the good script to add.
If someone could help me to find the solution with the voting javascript (html code below), we could have a almost perfect temporary solution (until the new function is done)
<ul class="fcvote_list">
					<li id="rating_555_main" class="current-rating" style="width:0%;"></li>
					
					<li class="voting-links"><a onclick="" href="javascript:;" title="Insuffisant 1/5" class="fc_dovote star1" data-rel="555_main">1</a></li>
					<li class="voting-links"><a onclick="" href="javascript:;" title="Moyen 2/5" class="fc_dovote star2" data-rel="555_main">2</a></li>
					<li class="voting-links"><a onclick="" href="javascript:;" title="Bien 3/5" class="fc_dovote star3" data-rel="555_main">3</a></li>
					<li class="voting-links"><a onclick="" href="javascript:;" title="Très bien 4/5" class="fc_dovote star4" data-rel="555_main">4</a></li>
					<li class="voting-links"><a onclick="" href="javascript:;" title="Très bien 5/5" class="fc_dovote star5" data-rel="555_main">5</a></li>
				</ul>
Last Edit: 3 months 2 weeks ago by charlynancy.

Please Log in or Create an account to join the conversation.

More
3 months 2 weeks ago #69094 by charlynancy
For voting script function, i tried this unsuccessful :
jQuery.ias().on('rendered', function(items) {
    var $items = $(items);

    $items.each(function() {
        $('.voting', this).voting();
    });
})
Someone could help me to implement this function?

We see here that this solution is not really simple, especially if you have javascript function in the category display.
And as Georgios sayed the performance is not perfectly optimised.
So this solution is acceptable for a temporaly way.
I have tested a lot of other solution in the joomla universe. And this solution is also good than the other solutions (existing plugins or implementations in existing templates)

So we will have the best solution of infinite scrolling in joomla universe when the new function will be implementing with the usual quality of Georgios.

Be patient, the best is coming! :)

In the meantime, i will improve progressively my first script with additional settings i will test.

Please Log in or Create an account to join the conversation.

More
Moderators: vistamediajoomlacornerggppdk

JED Reviews

Total reviews: 178
Overall
100.00 out of 100
Functionality
100 out of 100
Ease of Use
100 out of 100
Support
100 out of 100
Documentation
100 out of 100
Value for Money
100 out of 100