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
Div Cacher/Montrer [ par ghighidu63 ]
Bonjour depuis quelques jours je suis confronter à un problème. Je n'arrive pas à cacher plusieurs div, c'est à dire, Quand je clique sur le div 1 ca
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
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è
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
Trier une NodeList : comment faire avec internet explorer ? [ par AlexN ]
Bonjour,Je cherche à ajouter un comportement supplémentaire à NodeList pour trier directement des noeuds en fonction de leur contenus. Ca marche parto
comment générer dynamiquement des DIV contenat des textes différents [ par zazou11 ]
bonjourest ce quelqu'un peux m'aider , j'ai besoin de créer des DIV dynamiquement (cad je n c pas combien je vais avoir tt dépend d nombre de bouton q
Ajout de champs dans un formulaire [ par neolitec ]
Bonjour,J'ai cherché des moyens pour ajouter des champs dans mon formulaire, sans avoir recours à un rechargement de la page.J'avais écrit une fonctio
image différent selon action souris [ par begin974 ]
Bonjour à tous!J'ai besoin d'aide svp.Est-il possible de sélectionner une image pour remplir tant qu'on veut des div vides avec.Voici un exemple où je
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|