Montrer/cacher un div

Soyez le premier à donner votre avis sur cette source.

Snippet vu 27 338 fois - Téléchargée 20 fois

Contenu du snippet

Ce code permet de montrer et de cacher un div. Ce code n'est pas de moi. J'ai juste effectuer une adaptation pour que cette fonction supporte IE7.

appel de la fonction :

// nom du div a cacher/montrer
<script>var popup1="popup1";</script>

// lien qui permet l'effet voulu
<a href="javascript:;" onclick="Suite(this,popup1)"id="pop1">
<imgsrc='../../images/bt-close.gif'> // image si vous voulez
</a>

// on défini le div
<div id="popup1" name="popup1" style="text-align:center;overflow:hidden;height:500px;border: #000000 2px solid;">

Source / Exemple :


function Suite(lien,affiche)
{
var objet = document.getElementById(affiche); // entre id div que tu veux faire apparaître !
if(objet.style.display == "none" || !objet.style.display)
{
        objet.style.display = "block";
	objet.style.overflow = "hidden"; 
	lien.innerHTML = "<img src='../../images/bt-open.gif'>";
	       
	var hFinal      =     560;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
	var hActuel     =     0;	 	//Hauteur initiale (la hauteur dès le début !)
	var timer;
	var fct =        function ()
	{
	      hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
					
	      objet.style.height     =	 hActuel      +     'px';
					
	      if( hActuel > hFinal)
	      {
	          clearInterval(timer);   //Arrête le timer
	          //objet.style.overflow    =   'inherit';
	      }
        };
	fct();
	timer = setInterval(fct,40);    //Toute les 40 ms
			
        }else if(objet.style.display == "block")
	{
	        var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
	        var hActuel     =     560;	 	//Hauteur initiale (la hauteur dès le début !)
	        var timer;
	        var fct =        function ()
	        {
	                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
	                objet.style.height     =	 hActuel      +     'px';
					
	                if( hActuel == 20)
	                {
	                        clearInterval(timer);   //Arrête le timer
	                        //objet.style.overflow    =   'inherit';
							objet.style.display     =   "none";
	                }
	        };
	        fct();     
			timer = setInterval(fct,40);    //Toute les 40 ms
			lien.innerHTML = "<img src='../../images/bt-close.gif'>";
		}
}

Conclusion :


FireFox : Toutes versions
Mozilla : 1 et +
Netscape Navigator : 6 et +
Internet Explorer : 5 et +

// rapide, efficace, simple a modifier... amusez vous bien avec //

A voir également

Ajouter un commentaire

Commentaires

aquewel
Messages postés
145
Date d'inscription
vendredi 14 mai 2004
Statut
Membre
Dernière intervention
6 juin 2010

ya beaucoup plus simple

<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
[javascript:visibilite('divid'); afficher/masquer]

contenu


blocnotes.jemenvol.net/5.afficher-et-masquer-une-div/
cs_keket
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

oui c'est sur mais tu n'aura pas l'effet de fermeture et d'ouverture de la div !!!
C'est la que réside la différence !!
aquewel
Messages postés
145
Date d'inscription
vendredi 14 mai 2004
Statut
Membre
Dernière intervention
6 juin 2010

ok dsl je mettais juste arreter au titre :-) autant pour moi
Arto_8000
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
5
Et une adaptation modulaire ? C'est ce qui faudrait pour que ça soit «simple à modifier» comme tu le dis. Tu n'est sûrement pas familier avec le prototypage et l'usage de classe, mais c'est un minimum pour faire quelque chose de «réutilisable».

Pour que ça soit simple, il faudrait quelque chose comme ceci pour créer une boîte comme ton script :

DivBox = new DivBox("100px", "200px", "Titre", "Contenu"); // On crée l'objet
document.body.appendChild(DivBox.getHTMLElement()); // On l'ajoute dans la page

Je vais travailler sur un petit script comme le tiens, mais selon ma vision (très modulaire) et je vais le posté d'ici peu.
cs_keket
Messages postés
91
Date d'inscription
lundi 25 juillet 2005
Statut
Membre
Dernière intervention
18 mai 2010

Autant pour moi. Je débute dans ce language, et je vois que j'ai pas mal de boulot, mdr. :-p

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.