Display Within Div

[ghost]

Hello,

Firstly, thank you for creating this!

I may have missed something, but how would I go about setting books to render inside a div? – I'm able to recreate the sample site, but wasn't actually sure how to set where books render to.

For example, the #render div would have a styled height and width within the window.

<div id='render'><div>

Sorry if this is already mentioned somewhere, I appreciate your time.

[johnfactotum]

You have to manually append the renderer element to your page.

With the API currently provided by view.js, you would first call View.display(), which will return the element:

https://github.com/johnfactotum/foliate-js/blob/7d721611fadc5cd28b832b00ff13d956199e5068/reader.js#L92-L94

So here, instead of document.body.append(element), you could do document.querySelector('#render').append(element), etc.

Alternatively, if you're using one of the renderers directly, you can get the element from the .element property

const { Paginator } = await import('./paginator.js')
const renderer = new Paginator(options)
document.querySelector('#render').replaceChildren(renderer.element)

[ghost]

That works perfectly, thank you very much!