Discussion :

[acheda]

Bonjour,

Malgré le grand nombre de sujets concernant les DIV, leur taille, et IE, je n'ai pas trouvé mon bonheur...

J'ai un DIV qui vient s'afficher par dessus ma page. (Comme une sorte de pop-up)
Je souhaite que le clic sur un bouton permette de réduire la hauteur de cette "pop-up" de manière à n'en voir que le haut (avec son titre) D'où les 17px. Le clic sur le même bouton (situé en haut), rendrait à la pop-up sa taille initiale.
(Celà permet de montrer ou non le contenu de la page en dessous du DIV).

J'ai du code qui fonctionne bien sous Firefox mais pas du tout sous IE.

Voici le code de la fonction appelée au clic sur le bouton (que ce soit pour fermer ou ouvrir la "pop-up") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
reduc = function() {
	var ibox = getElem('ibox_wrapper');
	if(ibox.style.height != "17px"){
		document.getElementById("tailleIbox").value=ibox.style.height;
		ibox.style.height = 17;
	}
	else{
		ibox.style.height = document.getElementById("tailleIbox").value;
 
	}

"ibox" est donc mon DIV.
tailleIbox est une zone cachée où je stocke la hauteur initiale.

J'ai essayé d'utiliser OffsetHeight (peut-être mal) sans plus de succès, même moins car je n'arrivais plus à le faire marcher sous Firefox. Le soucis étant d'affecter une valeur à la hauteur du DIV, et non pas d'en récupérer une.

Voili... Si quelqu'un a un début de solution... Je l'en remercie d'avance

[jibouze]

Bonjour,
essaies de rajouter un display:block au moment de l'affectation de la hauteur.
J'ai eu le même pb.

[acheda]

Merci pour ta réponse!

J'ai donc maintenant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
reduc = function() {
	var ibox = getElem('ibox_wrapper');
	if(ibox.style.height != (17+"px")){
		document.getElementById("tailleIbox").value=ibox.style.height;
		ibox.style.height = 17 +"px";
		ibox.display = 'block';
	}
	else{
		ibox.style.height = document.getElementById("tailleIbox").value;
		ibox.display = 'block';
	}
}

Mais ça ne change rien (ça continue de fonctionner sous Firefox (ouf) mais rien de mieux sous IE...
Ai-je placé ma "commande" sur le bon objet?

[jibouze]

Oui, mais c'est pas "exactement" la bonne commande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
ibox.style.display = 'block';

[acheda]

Oups
Mais bon, ça ne change pas le comportement sous IE...

J'ai l'impression que ça ressemble à une question de rafraîchissement car si je fait des alerts avec les différentes valeurs, sous IE, il m'affiche les bonnes valeurs de hauteur, comme s'il avait tout bien fait, mais à l'écran la taille de mon DIV n'a pas bougé d'un poil...

[jibouze]

Je suppose que tu fixes la taille initialement via un style et pas en js.
En tous cas, la taille initiale de ton DIV doit être ecrit "17px", par exemple.
Ensuite, ta fonction doit tester directement sur "17px" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
reduc = function() {
	var ibox = getElem('ibox_wrapper');
	if(ibox.style.height != "17px")){
		document.getElementById("tailleIbox").value=ibox.style.height;
		ibox.style.height = "17px";
		ibox.display = 'block';
	}
	else{
		ibox.style.height = document.getElementById("tailleIbox").value+"px";
		ibox.display = 'block';
	}
}

chez moi ça marche sur IE (7.0)

[acheda]

Raaah zut...
Il doit y avoir autre chose qui cloche quelque part car ça non plus ça ne fonctionne pas (ni sur IE6 ni sur IE7)...

Je fixe la taille initiale par l'intermédiaire de l'appel dans ma page d'une fonction javascript. Dans cette fonction, si je fais un alert sur la taille initiale, il me donne "400px" (Sans les guillemets)...

Elle me plaisait bien ton idée Tu n'en aurais pas d'autres?

[jibouze]

Ben je comprends pas.
Fais voir les différentes parties de ton script au cas où...
Sinon, tu pourrais essayer autre chose.
tu crées une classe bidon pour ton bloc, genre blocTaille1. Dedans, tu lui mets un height de 17px.
Tu crées une 2ème classe bidon, genre blocTaille2. Dedans, tu lui mets un height de 200px.
Sur l'évènement onclick, en javascript, tu changes la classe de ton div avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById(nomdubloc).className="blocTaille2";

[acheda]

Pfiou...
Avant d'essayer ton truc et d'éventuellement donner plus de code, je te fais part d'un truc bizarre : si à la place de réduire la hauteur de mon DIV à 17px je réduit la largeur de mon DIV à 17px (je remplace donc juste height par width dans ma fonction), et bien, ça marche .
Comprends pas non plus....

Voici les parties de mon code que je juge liées à cette fonctionnalité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
if(params['height']) {ibox.style.height = params['height']+'px';} 
else {ibox.style.height = '280px';}
if(params['width']) {ibox.style.width = params['width']+'px';} 
else {ibox.style.width = '450px';}
 
ibox.style.display = "";
ibox.style.visibility = "hidden";
posToCenter(ibox); 	
ibox.style.visibility = "visible";
getElem('ibox_content').style.overflow = "auto";

C'est la fonction qui reçoit les paramètres d'appel de ma page (params).

Voili....

[jibouze]

Je vois vraiment pas.
Avec le même code que ce que tu as mis, ton DIV change de largeur et pas de hauteur ?
Alors il y a peut-être une différence dans l'initialisation du height et du width sur ton bloc.

[acheda]

Avec le même code mais après avoir remplacé Height par Width quand même...

L'initialisation est en tout point semblable...

J'ai essayé ton autre solution, sans succés (faut dire que je n'y connais pas grand chose en classe css).

Je crois que je ne vais pas tarder à abandonner l'idée...

En tous cas, merci pour ton aide... Ca réconforte

[jibouze]

Bah à la limite si c'est pas trop long, envoies tout le code !

[acheda]

Je t'ai mis ça en message privé... Comme ça tu seras le seul encombré!
Sauf si d'autres insistent pour participer
Si on trouve une solution, on la mettra sur le forum.

[DontShootMe]

Essaye de mettre dans le style de ta forme (div ou span ou . . .)
overflow:hidden;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("tailleIbox").style.overflow = 'hidden';

Normalement cela devrait résoudre ton probleme.

Tiens nous au courrant !

[acheda]

Bonjour!

Rahh, zut : je ne peux plus tester ça car ne trouvant pas de solution, je suis partie sur tout autre chose.
En utilisant le code proposé là :
http://www.walterzorn.com/dragdrop/dragdrop_e.htm je n'ai plus rien du tout qui concerne ma solution d'Ibox.

Cette solution me permet de rendre mon DIV "déplaçable". Plus besoin donc de réduire la taille de mon DIV pour voir dessous.

Merci quand même en tous cas!

(C'est résolu ça ou non du coup?)