Menu
I'm using Pace.js (http://github.hubspot.com/pace/) for a basic loader.
It works great with no issues so far. However, what I would like to do, is append the Pace.js HTML to be inside an element of my choice.
The generated HTML looks like:
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
By default, Pace.js appends itself to be just after the opening <body> tag. Is there any way to hook into where this generated HTML goes?
363
Okay, so I figured this out. It seems to be undocumented.
In the plugins options object, there is a value for the target key.
Default options look like:
defaultOptions = {
catchupTime: 500,
initialRate: .03,
minTime: 500,
ghostTime: 500,
maxProgressPerFrame: 10,
easeFactor: 1.25,
startOnPageLoad: true,
restartOnPushState: true,
restartOnRequestAfter: 500,
target: 'body',
elements: {
checkInterval: 100,
selectors: ['body']
},
eventLag: {
minSamples: 10,
sampleCount: 3,
lagThreshold: 3
},
ajax: {
trackMethods: ['GET'],
trackWebSockets: true,
ignoreURLs: []
}
};
In my project, I am using Browserify, so here's how I achieved this:
var pace = require('../plugins/pace');
pace.options.target = '#main';
pace.start();
This effectively overwrites the target key in the default options used by Pace.js.
Seems to work fine now. Hope this helps someone else out there.
152
Okay, so I figured this out. It seems to be undocumented. In the plugins options object, there is a value for the target key.
I know it's an old thread, but I want to expand Michael's answer above mine, I managed to use Pace.js more effectively by settings:
pace.options.target = 'body:not(.pace-ignore)';
This way I can choose the elements I don't want monitored by pace (such as ads).
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
