Accueil > > > MONTRER/CACHER UN DIV
 MONTRER/CACHER UN DIV
 Information sur la source
 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
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Cacher balise DIV [ par aloisio11 ]
Bonjour,J'utilise ce code pour cacher des parties (<div></div>) 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
|
Derniers Blogs
 [DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja
C'est le dernier principe des principes du Design Orienté Objet (The Principles of Object Oriented Design) fondés par Robert C. Martin plus connu sous le pseudonyme d'Uncle Bob.
l'image empruntée de LosTechies.
Je ne traite pas les principes dans...
Cliquez pour lire la suite de l'article par tja TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|