Afficher / Cacher Div + Effet sur Texte

[HiRoN]

Bonjour,

A partir d'un script que j'ai repris & amélioré, j'affiche ou cache un div en cliquant sur un lien (a href). J'ai ajouté un effet sur la taille de la police pour qu'elle grossisse (ou se réduise) "proportionnellement" à la taille du block.

J'ai donc tenté de rendre le block plus ou moins "générique" de façon à ce que peut importe la taille de mon block, la taille du texte soit toujours la même.

Un petit exemple de mon script en ligne : ici (voir la source pour afficher l'intégralité du code)

Plusieurs problèmes :

1 - Sous IE, on peut ouvrir / fermer le Div mais 1 seule fois (après ça plante, la page contient une erreur mais je n'arrive pas à la corriger).
2 - sous IE un espace se crée sous le div (+ il est grand, + l'écart est important).
3 - Sous IE, il ne me prend pas en compte le CSS (qui est correctement compris sous Firefox).

4 (Bonus) - Je donne en paramètre le nombre de ligne (je calcule avec le script grossièrement la taille totale du block en fonction = police 13px + marge 5px x nbre de ligne), comment mieu ajuster cette taille ?

N'étant pas un expert en Javascript, je me tourne vers vous en espérant finaliser correctement mon script
Je suis preneur de toutes corrections sur les 4 points énoncés + haut (surtout la 1ere, afin que l'ouverture / fermeture soit correctement exécuté)

Cordialement,

[Bovino]

Bonjour,
Désolé, j'ai pas trop le temps de regarder ton code en détail, mais j'avais créé une petite fonction similaire il y a quelque temps, donc tu peux l'adapter et l'utiliser.
En revanche, elle n'ouvre et ferme que verticalement, mais ça doit pas être trop compliqué de faire un effet horizontal en parallèle...

var restaure = new Array;
window.onload=function(){
	restaure['zone2'] = document.getElementById('zone2').offsetHeight;
	document.getElementById('zone2').style.height = '0px';
	document.getElementById('zone2').style.overflow = 'hidden';
	document.getElementById('zone2').style.display = 'none';
}
function swap(elmt){
	elt=document.getElementById(elmt);
	if(elt.style.display=='none'){
		var taille = restaure[elmt];
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+5)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure[elmt] = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=5){elt.style.height=taille+'px';taille-=5;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}
 

Explications :
Tu initialises d'abord un tableau élément/taille pour stocker les dimensions initiales de tes éléments.
Dans le onload, tu stockes les tailles des éléments que tu souhaites cacher par défaut.
Tu appelles la fonction swap(element) avec comme paramètre l'id de l'élément que tu veux afficher/masquer.

Voilà, si tu as des questions, n'hésites pas

[HiRoN]

Salut Bovino et merci pour ta réactivité.
Je vais analyser ton script dès que j'ai un moment

[HiRoN]

@Bovino : En effet script sympa. Mais, lors de la 1ere ouverture (autant sous FF que IE), l'effet "progressif" ne se fais pas. Une idée ?

Néanmoins, fonctionne très bien sous sous FF & IE avec de multiples ouvertures à la différence du mien

Je vais voir pour rajouter mon effet sur le grossissement / réduction des lettres en même temps, mais bon, j'ai bien galéré pour réussir sur le mien

EDIT : J'ai peut-être mal fais quelque chose, serait-il possible d'avoir l'intégralité du code ? (avec appel côté HTML)

[Bovino]

Oui, si tu as mis un display:'none' en css, du coup, à l'ouverture de la page, la hauteur enregistrée est 0px, donc à la 1re ouverture, c'est uniquement le height auto qui s'affiche j'imagine...

[HiRoN]

Envoyé par Bovino

Oui, si tu as mis un display:'none' en css, du coup, à l'ouverture de la page, la hauteur enregistrée est 0px, donc à la 1re ouverture, c'est uniquement le height auto qui s'affiche j'imagine...

C'était en effet cela le problème, j'avais capté entre temps.
Reste à adapter mon effet sur la police. Si tu as des idées, je suis preneur

[Bovino]

Je pense que tu peux reprendre le même principe d'un tableau stockant les valeurs par défaut, ensuite, quand tu lances la fonction, tu affecte un facteur proportionnel de la diminution de la taille de la fenêtre sur la police...
En résumé (pour la disparition), tu crée la variable

rapport=5*taille_police/taille_div

(le 5*, c'est la valeur du pas que j'ai donné), puis dans la fonction, tu affectes

elt.style.fontSize-=rapport

[madmax54]

pouvez vous me dire ce qu'il faut modifier pour que a la première visualisation il n'y ai pas ce problème d'agrandissement non progressif.

J'ai regardé du coté du diplay:none mais rien n'a faire

En faite lors du premier clique j'ai l'impression qu'il commence bien au début a ouvrir le Div pendant 1/2 seconde puis il affiche tout.
Par contre ensuite sa passe nickel.

Merci !!

[Bovino]

Tu peux n'affecter le display: none qu'après le stockage de la page, mais du coup, à l'affichage, ton élément est affiché furtivement puis caché, du coup, pour parer aussi à cela, tu peux affecter un z-index (si c'est possible) négatif au départ puis le remettre à une valeur 'visible' après avoir affecté le display none.