Discussion :

[robmayol]

Bonjour à tous !

J'utilise script.a.culous pour "toogler" un effet blind sur un élément ul :

Code :

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

1
2
3
4
5
6
7
8
 
<li class="categorie" onclick="Effect.toggle('cat10', 'blind', { duration: 0.3 })">azerty
	<ul id="cat10" title="Projects" class="souscategorie">
		<li class="">
			<a href="index.php?page_name=8">uiop</a>
		</li>		
	</ul>
</li>

Ça marche, c'est génial ! Mais, j'aimerais que mon élément soir caché par défaut. J'ai essayé de faire ça en CSS avec "display: none", avec "height: 0"... mais l'effet bugge. J'ai aussi tenté de mettre d'utiliser onload pour toggler une première fois mais c'est interdit dans une autre balise que body (et au moment où body se charge je ne "connais" pas encore les id des listes à cacher.

Si quelqu'un a une idée je suis preneur

Merci !

[gwyohm]

J'ai aussi tenté de mettre d'utiliser onload pour toggler une première fois mais c'est interdit dans une autre balise que body

Qu'est-ce qui est interdit ?
Tu peux mettre ton script à la fin du body :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript">
$("cat10").hide();
// ou mieux tous les sous éléments d'un coup :
$$(".categorie ul").invoke("hide");
</script>
</body>

Ou encore mieux dans un js externe :

Code :

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

1
2
3
4
5
6
7
8
 
Event.observe(window, load, initMenu);
function initMenu() {
$$(".categorie").each(function(li){
  li.observe("click", Effect.toogle.bindAsEventListener(li.down("ul"), 'blind', { duration: 0.3 }));
$$(".categorie ul").invoke("hide");
});
}

EDIT : Dans mon code du fichier externe, il n'y a plus de onclick à mettre dans ton code html, c'est l'initialisation qui s'en occupe

[robmayol]

Qu'est-ce qui est interdit ?

Il me semblait que le W3C interdisait d'utiliser onload dans une autre balise que body. En fait, après vérification c'est onLoad avec une majuscule qui est interdit...

Je lutte pas mal avec JavaScript et DOM, j'ai acheté un bouquin "JavaScript pour le Web2.0" mais certains paragraphes sont encore un peu high-level pour quelqu'un qui n'est pas initié à la POO et à la vraie programmation en général. Je connais PHP sur le bout des doigts mais JS c'est une autre paire de manches (les standards, les différences entre navigateurs ).

En tout cas merci beaucoup pour cette réponse rapide et efficace !

Une petite question quand même, j'ai cru comprendre que le "$" servait à appeler une classe de bibliothèque mais pourquoi certaines de tes lignes utilisent deux "$$" ? C'est peut être une notion très anecdotique que j'apprendrais en évoluant en JS mais je suis curieux

[gwyohm]

Une petite question quand même, j'ai cru comprendre que le "$" servait à appeler une classe de bibliothèque mais pourquoi certaines de tes lignes utilisent deux "$$" ? C'est peut être une notion très anecdotique que j'apprendrais en évoluant en JS mais je suis curieux

Alors la fonction $ qui est propre à prototype te permet d'obtenir un "élément étendu prototype" par son ID. La fonction $$ te renvoie elle un tableau d'éléments étendus prototype" par un sélecteur css. Je met étendu prototype entre guillemets car c'est un peu plus compliqué que ça. Pour bien comprendre, la doc !

Du coup tu peux écrire des instructions telles que

Code :

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

1
2
3
 
$("jambon"); // renvoie l'élément d'id jambon
$$("#jambon")[0]; // idem avec la fonction $$ simplement en sélecteur css, il faut passer le #

Mais pour plus d'infos :
$ $$

[robmayol]

C'est excellent ça, j'ai l'impression que ça va me simplifier grandement la vie ! Adieu getElementById(), bonjour les dollars...

Merci encore pour ces précision !

P.S. C'est marrant, "jambon" c'est aussi un de mes mots joker favoris quand je code =)