dilemne du fadeIn sur le body

Suite à un post récent je me suis amusé a faire un effet de transition fade sur mes pages avec fadeIn et / ou fadeOut, mais je le retrouve face à un souci en cas de js désactivé.

En effet pour que le fadeIn soit actif, il faut que le body soit initialisé à display none au depart.
je me suis donc dit que j' pouvais insérer une balise no script dasn ma page pour retablir le display à block de sorte que le sit soit tout de même visible sans js. Or je suis en doctype strict et la balise noscript n'est pas acceptée dans le head et la balise style n'est pas acceptée dans le body.


j'ai testé l'inverse, c'est a dire essayer de modifier au chargement le display avec js , mais l'effet visuel est moche, la page s'affiche puis disparait pour reapparaitre en fade ...
quelle serait la solution ???

Il y aurait bien cette solution, mais un peu crade :

Code:

---

1 2 3 4

<link rel="stylesheet" type="text/css" href="..." /> <script type="text/javascript"> document.write('<style type="text/css">body{display:none;}</style>'); </script>

---

:?

mouaip
on ne peut pas dire que cela ne fonctionne pas ...
mais du coups si j'ai d'autre éléments dont le style doit etre modifié faut que je fasse une ligne de document.write par classe ?

Ou faire une feuille de style spécifique et faire un document.write() avec un link...

non j'ai testé et ça ne marche pas avec la feuille de style à cause du cache ...
je suis obligé de faire un link avec un timestamp pour que la feuille des style se recharge à chaque fois
et du coup je perd en temps de chargement

Bonjour,

sur un projet, je faisais des effets fadeIn à l'ouverture du document HTML.
J'avais fait un "display:none" sur le div (fils direct du body, c'est un conteneur).

Lorsque j'ai inséré des ui tel que l'accordion, j'ai eu des bugs d'affichage !
En retirant le "display:none" au fils conteneur, cela fonctionnait.

Pour garder l'effet fadeIn, j'ai fait dans le $(function() {} :

Code:

---

$('#div-conteneur').hide().fadeIn(300);

---

L'effet n'est plus top, mais au moins, je n'ai plus des bugs.
Désolé, je n'ai pas vraiment proposé une solution, mais plutôt une mise en garde si tu utilises des ui.

Bonsoir

CSS

Code:

---

1 2 3

body#main-body { display:none; }

---

JavaScript, première instruction

Code:

---

document.getElementsByTagName('body')[0].setAttribute('id','main-body');

---

Je ne vois pas l'astuce Daniel ...
pour que javascript puisse pointer sur la balise body il faut d'abord qu'elle soit instanciée ... non ? on verra donc un clignottement puisque le body sera instancié avant de recevoir un id et de prendre son display none ???

Citation:

---

Envoyé par SpaceFrog

non j'ai testé et ça ne marche pas avec la feuille de style à cause du cache ...

---

Comprends pas :koi:
Tu comptes modifier la feuille de style à chaque chargement ?

Code:

---

1 2 3 4

<link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="autres_style.css" />'); </script>

---

si je fais un back ou un reload de la page soit le css n'est pas rechargé, soit le $( n'est pas relancé, mais en tout cas ma page est en display none et ne fade pas :(

Bonsoir

[EDIT 2010-10-08 08:45]
Hier soir j'avais posté un exemple qui fonctionnait bien !

Mais ce matin rien ne va plus :koi:, la page apparaît avant de disparaître. :?

[EDIT 09:30]
Je viens de tester :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<style> body.cacher { display: none; } </style>   <script> $(function(){ $("body").addClass("cacher").fadeIn(4000); }); </script>

---

avec le même résultat, un coup oui et un coup non. :cry:

oui je suis confronté au même souci ...
un bug ? une variation de vitesse ou d'ordre d'interprétation ? du cache ? je ne sais pas où chercher ...
peut être une réinitialisation à display non sur le unload ?
Mais quid des arrêts sauvages ?