scrollReveal on ajax call

[edonbajrami]

scrollReveal is not working with instaFeed.js, after load data on scroll is not working ? Is there any solution to resolve this problem ?

[ivansglazunov]

Tty call window.sr = new scrollReveal(); after loading.

[jlmakes]

Hey @edonbajrami

The init() method checks the DOM and hooks up animations. When you instantiate with new scrollReveal(), the init() method is called internally (check the source, it’s heavily commented).

If you have only 1 AJAX call, then @ivansglazunov suggestion should be fine. If you have multiple AJAX calls, you’ll want to make sure you call sr.init() on subsequent calls. See related posts #52 #65.

[mrchimp]

I'm still having a problem with this. I'm calling sr.init() after my ajax has finished but my elements are still invisible. At this point the following styles have been set on the element (by scrollreveal):

visibility: visible;
transform: translateY(8px) scale(0.95);
opacity: 0;
-webkit-transform: translateY(8px) scale(0.95);
opacity: 0;

If I scroll up and down the page, nothing happens. If I run sr.init() in the console any element on screen will fade in correctly but I have to keep running it in order for them all to work. The only way I've managed to get it to work consistently is by calling sr.init() from a setInterval, which is obviously far from ideal!

It's a reasonably complex site but I'm not doing anything special with the elements except for loading them in via AJAX.

Sorry to comment on a closed issue but hopefully this will make more sense to you!

[jlmakes]

@mrchimp Hmm, I’m gonna recommend you check out ScrollReveal 3

There’s a few differences (most of them outlined in that link), but the JavaScript API will give you better control and has been tested far more for complex situations (multiple viewports, asynchronous configurations, etc.)

This is a very rough example, but you should be able to do something like this:

$.ajax().done(function( data ){
  sr.reveal( '.sampleClass', sampleConfig );
  sr.init();
});

[evgenyshev]

I subscribe to this topic, it is very necessary, but it is impossible to implement. My demonstration — https://youtu.be/9Y4Sgd4UPrU.
Tried current version 2 is now the same is happening to version 3.

Code:

(function($) {
    Drupal.behaviors.ScrollRev = {
        attach: function (context, settings) {
            var config = {
                reset:  true
            }
            window.sr = new scrollReveal( config ).reveal('.views-row').init();
        }
    };
})(jQuery);

and

    $('.ui-widget-overlay:last').click(function (event) {
      if ($(event.target).hasClass('ui-widget-overlay')) {
        $dialogContent.dialog('close');
        sr.init()
      }
    });

      Drupal.ajax[linkId] = new Drupal.ajax(linkId, link, {
        progress: {type: 'throbber'},
        url: $link.attr('href'),
        event: 'click',
        submit: {
          js: true,
          autodialog_link_id: linkId,
          autodialog_options: JSON.stringify(options)
        },
        beforeSerialize: function (xmlhttprequest, options) {
          options.url = $link.attr('href');
          $('body').addClass('autodialog-loading');
          Drupal.ajax.prototype.beforeSerialize.apply(this, arguments);
        },
        success: function (response, status) {
          $('body').removeClass('autodialog-loading');
          Drupal.ajax.prototype.success.apply(this, arguments);
          sr.init()
        },
      });
    },

What am i doing wrong?

[jlmakes]

@evgenyshev

It looks like your original objects are being dropped from the ScrollReveal element store, which is why they no longer respond to the event handler when you scroll back up…

This leads me to believe you are instantiating ScrollReveal more than once.

I’m not familiar with Drupal, but it I’m guessing the bit of code below is running each time you make an aynsc request… which means sr becomes a new object, and "forgets" the first element store.

(function($) {
  Drupal.behaviors.ScrollRev = {
    attach: function (context, settings) {
      var config = { reset: true }
      window.sr = new scrollReveal( config ).reveal('.views-row').init();
    }
  };
})(jQuery);

If I were you, the first thing I would try would be to check if sr already exists before instantiating it… and call the rest separately; something like this:

(function($) {
  Drupal.behaviors.ScrollRev = {
    attach: function (context, settings) {
      if ( !sr ){
        window.sr = new scrollReveal({ reset: true });
      }
      sr.reveal('.views-row').init();
    }
  };
})(jQuery);

Again, I’m not familiar with Drupal, so I don't know the order in which all this fires… but this assumes that attach runs every time after async success. If you know otherwise, you could try moving sr.reveal('.views-row').init(); into a different function.

Hopefully this makes sense, and moves you in the right direction. 🙇

[evgenyshev]

@jlmakes
Thank you, I will try.

[evgenyshev]

@jlmakes
Unfortunately, the second example does not work, and the first works the same way as my code. Besides collapsing jquery dialog (https://jqueryui.com/dialog/) :(

[evgenyshev]

@jlmakes, Is it possible anywhere to download the latest version of the first branch of the library? It is like working with Drupal ...

[jlmakes]

@evgenyshev really, hmm... is there somewhere this uploaded that I can help troubleshoot? I believe we’re really close.

Is it possible anywhere to download the latest version of the first branch of the library? It is like working with Drupal

Which version number?

[evgenyshev]

@jlmakes any 1.x

[jlmakes]

Sure @evgenyshev, but be warned, I can provide absolutely no support for the beta—here is a link to v0.1.3, the latest release prior to v2.x (forked by Loic prior to deletion)

https://github.com/LoicMahieu/scrollReveal.js-0.1.3

Related to #89

[evgenyshev]

@jlmakes Unfortunately, this version does not work properly with ajax on my site, and also breaks jQuery Dialog.

[evgenyshev]

@jlmakes
Actually, I was first confronted with the fact that the script does not work with content loaded via Ajax in Drupal, and even prevent the jQuery Dialog. It is unfortunate, your library would be good for me :(

[jlmakes]

@evgenyshev I think we are close!

If you have the time, find a way to put your demo online with the issue. I would love to get this sorted for you, and future users! 🙇

[evgenyshev]

See now one of the projects on which I would like to use your library (really like to) - http://krd.nidbin.ru/search?query=краснодар

As has been said, to connect your script in two ways. Who is connected through a special module. It should work with the version 2.x.x. The code module can be seen here - http://ftp.drupal.org/files/projects/scrollreveal-7.x-2.x-dev.zip.

Animation applied to elements [.company-search .views-row]
Two problems:

1. does not apply to library loadable content via ajax (try the bottom of the page click the large gray button).
2. Library breaks popups Jquery Dialog (try to press the green button on the right on it with a plus icon). The first time you open the window, but the forms are not used within a script, stylized form. When you close the window and you press the button, the window does not open at all.

Version jQuery 1.10. Tried different (since 1.8). No changes.
I would be grateful for any help :)

[evgenyshev]

Swears on line "window.scroll Reveal = new scrollReveal (config);"

[jlmakes]

@evgenyshev If you do window.scrollReveal = new scrollReveal() you will overwrite the original constructor, which is why you should use something like window.sr = new scrollReveal().

[evgenyshev]

@jlmakes You will not believe, but it works!! Thank you very much! Today, you are my God! :)

[jlmakes]

Update Jan 13th, 2016:

Using version 3.x, managing asynchronous content got a lot easier and more reliable. The sync() method updates asynchronously loaded content with any existing reveal sets.

Example using ScrollReveal 3:

<!-- index.html -->
<div id="container">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>

<!-- ajax.html -->
<div class="foo">foo async</div>
<div class="foo">foo async</div>
<div class="foo">foo async</div>

var fooContainer, content, sr, xmlhttp;

fooContainer = document.getElementById('fooContainer');

sr = ScrollReveal();
sr.reveal( '.foo', { container: fooContainer } );

// Setup a new asynchronous request...
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if ( xmlhttp.readyState == XMLHttpRequest.DONE ) {
    if ( xmlhttp.status == 200 ) {

      // Turn our response into HTML...
      var content = document.createElement('div');
      content.innerHTML = xmlhttp.responseText;
      content = content.childNodes;

      // Add each element to the DOM...
      for ( var i = 0; i < content.length; i++ ) {
        fooContainer.appendChild( content[ i ]);
      };

      // Finally!
      sr.sync();
    }
  }
}

xmlhttp.open('GET', 'ajax.html', true);
xmlhttp.send();