Search code examples
javascriptjqueryhtmlscrollreveal.js

Target element that is loaded externally

I'm trying to target an element to be used by a ScrollReveal function, the element is being loaded from a different html file called "header.html". Currently, the ScrollReveal effect does not occur, yet elements that are in my index.html do.

JS:

sr.reveal('nav', {
    origin: 'left',
    distance: '10rem',
    duration: 900,
});

Load function in my HTML:

$(function() {
        $("#header").load("header.html");
        $("#footer").load("footer.html");
    });

nav is inside header.html

Solution

  • Use the complete callback of load() to assure the new content has loaded before you try to work with it

    $(function() {
  $("#header").load("header.html", function() {
    // new html has been inserted
    // do what you want with it
    sr.reveal('nav', {
      origin: 'left',
      distance: '10rem',
      duration: 900,
    });
  });

  $("#footer").load("footer.html");
});