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

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

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 04 15:06:23

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

[VISUAL STUDIO 2010] LES TESTS CASES C'EST BIEN, MAIS JE VAIS DEVOIR TOUT RééCRIRE ? par Etienne Margraff

MVP[GRIBOUILLON].ADDYEAR par Gribouillon

RE : PROBLèME AVEC IFRAME par Bul3

RE : PROBLèME AVEC IFRAME par faluorn

RE : PROBLèME AVEC IFRAME par Bul3

PROBLèME AVEC IFRAME par faluorn

RE : JAVASCRIPT par Bul3

+ de logiciels à télécharger

1 464 255 membres
159 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 094 codes, 1 302 815 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 : 13 341

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

RAINBOW CURSOR par wackybacky

DIAPO MULTIPLES EN FONDU par kazma

DÉGRADÉ DE TEXTE par XelectroX

DRAG DROP DE VIDEOS par kazma

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E... par abdelaziz_info

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator

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

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é 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 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è Zoom sur photo qui remplace un div [ par toons43 ] Bonjour à tous,Je cherche un script ou un debut de code pour faire un zoom sur image.Le zoom doit s'effectuer par dessus le texte de mon site.Mais rie drag n drop d'image [ par crasse ] bonsoir !Je suis en train d'essayer de realiser une interface simple de drag n drop d'image mais je n'y parviens pas completement...pour commencer, je dupliquer le contenu d'une div (faire papier peint) [ par crasse ] bonsoir !je voudrais savoir si il est possible sans faire du copier coller brutale de dupliquer le contenu d'une div horizontalement et verticalement Fonction avec boucle for qui ne marche pas [ par toons43 ] Bonjour à tous,J'ai un souci avec une fonction que j'ai crée, c'est une fonction qui me permet de zoomer des thumbnails (6 en tout) en changeant le co barre fixe qui ne se rafraichit pas [ par yohannIII ] Bonjour,je souhaiterai faire une barre comme sur http://www.jiwa.fr/ qui ne se rafraichit pas au changement de page mais sans utiliser de frame.le but