Using the 'afterRender' callback in fullPage.js to run code with jQuery events

user_12266339 0
Viewed 676

I'm using a library called fullPage.js to create a site. Within this I've used this setTimeout function to change a background image.

setTimeout(function(){ 
  $("#bg-opacity").css({
       "opacity" : 1,
       "background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
  });
}, 300);

The fullPage.js documentation states:

your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins (https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions#my-javascriptjquery-events-dont-work-anymore-when-using-fullpagejs)

The afterRender call back looks like this (https://github.com/alvarotrigo/fullPage.js#afterrender):

new fullpage('#fullpage', {
    afterRender: function(){
        var pluginContainer = this;
        alert("The resulting DOM structure is ready");
    }
});

I'm not familiar with this structure, so I'm not too sure how to adapt my original setTimeout function within the fullPage.js afterRender function format.

Any help is greatly appreciated, I'm out of my depth with this one.

fullpage.js function jquery javascript
1 Answers

Just do this if you want to fire the timeout on page load:

new fullpage("#fullpage", {
  afterRender: function() {
    setTimeout(function() {
      $("#bg-opacity").css({
        opacity: 1,
        "background-image":
          "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
      });
    }, 300);
  }
});
user_10813960
Related