[Drupal] How to use jQuery Plugin for Infinite Scrolling / Auto Paging - jmscroll
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=dkp9qUXZ
BY aby.va
6 years ago
Drupal-Technical

Jmscroll is a simple jQuery infinite scroll plugin which observes the scroll event and loads the next set of content If it available. It is a another type of Philip Klauzinski's jscroll Plugin. We can use this jQuery Plugin for various variety type of scrolling sites.

The basic steps for using jmscroll are:

When using this plugin Include the needed jQuery < jQuery Mobile in the document.


    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    

Also Include the jQuery jmscroll plugin after jQuery library.


    <script src="jmscroll.min.js"></script>
    

Next, Add a link at the bottom of your content to loading more content by clicking.


    <a class="next" href="example.html">Load More</a>
    

We can also create a footer that is always visible continuously scroll down the page.


    <div class="footer">
    ...
    </div>
    

Finally Call the plugin on your content wrapper and done.


    <script>
    $('.content').jmscroll({
      autoTrigger: true,
      maxPages: 5,
      loadingHtml: 'Loading',
      loadingSpeed: 800,
      contentSelector: '.item, a.next',
      nextSelector:'a.next:last',
      footerSelector:'.footer',
      footerPadding:0,
      callback:false
    });
    </script>
    

The parameters define as:

autoTrigger: True or False for loading automatically or by clicking a button
maxPages: If you want to get to the footer you need to define a maximum page number
loadingHtml: Html to show while loading the next content
loadingSpeed: You can delay the loading (most likely for testing purposes)
contentSelector: Selector for loading only part of the response
nextSelector: Selector to find the link which contains the href pointing to the next set of content
footerSelector: Footer selector
footerPadding: The distance from the footer at which to trigger the loading of the next set of content
callback: callback to be called at the end of each page load

Demo:Jmscroll


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Sean (not verified) access_time 31 Jul 2021 - 18:05 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 31 Jul 2021 - 18:05 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 31 Jul 2021 - 18:05 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Anonymous (not verified) access_time 31 Jul 2021 - 18:05 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 31 Jul 2021 - 18:05 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 31 Jul 2021 - 18:05 This is definitely a good guide. Thanks for this. wellyson access_time 31 Jul 2021 - 18:05 This is really nice and helpful.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Shlomi Fish (not verified) access_time 31 Jul 2021 - 18:05 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 31 Jul 2021 - 18:05 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 31 Jul 2021 - 18:05 Hello! Nice Article very interesting, thanks