CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 10 12 21:04:57

[SILVERLIGHT] EN ATTENDANT SILVERLIGHT 2 RTW par Audrey

LE NOUVEAU GOJIRA, C'EST POUR LUNDI. par coq

SHAREPOINT : NOUVEL ARTICLE SUR LA MISE EN PLACE DES SCOPES DANS MOSS SEARCHS par ROMELARD Fabrice

HELLO CS par julz

MSDN/TECHNET/MICROSOFT DAYS TOUR 2008 à LILLE LES 13 ET 14 OCTOBRE ! par redo

RE : PROBLEME D'AFFICHAGE D'UNE IMAGE AVEC ONMOUSEOVER ET SHOWTRAIL par stefane26

RE : CENTRAGE D'UNE PAGE AVEC MARGE NéGATIVES par PetoleTeam

RE : PROBLEME D'AFFICHAGE D'UNE IMAGE AVEC ONMOUSEOVER ET SHOWTRAIL par PetoleTeam

CENTRAGE D'UNE PAGE AVEC MARGE NéGATIVES par ludomacho

RE : CRéATION D'UN TCHAT par TheCamel

+ de logiciels à télécharger

1 260 739 membres
565 nouveaux aujourd'hui
14 412 membres club

Trouver une ressource

Trouvez une ressource parmi 38 837 codes, 1 185 989 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MONTRER/CACHER UN DIV

Information sur la source

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

Auteur : keket

Site perso

Ecrire un message privé

Note :

8,00 / 10

Commentaire sur cette source (13)

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:500px;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

TROMBINOSCOPE par sopatleb

DIAPO EN FONDU ENCHAINE par kazma

ANIMATION LOGO par opossum_farceur

FADING OBJETS HTML par Vedlen

ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

CACHÉ DES ZONE DANS UNE PAGE WEB,DIV,CASE,LIGNE DE TABLEAU..... par hedi_tounsi

DIV QUI SUIT LE SCROLLING DE LA PAGE par PetoleTeam

DIV POSITION FIXED SUR LA PAGE par PetoleTeam

CACHER LES ADRESSES EMAILS AVEC UN BOUTON VIA UN POPUP: par jeepjeep14

TAILLE D'UN <DIV> OU <SPAN> par Mokost

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;
:)

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 (<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é 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 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 Appel d'une fonction au chargement d'une DIV ? [ par sphaxslayer ] Bonjour tout le monde,voilà je me tourne vers vous car j'ai un petit souci qui, j'en suis sûr, sera de la broutille pour vous... En fait, je suis (bêt Comment rendre le bouton 'Réduire fenetre' inactif [ par PascalCmoa ] Bonjour,je cherche à réaliser un fenêtre non redimensionnable, là c'est bon je sais faire. Par contre, je voudrais savoir si il serai possible de rend