11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai utilisé la méthode des popups javascript d'alsacreations en modifiant quelque peu son principe de fonctionnement.

Pour mon application, j'avais besoin d'une astuce pour cacher des blocs de commentaires optionnels sur un gros formulaire et les afficher si besoin en cliquant sur leurs labels. Ca permet un affichage plus lisible en réduisant la barre de défilement verticale.

Ca marche très bien et c'est codé de manière à afficher les textarea si le navigateur a le javascript désactivé.

Petit soucis, ça créait un petit sursaut à l'affichage, le temps que le javascript masque les textarea et j'aimerais savoir si il existe une méthode en javascript pour afficher une barre de chargement le temps que les commentaires soient masqués.

Le javascript.

<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=20; i++) {
		if (document.getElementById('comm'+i)) {document.getElementById('comm'+i).style.display='none';}
	}
if (d) {d.style.display='block'; d.focus();}
}
window.onload = montre;
//-->
</script>


Le css (juste pour montrer que c'est bien le javascript qui change l'attribut display)

.comm textarea {
	width: 100%;
}


L'html

<ul class="bloc">
     <li class="inv"><!-- Inventaire --></li>
     <li class="obs"><!-- Observation --></li>
     <li class="etat"><!-- Etat générale --></li>
     <li class="comm">
          <label onclick="javascript:montre();">- Commentaires</label>
          /
          <label onclick="javascript:montre('comm1');">+ Commentaires</label>
          <textarea name="comm1" id="comm1"></textarea>
     </li>
</ul>


Merci.

P.S : Je sais pas si c'est sémantique d'utiliser une liste dans un formulaire mais c'est dans le cadre d'une application pro qui sera entre les mains d'un utilisateur connu avec une installation locale de php/mysql et firefox. C'était surtout pour éviter la lourdeur des tableaux.
Modifié par mangafan (09 Sep 2006 - 17:20)
Modérateur
Salut,

Pour éviter le désagrément qu'est l'affichage du textarea au chargement de la page, tu dois pouvoir mettre ceci dans ton entête head :

<script type="text/javascript"><!--
document.write('<'+'style type="text/css" media="screen">');
document.write('.comm textarea { display: none; }');
document.write('<'+'/style>');
//--></script>
Cà t'évite la barre de chargement. Smiley cligne
Je te remercie, ça marche et c'est sûr que c'est bien mieux que la barre de chargement.

Mes essais avaient ajoutés plus de problèmes qu'autres choses...

Je maîtrise pas bien (du tout) le javascript, je crois que je vais aller consulter le poste sur les livres et courir chez un libraire. Smiley smile

Edit :
j'ai enlevé
window.onload = montre;

Ca servait plus à grand chose du coup.
Modifié par mangafan (09 Sep 2006 - 17:59)
Modérateur
a écrit :
Edit :
j'ai enlevé
window.onload = montre;


Ca servait plus à grand chose du coup.
Il aurait mieux valu faire passer les onclick dans la partie javascript mais bon, çà viendra plus tard. Smiley cligne
Ah ! On peut ?

Je vais fouiller mon bouquin Smiley ravi

J'imagine que c'est en s'appuyant sur les attributs id des labels, qu'il faut que j'ajoute du coup.

Je ferais tout ça quand j'aurais fini toute la partie php/mysql.

(En ce moment je me bats avec les AS JOIN, LEFT JOIN et cie, pour réduire le nombre des requêtes)
Modifié par mangafan (12 Sep 2006 - 15:56)