[Résolu] Probleme au moment 'reflow'

Je suis actuellement confronté a un problème dans le cadre d'une single page application.

Le site se présente de la manière suivante :

<div id="container">
     <article id="article1"></article>
     <article id="article2"></article>
     <article id="article3"></article>
</div>

J'utilise 2 plugins qui à première vue correspondent bien à mes besoins :
le premier fullPage.js permet d'étirer chaque article en fullscreen hauteur 100% et largeur 100% et à naviguer d'article en article à la manière d'un slider, avec un effet un peu smooth des plus agréables.
Le deuxième onScreen() est un plugin me permettant de lancer des anim jquery à chaque entrée dans le viewport (doin: action) ainsi qu'a chaque sortie (doout:action).

Problème 1 : Mes articles ne sont pas en fullscreen au lancement de la page. En effet ils sont à +/- 95% de hauteur, laissant apparaître les premiers pixels de l'article suivant. Pas cool.
Problème 2 : Mes petites anims ne se lancent pas...

Constatation : quand je redimensionne la fenêtre de mon navigateur, ne fut-ce que d'un 1 pixel, tout rentre dans l'ordre : mes articles prennent 100% en hauteur et les anims se lancent. Par exemple, tout rentre dans l'ordre quand je clique sur F12 (ma console s'ouvre --> taille de la fenêtre change --> problème réglé).

bref, l'un d'entre vous aurait des idées quant à la source de mon problème ?

Thanks pour votre precieuse aide.

NB : Je ne sais pas si le terme de Reflow est vraiment adapté ?

Bonjour.

Pour ton premier problème, question annexe, pourquoi ne pas l'avoir fait en CSS ?
Sinon, as-tu des erreurs JS au chargement de ta page ?
Et dans ton code, parce que je ne connais pas ce plugin, à quel moment fullPage.js est appelé ?

Bonjour,

- En JS pour plus de compatibilités (?) et surtout car je l'avais sous la main et par rapidité. De plus il me rajoutait quelques détails intéressants (au dernier article, scroll auto jusqu'en haut de la page, petite "dots navigation" animée créée automatiquement (style slider), etc);

- Non rien dans la console. Par contre dans l'onglet script de Firebug il me signale ceci :
"Si les balises <script> ont un attribut "type", il devrait ressembler à "text/javascript" ou "application/javascript". De plus, les scripts doivent être analysables (syntaxiquement corrects)."
Pourtant j'ai veillé à l'attribut type="text/javascript" à chaque balise script...

- Dans une balise <script>, avant </body> et juste après l'appel de JQuery

Merci pour ta réponse

À la rigueur, si ton appel se fait comme dans l'exemple du site dans le document.ready(), je te proposerais bien comme le plugin le permet de tester un rebuild dans winow.load() :

$(window).load(function() {
  $.fn.fullpage.reBuild()
})

Pour le reste, les erreurs ne semblent guère importantes (même si bien sûr ça serait mieux sans XD).
Modifié par SolidSnake (29 Jul 2015 - 07:51)

Super Solid Snake !

J'avais oublié la présence de mon loader avec un petit delay+fadeout au load() de la page.
Je crois que c'est lui qui semait le trouble !

$.fn.fullpage.reBuild(); à la suite règle tout !

Merci pr ton aide

NB : pour infos, j'ai aussi remarqué que ce plugin fullpage.js proposait d'emblée la version en CSS3 et puis en .js si nécessaire.