11524 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Faire apparaitre et disparaitre une div

Bonjour, j'aimerai savoir si il existe des explications concernant l'apparition/disparition d'une div ??

Ce que je recherche ressemble un petit peu à moofx (en ajax), mais en plus simple, c'est a dire que j'ai un tres gros formulaire et j'aimerai qu'au milieu de celui ci en cliquant sur un lien une div apparaisse au milieu du formulaire,

en gros peut-être faudrait il mettre cette div en visibility:hidden et quand on clique sur ce lien qu'elle devienne visible(puis qu'elle redevienne envisible si on reclique sur le lien) mais je ne sait pas comment faire...

Merci ^^
Modifié par Dynexd (02 Nov 2006 - 20:45)
Bonjour.

Basiquement, il suffit d'agir avec javascript sur des propriétés de style du div concerné. La plupart des propriétés css sont accessibles en lecture et modifiables en écriture.

Voici un exemple de solution:



<html>
<head>

<script type="text/javascript">

/** Fonction basculant la visibilité d'un élément dom
* @parameter anId string l'identificateur de la cible à montrer, cacher
*/
function toggle(anId)
{
	node = document.getElementById(anId);
	if (node.style.visibility=="hidden")
	{
		// Contenu caché, le montrer
		node.style.visibility = "visible";
		node.style.height = "auto";			// Optionnel rétablir la hauteur
	}
	else
	{
		// Contenu visible, le cacher
		node.style.visibility = "hidden";
		node.style.height = "0";			// Optionnel libérer l'espace
	}
}

</script>

</head>

<body>

	<h1>Titre </h1>
	<p>Contenu précédant </p>

	<a href="#" onclick = "toggle('foo')">Cliquer pour basculer l'état du div suivant</a>

	<!-- L'identificateur id du div doit être unique. Içi, "foo" ou "bar" ou autre, mais unique dans le document-->
	<div id="foo">Ce contenu est visible ou non selon le cas</div>

	<p>Contenu suivant </p>

</body>
</html>


Si vous désirez une appartion en popup, il suffit d'agir sur la feuille de style :


<style type="text/css">
#foo {
	position:absolute;top:200px;left:200px;
	background-color:silver; color:green;
	border:2px solid navy;
	padding:2em;
}
</style>


Un peu de littérature :
http://fr.selfhtml.org/javascript/objets/style.htm#proprietes_style
Hello !

J'ai un peu modifié le code pour faire apparaître/disparaître des DIV.
Le truc c'est que le code nécessite 2 clics pour se déclencher.
Voilà le codage de ma fonction


function archives(id)
{
	var archive=document.getElementById(id).style;
	
	if(archive.display=='block'){
		archive.display='none';
	} else {
		archive.display='block';
	};
}


Lors du premier clic sur une balise qui est visible, le code rentre dans la première boucle.
Tout rentre en ordre lors du second clic. Le "problème" se manifeste sous FireFox et sous IE...
Si vous aviez une idée.
Ce n'est pas super gênant, mais bon, si ça pouvait être tip top Smiley smile
Modifié par BruceFeuillette (02 Nov 2006 - 15:26)
Au démarrage, la propriété "display" n'est pas renseignée. Sa valeur est vide.
Il suffit de modifier la condition comme suit pour obtenir le résultat au premier clic..

La barre verticale, (touches AltGR et 6) est une condition OU.


	if((archive.display=='block') | (archive.display=='')) {
		archive.display='none';
	} else {
		archive.display='block';
	}

Modifié par GeorgesM (02 Nov 2006 - 15:44)
Merci !
La louse, j'avais fait un test pour afficher la valeur et je n'avais même pas tilté...
Jamais bon de rester trop longtemps sur un même problème Smiley smile

Par contre le ou, c'est || Smiley cligne

Ca ne fonctionne pas plus Smiley smile
J'ai 3 éléments: 1 affiché et 2 cachés.
Le premier clic donne toujours un vide, la valeur n'est pas créée.
J'ai même essayé de mettre un code JS qui remplace le CSS en affectant les propriétés block et none pour display, mais visiblement ça n'est pas pris en compte.
Modifié par BruceFeuillette (02 Nov 2006 - 16:07)
Pouvez vous donner un bout de code ?

N'y a t'il pas un problème d'identificateur?

Que dit la console javascript de Firefox ?
Modifié par GeorgesM (02 Nov 2006 - 16:13)
Merci beaucoup pour tous ces posts ca fait plaisir le probleme est quasi résolu Smiley smile

Sinon j'ai simplement rajouter style="display:none;" dans ma balise div, et ca marche dès le premier clic, ca marche nickel sous ie et firefox,

ca pourrait ne pas marcher sous d'autres navigateurs qui prendrait ce style comme prioritaire sur la modif que fait javascript ?

pour ceux que ca interesse, l'utilisation :
http://www.neghome.com/frm-renseignements2.php
Modifié par Dynexd (02 Nov 2006 - 18:06)
Sujet clos
Aller à