Discussion :

[thibotus01]

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 ?

[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é.

[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...

[insane1]

Quelques lignes du code de ton menu pour commencer ?

[thibotus01]

Code :

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

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 :

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

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

Code :

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

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>

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

[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...

[insane1]

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

[thibotus01]

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

Code :

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

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>

[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.

[_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.

[thibotus01]

En display:none; on les voit au chargement, et tout le menu disparait ensuite...

[_IpC_]

C'est bizarre ça.
Que fait ton constructeur accordion(...) ?

[thibotus01]

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

[insane1]

Tu as bien mis display:none dans ta classe accordion_content ?

[_IpC_]

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

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.

[thibotus01]

Hum en effet c'est sensé régler les choses, mais ca n'y fait rien j'ai bien l'impression

[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".

[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.