Masquer un contrôle avec effet de rideau

Télécharger le projet
Commenter

Description

Ce petit script masque/affiche progressivement un contrôle tel qu'un champs de texte à l'aide d'un div, donnant un effet de rideau. Le div peut contenir du texte ou des images mais sa gestion n'est pas garantie si le contenu est plus grand que le div.

Source / Exemple : 


<script language="JavaScript" type="text/javascript">
var contenu
function masque(IdDiv, IdControle, IdBouton) {
	LeDiv = document.getElementById(IdDiv);
	LeControle = document.getElementById(IdControle);
	LeBouton = document.getElementById(IdBouton);
	contenu = LeDiv.innerHTML;
	LeDiv.innerHTML = "";
	if (LeBouton.value == 'Masquer')
		{
			LeBouton.value = 'Afficher';
			LeDiv.style.visibility = 'visible';
			LeDiv.style.top = LeControle.style.top;
			LeDiv.style.left = LeControle.style.left;
			LeDiv.style.height = LeControle.style.height;
			LeDiv.style.width = 0;
			agrandir(IdDiv, IdControle);	
		} else {
			LeBouton.value = 'Masquer';
			reduire(IdDiv, IdControle);
		}
}

function agrandir(IdDiv, IdControle) {
	LeDiv = document.getElementById(IdDiv);
	LeControle = document.getElementById(IdControle);
	if (parseInt(LeDiv.style.width)<parseInt(LeControle.style.width))
		{
			LeDiv.style.width = parseInt(LeDiv.style.width) + parseInt(5);
			setTimeout("agrandir('"+IdDiv+"', '"+IdControle+"');", 15);
		} else {
			LeDiv.innerHTML = contenu ;
		}
}

function reduire(IdDiv, IdControle) {
	LeDiv = document.getElementById(IdDiv);
	LeControle = document.getElementById(IdControle)
	if (parseInt(LeDiv.style.width)>0)
		{
			LeDiv.style.width = parseInt(LeDiv.style.width) - parseInt(5);
			setTimeout("reduire('"+IdDiv+"', '"+IdControle+"');", 15);
		} else {
			LeDiv.innerHTML = contenu;
			LeDiv.style.visibility = 'hidden';
		}
}
</script>

Conclusion :


J'espère que ça vous plaira !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.