Forum d'entraide PHPFrance

Bonjour,

je cherche à afficher un div caché en cliquant sur un bouton.
Jusque là c'est bon aucun problème.
Par contre j'aimerais que l'affichage se fasse progressivement, comme si la hauteur du div augmentait jusqu'à permettre de voir completement le contenu.
J'ai essaié en augmentant par une boucle la valeur "height" du style CSS mais cela ne fonctionne pas, l'affichage est toujours entier.

Une idée?

Ne le fais surtout pas toi-même mais utilise Yahoo! UI. Prends exemple sur le source de cet exemple.

Quel est ton degré d'affinité avec Javascript ?

Euh, en relisant je m'aperçois que tu as un problème de CSS aussi ? Donne un lien vers la page pour qu'on jette un œil ?

désolé je ne peux pas donner un lien vers la page, c'est pour une application intranet.

Pour le javascript je me débrouille, mais j'évite d'en utiliser le plus possible. Là c'est parce que le chargement de la page demande plusieurs traitements de données assez longs donc hors de question de faire ca coté serveur.

En ce qui concerne le CSS, une erreur? voilà le css de mon div caché :

Code : Tout sélectionner

.champCache { display: none; }

et le javascript qui va afficher :

Code : Tout sélectionner

function afficherDiv(identifiantDiv){
		if(document.getElementById(identifiantDiv).style.display == "block"){
			document.getElementById(identifiantDiv).style.display = "none";//affichage du div
			document.getElementById("bouton_affichage_"+identifiantDiv).value="VVV";//changement de valeur du bouton
			document.getElementById("bouton_affichage_"+identifiantDiv).src = "images/fleche_bas1.gif";//changement de l'image du bouton 
		}
		else{
			document.getElementById(identifiantDiv).style.display = "block"; //dissimulation du div
			document.getElementById("bouton_affichage_"+identifiantDiv).value="^^^";//changement de valeur du bouton
			document.getElementById("bouton_affichage_"+identifiantDiv).src = "images/fleche_haut1.gif"; //changement de l'image du bouton 
		}
	}

[/code]

regarde avec mootools, un ensemble d'objet javascript permettant de faire des effets sympas

merci pour les outils, je vais jeter un coup d'oeil

Bonjour,
La biblio scriptaculous.js, dérivée de prototype.js fait tres bien ca avec un choix riche.
Voici les fonctions de la biblio qui repondent a ton besoin:

Effect.SlideDown(Id, {duration: temps en seconde});
Effect.SlideUp(Id, {duration: temps en seconde});

Par contre, si tu as la solution pour cacher des id dynamiques à l'initialisation, je suis preneur car j'ai une solution qui marche sur ff mais pas pour ie6 (pas testé ie7).

Cordialement

Par contre, si tu as la solution pour cacher des id dynamiques à l'initialisation

J'utilise le css avec l'attribut display

classes :

Code : Tout sélectionner

.divCache {display:none;}

Oui, j'utilise également cette propriété.

Dans mon head, j'ai :

Code : Tout sélectionner

	<script type="text/javascript">
		 function afficheId(baliseId)
		  {
		  if (document.getElementById && document.getElementById(baliseId) != null)
		    {
			     document.getElementById(baliseId).style.visibility='visible';
            document.getElementById(baliseId).style.display='block';   // non obligatoire
		    	Effect.SlideDown(baliseId, {duration:1});
	    	    }
		  }
		
		function cacheId(baliseId)
		  {
		  if (document.getElementById && document.getElementById(baliseId) != null)
		    {
				Effect.SlideUp(baliseId, {duration:1});   
		    }
		  }
		function initId(baliseId)
		{

		  if (document.getElementById && document.getElementById(baliseId) != null)
		       {
			        document.getElementById(baliseId).style.display='none';
			}
		}
	</script>

Et juste avant la fermeture de mon body, j'utilise ses lignes pour l'init.

Code : Tout sélectionner

	<script type="text/javascript">
		// si JavaScript est disponible, cache le contenu dès le
		// chargement de la page. Sans JavaScript, le contenu sera
		// affiché.	 

			var nombre_enfant=document.getElementById("def_lexique").childNodes.length;
			for (var i = 0; i < nombre_enfant ; i++) {
			    initId(document.getElementById("def_lexique").childNodes[i].getAttribute("id"));
			}
	</script>

Mais cela ne fonctionne pas sous ie (6 du moins), sous ff, impec.

j'essaie d'incorporer ça à mon projet et je tiens au courant

Forum d'entraide PHPFrance

Javascript - afficher div caché progrssivement

Javascript - afficher div caché progrssivement