How to get scrollReveal.js working?

how do I setup scrollReveal.js working with my browser locally.
I 've read this article Revealing Elements with scroll.js and the official git for scrollReveal.js by julian-lloyd on how to set it up by including it into my javascript code.

It does work when I do it with http://jsfiddle.net, but not when I do it locally.

What do I do next to get it to work?

Hi there,

Could you please post the code that you have so far?
My initial guess would be that you haven’t included one of the libraries, or that a path is wrong.

My initial guess would be that you haven’t included one of the libraries, or that a path is wrong.

I know that 9/10 times when I put in a script and it won’t work that’s my problem.

Usually though, I stubbornly believe that there’s an issue and spend 2314324234324432 hrs debugging my and their code before checking for a spelling error on an include or something like that :wink:

Yup! Been there, done that :smile:

Another gottcha is forgetting the protocol when including a library, e.g. this works on a server, but not locally:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

@James_Hibbard This is the paste of my code. http://pastebin.com/u45wL6Vr

1 Like

@jeffreylees Well, I doubt if there’s any spelling error or a path fault. I’ve gone through it many a times.
Even a click from the Source Code to the scripted link opens that min.js file in the browser.

You’re trying to reference an element on the page before it actually exists.
Move your JS to the bottom of the page before the closing body tag:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p data-sr> Chips Ahoy! </p>

    <script src='http://scrollrevealjs.org/js/scrollReveal.min.js?ver=2.0.1'></script>
    <script>
      window.sr = new scrollReveal();
    </script>
  </body>
</html>

Thanks for providing such a concise example!

BTW, you can paste your code here. No need for a 3rd party service.

@Pullo Thank You ! very much for the help, that worked. I’ll keep in mind it for the future references.
Does the same is true for the jqueryui ?
Also, I wasn’t aware of pasting a code directly on to the site.

No probs :smile:

The same is true of any JavaScript - if you try reference an element in the page before that element exists, things will break.

You could use the window object’s load event to make sure that the code is only executed after the page has rendered:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src='http://scrollrevealjs.org/js/scrollReveal.min.js?ver=2.0.1'></script>
    <script>
      window.onload = function(){
        window.sr = new scrollReveal();
      }
    </script>

    <p data-sr> Chips Ahoy! </p>
  </body>
</html>

Or in jQuery speak:

$(document).ready(function(){
  window.sr = new scrollReveal();
});

But the best practise is to put your scripts at the bottom of your page (in the right order of course), as then the page will have rendered by definition.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.