Discussion :

[SpaceFrog]

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 ???

[Bovino]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

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 ?

[Bovino]

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

[SpaceFrog]

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

[gui80]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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.

[Bovino]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>