Transform drupal search result page to infinite scroller

  • 9 April 2013
  • mohit.aghera

 

Hello,
If you want to transform pager of any page to infinite scroller you can do it using infinite scroll javascript.
To set it on any page, you will need a couple of steps:
I have transformed the search result page to infinite scroller.
For detail instructions you can follow this guide on drupal.org(http://drupal.org/node/1473558)
 
1) Download https://github.com/desandro/imagesloaded (jquery.imagesloaded.min.js) place it in your theme folder YOURTHEME/js
This will make sure all images are loaded before activate the infinite scroll.
 
2) Download https://github.com/paulirish/infinite-scroll (jquery.infinitescroll.min.js) place it in your theme folder YOURTHEME/js
In order to make it work with Drupal search modify it as follow: Search match(/^(.*?page=)2(\/.*|$)/ replace it by match(/^(.*?page=)2(&.*|$)
 
3) Create a new js (ex:infinitescroll.js) with the content of the jQuery code given below & place it in your theme folder YOURTHEME/js
  Note that you will probably have to change the img path
  
4) modify YOUR_THEME.info and add
scripts[] = js/jquery.imagesloaded.min.js
scripts[] = js/jquery.infinitescroll.min.js
scripts[] = js/infinitescroll.js
 
5) flush the cache
 
6) cross finger & try .... it should work if not ... it's time to play and debug with firebug ...
 
Put this in your infinitescroll.js file.
 
(function($){
   Drupal.behaviors.viewsInfiniteScroll = {
   attach: function (context, settings) {
     $(function(){
    if (this.processed) return;
    this.processed=true;
    if ($('.search-results').length==0) return;
       var $container = $('.search-results');
       $container.imagesLoaded( function(){
         $container.infinitescroll({
           navSelector  : 'ul.pager',    // selector for the paged navigation
           nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
           itemSelector : '.search-results',     // selector for all items you'll retrieve
           animate      : true,
           msgText  : Drupal.t("Loading new results..."),
           img: '/sites/default/themes/bartik/images/ajax-loader.gif',
           donetext:Drupal.t('No more results to load.'),
       },function(arrayOfNewElems,state){
        //YOUR CALLBACK STUFF .. To re-attach behaviour if needed
       
        })
   })
 });
 }
};
    })(jQuery);
 
Tags: 

Comments

Anonymous's picture

I think there is also infinite scroll module on drupal.org but it doesn't provide the scroller on the search result page. Module provides scroller on the tables only...

But for search result we surely can follow your way

By the way nice try...

Just desire to say your article is as astounding. The clearness to your publish is just spectacular
and i could suppose you're an expert on this subject. Well with your permission allow me to seize your
RSS feed to stay updated with drawing close post.
Thanks 1,000,000 and please keep up the gratifying work.

libertine chaude's picture

Je vaіs te dіre գue ce n'est guère inexact !!

This article offers clear idea in support of the new users of blogging, that really how to do running
a blog.

zero glass beads's picture

I got this site from my pal who informed me on the topic of this website and now this time I am browsing this site and reading very informative content at this time.

Jason's picture

Good writeup.

And infinite scroll (drupal.org/project/infinitescroll) provides the same feature but works with the table only..

i think you should work to develop the new version from scratch or fix in the current module

Oma's picture

If you want to get a good deal from this post then you have to apply such
methods to your won website.

Jenna's picture

I've learn a few good stuff here. Definitely price bookmarking for revisiting. I wonder how much effort you place to make this sort of wonderful informative web site.

tool's picture

Hello! Do you know if they make any plugins to safeguard
against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?

Lanora's picture

It's perfect time to make some plans for the long run and
it's time to be happy. I have learn this submit and if I could I
wish to counsel you some attention-grabbing things or suggestions.

Perhaps you can write next articles relating
to this article. I want to learn even more issues about it!

Ι neeԁed to thank уou foг this good гead!!
I certаinly lovеԁ every bіt of it. I've got you bookmarked to look at new stuff you post…

cheat's picture

I believe what you wrote made a lot of sense. But, what about this?
what if you were to write a awesome headline? I am not suggesting your content is not good., however what if you added something
that makes people desire more? I mean Add new comment | Mohit Aghera is a little vanilla.
You ought to peek at Yahoo's home page and note how they write
news headlines to get viewers to click. You might add a video
or a related pic or two to get readers interested about everything've written. In my opinion, it
might make your blog a little livelier.

I loved as much as you'll receive carried out right here. The sketch
is attractive, your authored material stylish. nonetheless,
you command get got an nervousness over that you wish be delivering the
following. unwell unquestionably come further formerly again since exactly the same
nearly very often inside case you shield this
increase.

Bali Mojo Dose's picture

Ucayiiu enyouniri iuuluzaj: Bali Mojo Dose omepecuug
omautoib...

Francis247's picture

Thanks for sharing this valuable info. This has spared me a lot of time. The infinite scroller is definitely a time-saver and you won’t have to waste time in waiting for loading the next page. Keep sharing these sorts of tips and advice.

more

!!

quest bars's picture

Greetings I am so thrilled I found your webpage, I really found you by mistake, while I was searching on Bing
for something else, Regardless I am here now and
would just like to say cheers for a incredible post and a all round interesting blog (I also love the theme/design),
I don't have time to read it all at the minute but
I have book-marked it and also added your RSS feeds,
so when I have time I will be back to read a great deal more, Please do keep up the awesome work.

Add new comment