Chargement d'une page. Bug affichage ?

Version imprimable

23/07/2009, 10h04
thibotus01

Chargement d'une page. Bug affichage ?

Bonjour,

J'utilise un effet d'accordéon en javascript pour développer des menu, sauf que leur contenu est grand, et quand on se rend sur la page, cela développe ces menus avant de les refermer.

Vous y verrez mieux par cet exemple : url retiré

Pendant quelques secondes on voit le contenu lors du chargement... Comme masquer ceci ? 8O
23/07/2009, 10h23
insane1

Bonjour,

Pourrait on voir un peu de code ?
Sinon comme ca il se pourrait que se soit du a un probleme lors du chargement de ta page, car quand on clique sur une video la page se recharge et le menu apparait normalement.
Donc il est possible que lors du premier appel quelque chose soit mal renseigné.
23/07/2009, 10h30
thibotus01

Quand tu cliques sur une vidéo, la page ne se recharge pas, c'est de l'ajax justement.

Elle se charge qu'une fois, quand on se rend dessus...

Quel code veux tu voir ? Y'a pas mal de lignes...
23/07/2009, 10h34
insane1

Quelques lignes du code de ton menu pour commencer ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
	<style type="text/css" >
 
		.accordion_toggle {
			display: block;
			cursor: pointer;
			width:200px;
		}
 
		.accordion_toggle_active {
			background-color: #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
 
		.accordion_content {
			padding-left:5px;
			overflow: hidden;
		}
 
 
		/*
			Vertical Accordions
		*/
 
		.vertical_accordion_toggle {
			display: block;
			cursor: pointer;
			width:195px;
		}
 
		.vertical_accordion_toggle_active {
			background-color: #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}	
 
		.vertical_accordion_content {
			padding-left:5px;
		   overflow: hidden;
		}
 
/* Publicité */
 
		#adsense  {
			z-index:1;
			position:relative;
			margin: -200px 0 0 335px;
		}
 
/* Videos */
 
		#player_content_videos  {
			z-index:2;
			position:absolute;
			margin: 25px 0 0 335px;
		}	
 
</style>

Code:

<div id="player_content_videos"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
                                <dl class="privacy">
                                  <div id="vertical_container" >
		<h6 class="accordion_toggle link-2" >Bandes-annonces</h6>
                                              <div class="accordion_content">
                                              <a href="?trailers/BA-saison-1.mp4" onclick="load_page_videos(this.href); document.getElementById('adsense').style.margin = '0 0 0 335px'; return false;">Saison 1</a><br />
                                              <a href="?trailers/BA-saison-2.flv" onclick="load_page_videos(this.href); document.getElementById('adsense').style.margin = '0 0 0 335px'; return false;">Saison 2</a><br />
 
                                              <a href="?trailers/BA-saison-2-part2.mp4" onclick="load_page_videos(this.href); document.getElementById('adsense').style.margin = '0 0 0 335px'; return false;">Saison 2 part.2</a><br />
                                              <a href="?trailers/BA-saison-2-finale.mp4" onclick="load_page_videos(this.href); document.getElementById('adsense').style.margin = '0 0 0 335px'; return false;">Saison 2 Finale</a>
 
                                   </div>

23/07/2009, 10h43
insane1

Dans la classe accodion_toggle tu as un display block.

C'est peut etre pourquoi il t'affiche directement tout les sous-menus des le demarrage ?
23/07/2009, 10h45
thibotus01

Hum nan c'est la même chose... J'ai peur que ce ne soit pas un problème de CSS ou HTML, mais d'ordre de chargement ou le JS qui ne cache pas bien...
23/07/2009, 10h50
insane1

D'accord,
alors peux tu me montrer a quoi ressemble ton js ? (par rapport a vertical container)

http://www.greeklaserie.fr/js/prototype.js
http://www.greeklaserie.fr/js/effects.js
http://www.greeklaserie.fr/js/accordion.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	<script type="text/javascript">
        
            //
                //  load them onload
                // 
                Event.observe(window, 'load', loadAccordions, false);
        
                //
                //      Set up all accordions
                //
                function loadAccordions() {
                        
                        var bottomAccordion = new accordion('vertical_container');
                        var nestedVerticalAccordion = new accordion('vertical_nested_container', {
                          classNames : {
                                        toggle : 'vertical_accordion_toggle',
                                        toggleActive : 'vertical_accordion_toggle_active',
                                        content : 'vertical_accordion_content'
                                }
                        });
 
 
                        
                }
                
        </script>

23/07/2009, 11h03
insane1

J'ai regardé rapidement le js et je ne vois pas de problemes... :S
Il y a une fonction desactivate, essayes de l'utiliser lors de la création d'un nouvel acordion dans la fonction initialize.

Mais je ne pense pas que le soucis vienne du js.
23/07/2009, 11h15
_IpC_

Le problème viens pour moi du fait que tes sous-menus soit en display: block; au début. Du coup il apparraisse le temps que ton javascript les cache.
Met les donc en display: none; dans le CSS, de base, ainsi ils n'apparaitront pas et tu évitera un traitement JS inutile.
23/07/2009, 11h16
thibotus01

En display:none; on les voit au chargement, et tout le menu disparait ensuite...
23/07/2009, 11h28
_IpC_

C'est bizarre ça.
Que fait ton constructeur accordion(...) ?
23/07/2009, 11h29
thibotus01

A vrai dire ca je ne sais pas vraiment, c'est un effet repris ici : http://www.stickmanlabs.com/accordion/
23/07/2009, 11h32
insane1

Tu as bien mis display:none dans ta classe accordion_content ?
23/07/2009, 11h45
_IpC_

Regarde le dernier paragraphe de la page que tu viens de nous donner.
Je cite :

Citation:

Preload :
So let's say you want all your accordions closed on page load but don't want the nasty flash and don't want to sacrifice accessibility.
25/07/2009, 18h25
thibotus01

Hum en effet c'est sensé régler les choses, mais ca n'y fait rien j'ai bien l'impression
25/07/2009, 22h40
Jonathan Petitcolas

Je te déconseille vivement de cacher le contenu des accordéons par défaut. En effet, imagine que l'utilisateur ait désactivé Javascript (ce qui arrive souvent dans le cas des périphériques mobiles) ou qu'il y ait un bug sur un autre script. Alors, le contenu ne sera jamais révélé, le script ne le faisant pas apparaître. Ce qui est plus que moyen niveau accessibilité.

D'autre part, je ne suis pas sûr que les moteurs de recherche apprécient un display: none; sur de grosses portions de contenu. En effet, pour eux, le Javascript n'existe pas.

Au final, je pense que les visiteurs peuvent attendre quelques milli-secondes de plus avant de naviguer. D'autant plus que cela ne les paralysent pas complètement. Donc, ne t'en fais pas avec ce "détail". ;)
25/07/2009, 22h42
thibotus01

Oui tu as plustot raison, mais le problème n'était pas le délai d'affichage, mais l'effet disgracieux où tout le contenu est dévoilé pendant quelques milli-secondes avant de se refermer pendant le chargement de la page. :)