0

I'm trying to replicate this useless website: http://endless.horse, but the jScript documentation does not do a great job of explaining how to implement it.

Basically, I need a block of text "Body" to be at the top, then for a block of text "Legs" to appear infinitely (as placeholders) (see website).

I've tried adding what the website says: http://jscroll.com, but it only says "[element].jscroll()" and that's it. I've also tried copying the code from the website, but that also doesn't work.

Here is the code I'm using: DIV that should scroll:

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>

rest.html:

<pre>
    Legs
</pre>
<a href="rest.html"></a>

Code was taken from the website

javascript/jquery/jscroll:

$(function() {
    $('.jscroll').jscroll({
        autoTrigger: true,
        padding: 2000px,
        nextSelector: "rest.html"
    });    
});

I thought I would get a scrolling webpage with "Body" and "Legs", but I got just "Body" instead.

wtrfl
  • 105
  • 1
  • 6

1 Answers1

1

Assuming that you have included the right js and you run your script when the document is ready, the following code works for you:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/jscroll@2.4.1/dist/jquery.jscroll.min.js"></script>

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  $(function() {
      $('.jscroll').jscroll({
          autoTrigger: true,
          padding: 2000,
          nextSelector: "a:last"
      });   
  }); 
});

</script>

Basically, you need to change your nextSelector to be more specific and you must put a real jquery selector. 'a:last' always selects the last a tag that is available. Also, you need to change 2000px to 2000. this code worked for me. Don't forget to include more characters to your rest.html output.

maanijou
  • 1,067
  • 1
  • 14
  • 23
  • I'm not sure what the problem is here: https://repl.it/@Deximal/jScroll – wtrfl Apr 01 '19 at 16:26
  • You forgot to include your script.js file add ` ` – maanijou Apr 01 '19 at 16:40
  • Also I have changed js files path. It seems like you have problem loading them in your server with https. – maanijou Apr 01 '19 at 16:41
  • with only http legs appears but really slowly – wtrfl Apr 01 '19 at 16:46
  • It works fast on local. That's another matter and it depends heavily on the network traffic. When jsscrol feels like it need to scroll it sends a request to get more data from server. It actually loads the last `a` tag and sends a get request to it's href. in this particular situation it sends a separate request to rest.html with each scroll it does. – maanijou Apr 01 '19 at 16:49