begin process at 2010 02 10 15:18:00
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > MONTRER/CACHER UN DIV

MONTRER/CACHER UN DIV


 Information sur la source

Note :
8 / 10 - par 2 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :cacher, montrer, div, suite, réduire Niveau :Débutant Date de création :05/02/2008 Vu :16 225

Auteur : keket

Ecrire un message privé
Site perso
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 Description

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:50 0px;border: #000000 2px solid;">

Source

  • 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'>";
  • }
  • }
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 //


 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3

 Sources en rapport avec celle ci

Source avec Zip CLASS BARRE DE DÉFILEMENT (SCROLLBAR) JAVASCRIPT par TheWeasel47
DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator
CACHÉ DES ZONE DANS UNE PAGE WEB,DIV,CASE,LIGNE DE TABLEAU..... par hedi_tounsi
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE par PetoleTeam
Source avec Zip DIV POSITION FIXED SUR LA PAGE par PetoleTeam

Commentaires et avis

Commentaire de aquewel le 06/02/2008 21:51:16

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>
<a href="javascript:visibilite('divid');">afficher/masquer</a>
<div id="divid" style="display:none;">contenu</div>

blocnotes.jemenvol.net/5.afficher-et-masquer-une-div/

Commentaire de keket le 07/02/2008 18:43:34

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 !!

Commentaire de aquewel le 07/02/2008 20:06:12

ok dsl je mettais juste arreter au titre :-) autant pour moi

Commentaire de Arto_8000 le 08/02/2008 00:53:59

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.

Commentaire de keket le 08/02/2008 09:58:55

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

Commentaire de Teclis01 le 08/02/2008 11:26:30

C'est bien pour un debut :)

Commentaire de keket le 08/02/2008 13:02:07

Merci bien ;-)

Commentaire de quiche13 le 11/02/2008 14:02:26 8/10

Je débute aussi en javascript et je cherche à faire pratiquement la même chose,
la seule différence, j'aimerai que la hauteur finale ne soit pas en dur,
mais plutôt en fonction du contenu du div à afficher.(je sais pas si je me fais bien comprendre...)

Plus précisément, c'est pour l'affichage des messages reçu dans la "boite mail" de chaque utilisateur sur mon site,
je n'affiche que la 1ere ligne du message et une action sur un bouton permet d'afficher la suite du message, bref mon soucis et que je n'arrive pas à récupérer la hauteur du div du message complet, qui est différente selon la longueur du message bien entendu.

Enfin bref, merci pour ce petit script qui m'aide bien déjà, et si quelqu'un a la solution à mon petit problème... merci d'avance :p

Commentaire de billbao1987 le 11/02/2008 21:27:55

Salut ! Je suis étudiant en Btas com multimedia à l'Ecole estienne à Paris,
et jtrouve très interessant ce code!

J'avais trouvé comment montrer et cacher des div avec un code de dreamwaver ( donc pas libre de droit ...) et j'avais extrait un code ajax du site d'info "Backchich" (cf : apparition disparition fluides des coms) qui permettait ce genre d'interpolation que permet apparemment ce code...

Je le comprend à peu près, seulement, si la partie de code dans ton descriptif est a mettre dans la balise body de la page html contenant la div, ou insert - on le code qui dicte l'interpolation a suivre et ses 2 conditions ?

Faut il l'enregister dans un fichier javascript externe et l'indiquer dans la <head ?>

Merci !
ALex

Commentaire de midnnight le 17/04/2008 17:50:03

Bonjour, c'est ce que je cherche, à l'exeption du fait que je voudrais mettre plusieurs div contenant du texte, du style : Article 1 Article 2 Article 3 etc...sur la même page et tous fermés au chargement de la page.
Le top serait que div que l'on appel referme le précédent qui a été ouvert et que le script ne soit pas trop lourd (je sais ça fait beaucoup, lol !).
Je cherche ça depuis plusieurs heures sur le net et en trafiquant des codes existants, mais trop débutant en java, je galère... Au cas où... Si quelqu'un veut m'aider. A++

Commentaire de CSIBern le 03/08/2008 07:39:23

Bonjour,

C'est bien beau cette DIV qui se réduit, elle marche bien ... tant que je n'y insère rien dedans. J'y ai ajouter du texte (avec ou sans balise <p>) et une image et donc la réduction se fait jusqu'à la hauteur du contenu, elle ne se ferme donc pas entièrement. Du coup, je ne vois pas vraiment l'utilisé d'avoir une DIV vide.

Est-ce que j'ai fait une erreur quelque part ou est-ce tout simplement impossible de faire la même chose avec une DIV remplie ?

Sinon script sympa.

Commentaire de CSIBern le 03/08/2008 07:53:55 8/10

Autant pour moi, j'avais mal recopié overflow:hidden dans le DIV, désolé.

Commentaire de denchamanie le 03/09/2008 19:14:56

Bonjour, pour avoir l'effet "animé de l'ouverture d'une div j'ai pas trouvé mieux que ce script, c'est déjà pas mal. Mais comme Quiche13, j'aimerais bien que la div n'est pas une hauteur fixe mais une en fonction du contenu !
Quelqu'un a la solution ? Une direction vers une autre code (j'ai bien fouillé) !
Super merci d'avance
PS : dans la balise <div> j'y ai ajouté dans style display:none;
:)

Commentaire de wiby35 le 24/11/2009 00:29:45

Vraiment génial le script...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Cacher balise DIV [ par aloisio11 ] Bonjour,J'utilise ce code pour cacher des parties (&lt;div&gt;&lt;/div&gt;) de ma page :document.getElementById('DivIcones').style.display='none';Il f Cacher/Montrer [ par keket ] Bonjour, je viens vous voir car j'aimerai ajouter a mon site la possibilité de cacher ou de montrer une partie de l'écran.Je voudrais avoir le même ré probleme clic avec une fonction afficher cacher une div [ par nicooooooooooooooo2006 ] Bonjour à tous,Mon probleme est que j'ai repris une fonction permettant de cacher ou d'afficher une div suivant un lien cliquer il fonctionne mais mal Cacher une "div" pendant un certain temps [ par Hepoc ] Bonjour, Voilà que depuis <span class="spellmodupdated" title="" mce_serialized="15" hptip="Faute d'orthographe - suggestions : hè Montrer cacher des boites [ par simo14 ] Bonjour,A partir d'une fonction Javascript qui me permet de montrer et cacher une boite(une table) avec un bouton, je voudrais créer plusieurs boites Recuperation d'ID DE DIV [ par grandpa006 ] Bonjour,Voila je voudrais recuperer l'ID de mes DIV en meme temps que le click de la souris mais j'y arraive pas.Si une ame charitable a une idée se s LEs Boxes Agradir/Réduire [ par infoplus22 ] Mon objectif est de faire exactement pareil que les Boxes qui se trouvent dans la partie de navigation gauche tout en bas du site: Mes RSS, Derniers l IE + Ajax + Css : pas de css ! [ par lyrix37 ] Bonjour la compagnie ! et bien mon problème est tout simple : j'ai fait une page web, avec changement de div en ajax : mais quand je change ce div, q Masquer/ afficher dynamiquement une div (ou autre element) en Js [ par rhan_659 ] bonjourje dois être une buse finis, parce que je n'arrive pas a masquer/afficher dynamiquement une div en JS.soit je la rend visible et je peut la mas Div.innerHTML et page html [ par rhan_659 ] bonjourj'ai besoin d'afficher une page html complete dans une div.via de l'ajax je récupére ma page html que j'incorpore dans ma div via ineerHTMLmais


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,702 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales