1

fullpage.js with the option verticalCentered: true

Hi,

when fullpage.js loads it encloses the content of every <div class="section"> into a <div class="fp-tableCell" style="height:XXXpx;">calculates the height of that content to put it in with inline style. Thats how every content is vertically centered.

Now my problem is, that the site jumps on the very first load, because first all elements are rendered and after that JS kicks in to vertically center the content.

I tried to manually enclose the section content into a <div class="fp-tableCell" style="height:XXXpx;">, but fullpage.js ignores that and encloses that content again.

Has any one any idea or hint how I could solve this problem?

Thanks for your time!

Anton Stahl
  • 186
  • 1
  • 2
  • 19
  • Can you create a demo for us? http://stackoverflow.com/help/mcve – Michael Coker Jan 30 '17 at 00:35
  • Have a look at covering the site in a "Loading.." overlay, and then fade it out/remove it when fullpage.js fires its [`afterRender` event](https://github.com/alvarotrigo/fullPage.js#afterrender). Youre seeing the jump as fullpage.js alters the DOM to create the "sections", and so its measurements havent been applied until after its finished "rendering". – haxxxton Jan 30 '17 at 01:28
  • @MichaelCoker, Ofc I should have provided a demo with my question. Here is the official playground of fullpage.js: http://alvarotrigo.com/fullPage/#firstPage The content on the first slide has already a considerable height, so the load jump is marginal. When you zoom out and thereby make the content smaller the load jump is very noticeable. – Anton Stahl Jan 30 '17 at 16:25
  • @haxxxton, thanks for your idea with the loading overlay. I think I will go with that if I cant find any other solution. It would be great if I could position the elements before fullpage.js loads, but I have no idea how to tell fullpage.js to dont alter them again. – Anton Stahl Jan 30 '17 at 16:25

1 Answers1

0

You have two options:

  • Initialize fullpage.js on document ready instead of on document load (or after the closing body tag, which is the same)
  • Set the size of your sections with CSS and center the content with CSS as well.

In order to set the size of each section before fullPage.js initialices, just do this:

/* supposing #fullpage is your fullPage.js wrapper */
html,body, 
#fullpage{
    height:100%;
}
.section,
.slide{
    height: 100%;
}

And if you are talking about the vertical alignment flickering which will still take place even after you do this, then I would encourage you to use that wrapper yourself and to apply the vertical alignment yourself. Then use fullpage.js with verticalCentered:false

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • TIL you can load `script` tags _AFTER_ the `

    `, it just [wont validate/may cause issues for IE](http://stackoverflow.com/a/3037769/648350)

     – haxxxton Jan 30 '17 at 23:14