how to use a document ready on a nested page in a full page site

Question

I have a site using fullpage.js but the principle is same for all the single page websites - I want to have $(document).ready() function on a 'nested' page as it's all on one page, naturally the document ready function would load before I want it to.

example:

<div id="page1"></div>
<div id="page2"></div>
<div id="page3">
     //when hit this page i would want the code to run
</div>

Is there a simple way of getting the document ready function equivalent for a nested page? I've found the jquery.appear plugin but as a lot of sites are using this single page style, are plugins the only solution or am I missing something obvious?

Answer 1

There's no generic jQuery way of achieving this because all the functionality of fullpage.js isn't included in the jQuery core. And jQuery does not cover events fired by plugins.

In the docs of fullpage.js is a section about the afterSlideLoad callback which gets "fired once the slide of a section have been loaded, after the scrolling has ended". There's also the afterLoad callback which will be "fired once the sections have been loaded, after the scrolling has ended". I don't know what fits your needs best. (Thanks to @Alvaro in the comments for the afterLoad callback)